Wstawiamy dowolne zdjęcie, natomiast całą resztę bierze na siebie CSS. W efekcie otrzymujemy poświatę naokoło ramki- wszystko oczywiście dopasowane kolorystycznie.
Najlepszy efekt uzyskamy na ciemnym tle.
Wykorzystuje filtry SVG.
Źródło:
http://cssdeck.com/labs/ambi-glow
HTML
<![CDATA[<pre class="brush:html"><!--[if lt IE 7]> <div class="wrapper lt-ie10 lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]> <div class="wrapper lt-ie10 lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]> <div class="wrapper lt-ie10 lt-ie9">
<![endif]-->
<!--[if IE 9]> <div class="wrapper lt-ie10">
<![endif]-->
<!--[if gt IE 9]><!--> <div class="wrapper">
<!--<![endif]-->
<div class="centered">
<div class="inner">
<img alt="nostalgia by Nikos Zacharoulis" class="pic" height="280" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u9XdUIygfzXwE77r9W2kPNMlgjeFzS3_JqJzxbJsI2aFb0UJJ8_YHRIrDlu9ROzqrpiNal0Rl_yYU-NSfL9GmWrUi4SMK0acOSBn59YEGbT4kZn17ugVZQwYnkCTMdaIMj4d9_g0RN8HhcnCcfVk0=s0-d" width="280">
</div>
</div>
<!--[if lte IE 9]>
<img class="ie-fallback-bg-blur" src="http://pcdn.500px.net/27549003/d409bce305cd0f77f3b12d124f69c7a3659bfaea/3.jpg" width="280" height="280" alt="nostalgia by Nikos Zacharoulis">
<![endif]-->
<svg class="bg-blur">
<defs>
<filter height="400%" id="blur" width="400%" x="-200%" y="-200%">
<fegaussianblur in="SourceGraphic" stddeviation="70">
</fegaussianblur></filter>
</defs>
<image filter="url(#blur)" height="280" id="svg-image" width="280" x="150" xlink:href="http://pcdn.500px.net/27549003/d409bce305cd0f77f3b12d124f69c7a3659bfaea/3.jpg" y="150">
</image></svg>
<!--
Supported:
IE 10
Firefox 3+
Chrome 8+
Safari 6
Opera 9+
Opera mini
Opera Mobile 10
Chrome for Android
Firefox for Android
Fallback to IE-filters in IE9 and below
Not supported:
Safari 5.1 and below
Android Browser 4.2 and below
iOS Safari 5.1 and below
http://caniuse.com/#feat=svg-filters
-->
]]>
CSS
<![CDATA[/* author: Paul Radzkov
http://paulradzkov.com/2013/gaussian_blur/
*/
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
text-align: center;
background: black;
color: #FFF;
}
.centered {
position: relative;
z-index: 1;
float: left;
left: 50%;
}
.centered .inner {
position: relative;
left: -50%;
}
/* positioning for IE7 */
.lt-ie8 .centered {
position: absolute;
top: 50%;
}
.lt-ie8 .centered .inner {
top:-50%;
}
/* blur position */
.bg-blur {
height: 580px;
width: 580px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -290px;
margin-top: -290px;
z-index: 0;
}
/* IE fallback */
.lt-ie10 #svg-image {
display: none;
}
.ie-fallback-bg-blur {
height: 280px;
width: 280px;
padding: 80px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -290px;
margin-top: -290px;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=70);
}
/* decoration */
.pic {
display: block;
border: 1px solid rgba(0,0,0,0.5);
box-shadow:
0 5px 15px rgba(0,0,0,0.5),
0 3px 5px rgba(0,0,0,0.2);
}
.inner:before {
content: '';
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
]]>
0 komentarze:
Prześlij komentarz