Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Css Dinamik Resim Cerçevesi
#1
www.deccal.org


Css:
PHP Kod:
<figure class="item">
  <
div class="inner">
    <
img src="http://placekitten.com/g/300/200" />
  </
div>
  <
figcaption class="title">
     <
h1>CYBeRiZM</h1>
    
Dinamik Resim Cerçevesi.
  </
figcaption>
</
figure


Html:
PHP Kod:
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
body {
  
text-aligncenter;
  
padding3rem;
  
background-imageurl(https://dl.dropboxusercontent.com/u/20104014/codepen/bg.jpg);
  
font-family'Open Sans'sans-serif;
  
font-weight300;
}

.
item {
  list-
style-typenone;
  
positionrelative;
  
displayinline-block;
  
background-colorblack;
  
padding2rem;
  -
moz-box-shadowrgba(0000.70 1rem 2rem 0;
  -
webkit-box-shadowrgba(0000.70 1rem 2rem 0;
  
box-shadowrgba(0000.70 1rem 2rem 0;
}
.
item:before, .item:after {
  
content' ';
  
displayblock;
  
background-imageurl(https://dl.dropboxusercontent.com/u/20104014/codepen/frame-h.png);
  
-moz-background-sizecover;
  -
o-background-sizecover;
  -
webkit-background-sizecover;
  
background-sizecover;
  
positionabsolute;
  
left0;
  
height2rem;
  
width100%;
}
.
item:before {
  
background-positiontop center;
  
top0;
}
.
item:after {
  
background-positionbottom center;
  
bottom0;
}

.
inner {
  
positionrelative;
  
padding2rem;
  
background-colorwhite;
  -
moz-box-shadowrgba(0000.70 0 1.5rem 0 inset;
  -
webkit-box-shadowrgba(0000.70 0 1.5rem 0 inset;
  
box-shadowrgba(0000.70 0 1.5rem 0 inset;
}
.
inner:before, .inner:after {
  
content' ';
  
background-imageurl(https://dl.dropboxusercontent.com/u/20104014/codepen/frame-v.png);
  
displayblock;
  -
moz-background-sizecover;
  -
o-background-sizecover;
  -
webkit-background-sizecover;
  
background-sizecover;
  
positionabsolute;
  
top: -2rem;
  
width2rem;
  
heightcalc(100% + 2rem*2);
}
.
inner:before {
  
background-positionleft center;
  
left: -2rem;
}
.
inner:after {
  
background-positionright center;
  
right: -2rem;
}
.
inner img {
  
displayblock;
  
border1px solid rgba(0000.2);
}

.
title {
  
text-alignleft;
  
positionabsolute;
  
left0;
  
margin-topcalc(2rem 1.5rem);
  
color#acacac;
  
line-height1.5rem;
}
.
title h1 {
  
font-size2rem;
  
margin-bottom0.5rem;
  
colorwhite;

İnsɑnlɑr değişmez değişen tek şey şɑrtlɑr ve çıkɑrlɑr...
Beğenenler:
#2
Vayy Guzelmıs Baskan
Beğenenler:
#3
Bunun gibi video oynatıcılarda mevcut : )
"Milletin Eline Vermekten Emekli"  Benim için hacking' bitmiştir.
Aramıza Katılmak - Banlanan üyeler hk. - Heckırlar
Beğenenler:
#4
(14-07-2014, Saat: 11:26)ByAyar Adlı Kullanıcıdan Alıntı: Bunun gibi video oynatıcılarda mevcut : )

evet benzeri vardı exciting
İnsɑnlɑr değişmez değişen tek şey şɑrtlɑr ve çıkɑrlɑr...
Beğenenler:
#5
eline sağlık abi exciting
Beğenenler:
#6
Eline Sağlık Abi
Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Indexe Resim Ekleme Kodu KingSkrupellos 0 510 26-09-2014, Saat: 11:39
Son Yorum: KingSkrupellos
Anahtar Kelimeler

Css Dinamik Resim Cerçevesi indir, Css Dinamik Resim Cerçevesi Videosu, Css Dinamik Resim Cerçevesi Online izle, Css Dinamik Resim Cerçevesi Bedava indir, Css Dinamik Resim Cerçevesi Yükle, Css Dinamik Resim Cerçevesi Hakkında, Css Dinamik Resim Cerçevesi Nedir, Css Dinamik Resim Cerçevesi Free indir, Css Dinamik Resim Cerçevesi Oyunu, Css Dinamik Resim Cerçevesi Download


1 Ziyaretçi