Skew ve Hover ile Not Yapımı - HTML5 - CSS3 - Ders19
Evet arkadaşlar bu video dersimizde sizler için bir yer imleci - not kağıdı artık ismine ne derseniz :) Güzel bir uygulama yaptık dersde yazılan code içerikleri aşağıdadır.
Takipte kalıp kanalımıza abone olmayı unutmayın ;)
Takipte kalıp kanalımıza abone olmayı unutmayın ;)
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Not</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<body>
<div class="container"><p>Bu videomuzda html ve css kullanarak 3boyutlu bir işaretci
oluşturacağız yapışkan bir not kağıdı da diyebilirsiniz.
Videoların devamı için kanalımıza abone olmayı unutmayın :)</p>
<h1>Kanalımıza Abone Olmayı Unutmayın</h1>
</div>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
background: #b0ff30;
}
.container{
width: 300px;
height: 150px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) skewY(-5deg);
padding: 20px;
box-sizing: border-box;
border: 2px solid #262626;
border-radius: 5px;
font-family: arial;
transition: .5s;
box-shadow: -1px -1px 0 #444,
-2px -2px 0 #444,
-3px -3px 0 #444,
-4px -4px 0 #444,
-5px -5px 0 #444,
-6px -6px 0 #444;
}
.container:hover{
transform: translate(-50%,-50%) skewY(5deg);
box-shadow: 1px -1px 0 #444,
2px -2px 0 #444,
3px -3px 0 #444,
4px -4px 0 #444,
5px -5px 0 #444,
6px -6px 0 #444;
}
.container p{
margin: 0;
padding: 0;
color: #262626;
font-size: 0.5em;
}
.container h1{
margin: 10px;
padding: 0;
color: #262626;
font-size: 1em;
}
.container:before{
content: '';
width: 30px;
height: 30px;
background: #fff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(18px) rotate(45deg);
border-bottom: 2px solid #262626;
border-right: 2px solid #262626;
}
.container:after{
content: '';
width: 100px;
height: 4px;
background: #000;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(36px);
border-bottom: 2px solid #262626;
border-right: 2px solid #262626;
filter: blur(3px);
}
Yorumlar
Yorum Gönder