顏色動態菜單pgn圖像

我使用的是一種現代化的菜單風格，包括在左側和右側2個PNG圖像，它給菜單帶來了3D外觀。顏色動態菜單pgn圖像

正如我想讓我的網站風格可定製，我需要這些圖像也根據客戶的顏色慾望改變他們的顏色。

我的問題是我沒有ideea如何實現這一點。

我發現的東西，用笑臉我的意思的事情，但在我的情況下，它不是一個CSS創建的笑臉，但一個PNG圖像（http://lab.artlung.com/css3-smiley/）

謝謝顯示。

2012-12-27 Arizona2014

您應該爲您呈現PNG。可能的解決方法是：A）使用SVG處理圖像並通過CSS更改顏色; B）使用字體圖標並通過CSS更改顏色; C）根據指定顏色的請求參數在服務器上創建彩色PNG; D）利用PNG透明度並使用背景顏色來改變圖像顏色。 – feeela

它強烈地依賴於你的圖像。可能你可以留下透明的東西，只需用CSS改變'背景顏色'。或者您可以嘗試爲服務器上的每種顏色生成圖像。或者，您可以創建一些預定義的配色方案併爲其中的每一個準備圖像。另一種方法是檢查你是否可以使用css3（漸變，圓角，陰影等）來創建三維外觀，而不使用PNG –

我嘗試着色的圖像與左邊的小綠色或藍色圖像相似標題或登錄。正如您所看到的，它包含兩種顏色：綠色（藍色）和底下較暗的陰影。哦，是的，如果我將鏈接指向圖片，這將是很好的... http://cdn.tripwiremagazine.com/wp-content/uploads/2012/06/css-multi-purpose-dropdown_thumb.jpg – Arizona2014

使用邊框半徑設計圓角很容易。要創建小三角形，您可以製作一個css三角形（see this fiddle），並且可以使用某些漸變爲三角形效果設計該三角形！只需在圓角矩形的左下方放一個小三角，瞧！這是你的3D效果而不是PNG的！爲三角形

代碼：

CSS：

.arrow-left { 
margin-left:50px; 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-bottom: 50px solid transparent; 

border-right:50px solid blue; 
transform:rotate(135deg); 
-ms-transform:rotate(135deg); /* IE 9 */ 
-moz-transform:rotate(135deg); /* Firefox */ 
-webkit-transform:rotate(135deg); /* Safari and Chrome */ 
-o-transform:rotate(135deg); /* Opera */

}

HTML

<div class="arrow-left"></div>

來源

2012-12-30 20:40:00 falidoro

顏色動態菜單pgn圖像

回答

相關問題