重新創建類似mac的下拉：用於「glint」外觀的漸變類型是什麼類型？

這主要是一個視覺設計問題。重新創建類似mac的下拉：用於「glint」外觀的漸變類型是什麼類型？

我想創建這些類似於CSS Mac菜單下拉選項菜單中，東西：

mac drop down menu

你可以看到我目前已經完成here on JSfiddle簡化版。

我所做的主要下拉透明和去除的箭頭（在#rightTab重新添加CSS三角形）：

background: transparent; 
background-image: none; 
-webkit-appearance: none;

，現在我試圖創建一個漸變，看起來類似於mac下拉菜單中的「glint」。我正在使用this gradient generator。然而，我最初的假設是，這種效應可能是由淡白色銀的淡入/淡出造成的，這是錯誤的。它看起來非常平坦和沉悶。

因此，有關如何創建類似於mac的效果的任何想法？

來源

2014-04-08 James G.

我建議拍一個你想重新創建的Mac滑塊的屏幕截圖，使用Photoshop來獲取正確的顏色和位置，然後在生成器上使用該信息。給我一分鐘，我可以看到我想出了什麼。 – Manly

上邊框更輕。底部邊框較暗。眩光在兩端發亮，可以使用額外的徑向漸變來完成，但它們在IE中不起作用。使用畫布元素幾乎會更好。 – circusdei

@JohnManly我對Photoshop很不好，但這是個好主意。我只是希望大致瞭解這會帶來什麼。謝謝。 –

這是我剛剛想出了，但是當我去複製，我發現他們有一個「上傳圖片」選項。嘗試上傳您想要複製的漸變圖像。

background: #ffffff; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffffff 0%, #e9e9e9 49%, #e0e0e0 51%, #ededed 52%, #f0f0f0 95%, #ffffff 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#e9e9e9), color-stop(51%,#e0e0e0), color-stop(52%,#ededed), color-stop(95%,#f0f0f0), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #ffffff 0%,#e9e9e9 49%,#e0e0e0 51%,#ededed 52%,#f0f0f0 95%,#ffffff 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0); /* IE6-9 */

我會提供更多的幫助，但是現在是時候讓我計時出門回家！

我也只專注於漸變，你仍然會有一些border和box-shadow工作要做。

來源

2014-04-08 20:57:00 Manly

它需要很多工作才能讓它看起來很正確。

OSX Select Box shading

來源

2014-04-08 20:54:52 circusdei

重新創建類似mac的下拉：用於「glint」外觀的漸變類型是什麼類型？

回答

相關問題