使用CSS3而不是圖像來實現預期的效果

我想用CSS3代替圖像來編碼http://www.cssmania.com/中的菜單。使用CSS3而不是圖像來實現預期的效果

到目前爲止我的代碼（&圖像+樣式）可以在這裏找到： http://sarahjanetrading.com/js/j

我試着用CSS3實現邊框陰影和菜單裏的背景匹配之一http://www.cssmania.com。但它看起來不一樣。當我嘗試使用圖像時，它看起來幾乎完美。但我想用CSS3來實現結果。

我試着檢查cssmania.com上的代碼，但無法找到菜單邊界的代碼，使它看起來是這樣的，菜單裏的背景。我只想要這兩個函數的代碼。

感謝

來源

2011-10-03 user967211

我看到的突出的主要不同是鏈接的背景。原始設計上有一個微妙的漸變，這是你的缺失。這也是爲什麼邊框看起來不同 - 漸變是在顏色上，而不是邊框，但你的眼睛被欺騙了。

此添加樣式表：

#header-mania .header { 

    /* Keep everything *except* the original background */ 

    background: #7fa445; 
    background: -moz-linear-gradient(top, #7fa445 0%, #6b9632 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fa445), color-stop(100%,#6b9632)); 
    background: -webkit-linear-gradient(top, #7fa445 0%,#6b9632 100%); 
    background: -o-linear-gradient(top, #7fa445 0%,#6b9632 100%); 
    background: -ms-linear-gradient(top, #7fa445 0%,#6b9632 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7fa445', endColorstr='#6b9632',GradientType=0); 
    background: linear-gradient(top, #7fa445 0%,#6b9632 100%); 
}

那背景的顏色可能不準確（我不喜歡發射了PS正好相匹配的顏色），但可以調整很容易地使用the Ultimate CSS Gradient Generator顏色

來源

2011-10-03 05:31:32 OverZealous

哦，你可能想添加'body {margin：0; }'以防止白色邊框。 ;-) – OverZealous

Hrm，我只注意到你仍然在底部使用一個圖像作爲部分白色圓圈。你*可能*能夠使用純CSS3編寫該圈子，但我認爲這不值得付出努力。如果您不需要支持IE 7或更高版本，則可以使用[數據URI]（http://css-tricks.com/5970-data-uris/）嵌入圖像。 – OverZealous

非常感謝ALOT overZeous！你是一個拯救生命的人......感謝您抽出寶貴時間幫忙。 :) – user967211

至於我擔心你的菜單的版本看起來並不太大的不同，事實上，如果你他們只使用上的元素text-shadow聲明檢查CSS狂熱的樣式表文件，其他一切是通過圖像實現的。希望你發現我的意見很有幫助！

來源

2011-10-03 05:08:51

邊框看起來不同，菜單也是背景。我希望他們看起來像cssmania.com中的那些，但我猜他們正在使用圖像，因爲我無法在樣式表上找到它。我只是想讓這兩件事看起來很相似。謝謝 – user967211

使用CSS3而不是圖像來實現預期的效果

回答

相關問題