一些上流的CSS3圖片樣式

來源:互聯網
上載者:User
譯自:CSS3 Image Styles
中文:CSS3圖片樣式
請尊重著作權,轉載請註明來源,多謝~~

直接在圖片元素上直接應用CSS3 inset box-shadow 或 border-radius時,瀏覽器並不能完美的渲染它們。不過,如果把這個圖片用作背景圖,你就可以可以給它添加任何樣式了,瀏覽器也會很好地渲染。Darcy Clarke和我做了一個簡單的教程,講解如何使用jQuery來動態地製作完美的圓角圖片。今天我將重溫這個主題然後向你展示使用background-image的方法可以實現多少效果。我將向你展示如何使用box-shadow、border-radius 和 transition 來創作不同的圖片風格。

先看下demo

問題 (見 demo)

看一下demo,請注意在第一行的圖片中使用了border-radius和inset box-shadow。Firefox會直接在圖片元素上渲染border-radius,但不會渲染inset box-shadow。chrome/safari則兩者都不渲染。

解決方案

要讓 border-radius 和 inset box-shadow 正常工作,解決方案就是將實際圖片變作background-image.

動態方法

要想動態實現,可以簡單的使用jQuery為每個圖片元素外麵包一個背景圖片。下面的jQuery代碼會將所有圖片外麵包一個span標籤然後將圖片用作其背景圖片(jQuery代碼由Darcy Clarke編寫)。

12345678910111213
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("img").load(function() {$(this).wrap(function(){return "<span class="image-wrap " + $(this).attr("class") + "" style="position:relative; display:inline-block; background:url(" + $(this).attr("src") + ") no-repeat center center; width: " + $(this).width() + "px; height: " + $(this).height() + "px;" />";});$(this).css("opacity","0");});});</script>

輸出

上面的指令碼將會輸出下面的HTML代碼:

123
<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;"><img src="image.jpg" style="opacity: 0;"></span>

圓形圖片(見 demo)

現在,圖片被用作背景圖了,你可以給它添加任意你想要的樣式上去。下面是一個簡單的使用border-radius實現的圓形圖片。如果你對CSS3不太瞭解,可以閱讀下Basics of CSS3,也可以搜尋一下前端觀察。

CSS

12345
.circle .image-wrap {-webkit-border-radius: 50em;-moz-border-radius: 50em;border-radius: 50em;}

卡片風格(見 demo)

下面是一個像卡片的圖片風格,用了多個inset box-shadow。

CSS

123456789
.card .image-wrap {-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

浮雕風格 (見 demo)

通過一點兒改變,我可以將卡片風格轉換為浮雕。。。

CSS

123456789
.embossed .image-wrap {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

軟浮雕風格 (見 demo)

和浮雕風格真的很像,我只是加了1px的虛化~~

CSS

123456789
.soft-embossed .image-wrap {-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

剪貼畫風格(見 demo)

同樣只是inset box-shadow,我可以讓它看起來像剪貼畫。

CSS

123456789
.cut-out .image-wrap {-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

變形和發光 (見 demo)

這個例子中,我為圖片外容器增加了變形。mouseover的時候,它將從圓角形狀變為圓形,然後增加了光暈效果。光暈效果通過多重box-shadow實現。

CSS

12345678910111213141516171819
.morphing-glowing .image-wrap {-webkit-transition: 1s;-moz-transition: 1s;transition: 1s; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;} .morphing-glowing .image-wrap:hover {-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-border-radius: 60em;-moz-border-radius: 60em;border-radius: 60em;}

發光遮罩 (見 demo)

發光漸層遮罩是通過:after虛擬元素實現的。。。

CSS

1234567891011121314151617181920212223242526
.glossy .image-wrap {-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;} .glossy .image-wrap:after {position: absolute;content: " ";width: 100%;height: 50%;top: 0;left: 0; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);}

倒影 (見 demo)

這個例子中,我將遮罩漸層移動到底部,於是它就成了倒影。。。

CSS

123456789101112131415161718192021222324
.reflection .image-wrap:after {position: absolute;content: " ";width: 100%;height: 30px;bottom: -31px;left: 0; -webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px; background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);} .reflection .image-wrap:hover {position: relative;top: -8px;}

光澤和倒影(見 demo)

這個例子中,我同時使用了:before和:after虛擬元素來實現帶倒影的光澤效果。

CSS

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
.glossy-reflection .image-wrap {-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); -webkit-transition: 1s;-moz-transition: 1s;transition: 1s; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;} .glossy-reflection .image-wrap:before {position: absolute;content: " ";width: 100%;height: 50%;top: 0;left: 0; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);} .glossy-reflection .image-wrap:after {position: absolute;content: " ";width: 100%;height: 30px;bottom: -31px;left: 0; -webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px; background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);}

膠帶風格(見 demo)

這裡使用了:after虛擬元素來在圖片頂部實現了膠帶風格的漸層。

CSS

123456789101112131415161718192021
.tape .image-wrap {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);} .tape .image-wrap:after {position: absolute;content: " ";width: 60px;height: 25px;top: -10px;left: 50%;margin-left: -30px;border: solid 1px rgba(137,130,48,.2); background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);}

變形和著色 (見 demo)

在下面的這個例子中,我用了 :after元素來在mouseover的時候添加發光漸層。

CSS

1234567891011121314151617181920212223242526272829303132333435363738
.morphing-tinting .image-wrap {position: relative; -webkit-transition: 1s;-moz-transition: 1s;transition: 1s; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;} .morphing-tinting .image-wrap:hover {-webkit-border-radius: 30em;-moz-border-radius: 30em;border-radius: 30em;} .morphing-tinting .image-wrap:after {position: absolute;content: " ";width: 100%;height: 100%;top: 0;left: 0; -webkit-transition: 1s;-moz-transition: 1s;transition: 1s; -webkit-border-radius: 30em;-moz-border-radius: 30em;border-radius: 30em;}.morphing-tinting .image-wrap:hover:after  {background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);}

羽化邊緣的圓形(見demo)

發散漸層也可以用作遮罩層來實現圓形羽化效果。

CSS

12345678910111213141516171819
.feather .image-wrap {position: relative; -webkit-border-radius: 30em;-moz-border-radius: 30em;border-radius: 30em;} .feather .image-wrap:after  {position: absolute;content: " ";width: 100%;height: 100%;top: 0;left: 0; background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);}

瀏覽器支援

本文的方法可以在支援border-radius、box-shadow、:before和:after虛擬元素的瀏覽器上,比如Chrome/Safari/Firefox等,而在一些落後的瀏覽器比如IE9(包括IE9)則不能完全支援——IE6/7/8沒有任何錶現,IE9會有普通的圓角。

發揮你的創造力

正如你看到的,你幾乎可以使用:before和:after虛擬元素實現任何效果。如果你有用CSS3實現更多的創意圖片效果,歡迎通過評論與大家分享。

PS,本文中使用:before/:after來實現虛擬元素,其實我更建議使用雙冒號來實現,雖然單冒號有更多的瀏覽器支援,但是對於這些CSS3實現的效果來說,雙冒號更安全一些。更多的原因,可以參考《:before和::before的區別》



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。