Konuyu Oyla:
  • Derecelendirme: 2.5/5 - 2 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Css Flexbox
#1
www.deccal.org

www.deccal.org

Css:
PHP Kod:
@import url(http://fonts.googleapis.com/css?family=Raleway:100,300);
* {
  
margin0;
  
padding0;
  
border0;
  
outline0;
  
box-sizingborder-box;
}

htmlbody {
  
height100%;
}

.
wrapper {
  
displayflex;
  
flex-directionrow;
  
align-itemsstretch;
  
height100%;
}
.
wrapper .item {
  
displayflex;
  
flex-grow1;
  
transitionall .5s ease;
  
background-sizecover;
  
background-positioncenter;
  
background-repeatno-repeat;
  
positionrelative;
  
overflowhidden;
}
.
wrapper .item:hover {
  
flex-grow4;
  
box-shadowinset 0 0 20px #000;
}
.
wrapper .item:after {
  
content"";
  
width200%;
  
height43.33%;
  
background-colorrgba(0000.75);
  
left: -50%;
  
bottom: -10%;
  
positionabsolute;
  
transformrotate(-15deg);
  
color#fff;
  
text-aligncenter;
  
padding-top20px;
  
text-transformuppercase;
  
font-size40px;
  
font-family'Raleway';
  
font-weight100;
}
.
wrapper .item.ryze {
  
background-imageurl("http://lolwp.com/wp-content/uploads/Dark-Crystal-Ryze.jpg");
  
background-position70center;
}
.
wrapper .item.ryze:after {
  
content"Ryze";
}
.
wrapper .item.irelia {
  
background-imageurl("http://lolwp.com/wp-content/uploads/Irelia-fanart.jpg");
  
background-position45center;
}
.
wrapper .item.irelia:after {
  
content"Irelia";
}
.
wrapper .item.jinx {
  
background-imageurl("http://lolwp.com/wp-content/uploads/2013/09/Jinx-Classic.jpg");
  
background-position70center;
}
.
wrapper .item.jinx:after {
  
content"Jinx";
}
.
wrapper .item.katarina {
  
background-imageurl("http://lolwp.com/wp-content/uploads/Mercenary-Katarina-Updated.jpg");
  
background-position70center;
}
.
wrapper .item.katarina:after {
  
content"Katarina";
}
.
wrapper .item.ziggs {
  
background-imageurl("http://lolwp.com/wp-content/uploads/Ziggs_Splash_0.jpg");
  
background-position75center;
}
.
wrapper .item.ziggs:after {
  
content"Ziggs";


Html:
PHP Kod:
<div class='wrapper'>
  <
div class='item ryze'></div>
  <
div class='item irelia'></div>
  <
div class='item jinx'></div>
  <
div class='item katarina'></div>
  <
div class='item ziggs'></div>
</
div
İnsɑnlɑr değişmez değişen tek şey şɑrtlɑr ve çıkɑrlɑr...
Beğenenler: B3lirsiz , Ayar
#2
eline saglık exciting
Beğenenler:
#3
Teşekkürler
Beğenenler:
#4
sağol abi exciting
Beğenenler:

Anahtar Kelimeler

Css Flexbox indir, Css Flexbox Videosu, Css Flexbox Online izle, Css Flexbox Bedava indir, Css Flexbox Yükle, Css Flexbox Hakkında, Css Flexbox Nedir, Css Flexbox Free indir, Css Flexbox Oyunu, Css Flexbox Download


1 Ziyaretçi