FlexBox Yapımı ve Hover Efekti / Flexbox with cool hover effects - HTML5 - CSS3 - Ders27
Evet arkadaşlar bu video ders uygulamamızda flexbox yapımı ve hover efektinin uygulamasını gördük burada kullandığımız tüm div lere nth-child ile müdahale edebilmeyi gördük ve web siteleriniz için yararlı bir uygulama meydana geldi. Bu dersimizde sadece HTML ve CSS kullanılmıştır. Diğer uygulamalarımızı inceleyin aklınız almayacak CSS3 ile yapılabilenleri görünce. ;) Kanalımıza abone olun ve günlük videolarımızdan haberdar olur. Ders içeriklerimizi paylaşıyoruz kendi web siteniz için uygulayabilirsiniz.
HTML İÇERİĞİ:
<html>
<head>
<title>Flex Box</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<div class="box"><h1><span>Aslan</span></h1></div>
<div class="box"><h1><span>Ayı</span></h1></div>
<div class="box"><h1><span>Leopar</span></h1></div>
<div class="box"><h1><span>Puma</span></h1></div>
<div class="box"><h1><span>Kurt</span></h1></div>
</div>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
background: #ddd;
font-family: calibri;
}
.container{
width: 100vw;
height: 100vh;
display: flex;
box-sizing: border-box;
}
.container .box{
width: 20vw;
text-align: center;
line-height: 100vh;
flex-grow: 1;
background-size: cover;
background-position: center;
transition: 1s;
}
h1{
margin: 0;
padding: 0;
line-height: 100vh;
font-size: 2em;
color: #ddd;
background: rgba(0,0,0,0.8);
}
h1 span{
background: rgba(255,255,255,0);
width: 100%;
transition: 1s;
color: #fff;
padding: 25px 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.box:hover h1 span{
color: #262626;
background: rgba(255,255,255,0.8);
letter-spacing: 7px;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.box:hover h1{
background: rgba(0,0,0,0);
}
.box:hover{
width: 50vw;
}
.container .box:nth-child(1){
background: url(hayvanlar/aslan.jpg);
background-position: center;
background-size: cover;
}
.container .box:nth-child(2){
background: url(hayvanlar/ayı.jpg);
background-position: center;
background-size: cover;
}
.container .box:nth-child(3){
background: url(hayvanlar/leopar.jpg);
background-position: center;
background-size: cover;
}
.container .box:nth-child(4){
background: url(hayvanlar/puma.jpg);
background-position: center;
background-size: cover;
}
.container .box:nth-child(5){
background: url(hayvanlar/kurt.jpg);
background-position: center;
background-size: cover;
}
Iron-Spinning-Tin Quartz Meaning | tithology
YanıtlaSilThe titanium knife Tithology: In titanium magnetic fact, the Tithology: Iron-Spinning-Tin Quartz, known as 2018 ford ecosport titanium Quartz T-Tingel, is the corestone titanium network surf freely used in the Tithology. titanium quartz