Merhaba Arkadaşlar
Bu gün sizlere efektif bir kart yapımını göstereceğim.
Öncelikle belirtmek isterim ki yukarıda gife çevirirken biraz orantısızlık oldu ondan dolayı resmini de paylaşayım.
Artık konumuza geçelim. İlk olarak html kodlarını paylaşayım.
Font awesome ve kendi css dosyamızı içeri aktardık. Ardından fotoğraf alanımızı ve fotoğrafın üstüne gelince gözükecek alanı ayırdık. Ardından fotoğrafın üstünde bir siyahlık verip istenilen yazı için bir alan oluşturduk.
Artık css tarafına geçebiliriz.
Josefin sans yazı tipini içeri aktarıp card divimizin konumlanmasını ve boyutlarını ayarladık. Transition ile saniye cinsinden süresini verdik.
Kartımızın ön tarafında fotoğrafımızın kaplayacağı alanı ve x ekseninde rotasını belirledik. Top ve left 0 la boşlukları kaldırdık.
Ardından yazımızın arkasındaki siyah alanı ayarlamak için den divimizi çağırıp genişlik yükseklik belirledik. Opacity ile canlılığını azaltıp bir karartma efekti vermiş olduk. Sonrasında yazımızın stillerini belirleyip hover yani mouse üstüne gelince ne olması gerektiğini söyledik. Bunuda x ekseninde 180 derece yer değiştir diyerek dedik.
Burada da kartımızın arka tarafının görünüşünü ve normalde gözükmeyeceğini sağladık. Diğer eşitlik ve boşluk ayarladından sonra
Mouse kartımızın üstündeyken kartımızın yerini ardındanda yazılarımızın konumunu ve büyüklüklerini belirledik.
Sosyal medya iconlarının görünümünü, konumunu belirledikten sonra üstlerine gelince arkaplanın hangi renk olacağınıda social-icons a:hover div kullanımımızla vermiş olduk.
Bu günlük sizlere anlatacaklarım bu kadar.
İyi Forumlar
Bu gün sizlere efektif bir kart yapımını göstereceğim.
Öncelikle belirtmek isterim ki yukarıda gife çevirirken biraz orantısızlık oldu ondan dolayı resmini de paylaşayım.
Artık konumuza geçelim. İlk olarak html kodlarını paylaşayım.
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/cardcss2.css" rel="stylesheet">
</head>
<body>
<div class="card">
<div class="front">
<img src="img/2.jpg">
<div class="den"></div><h5>Detaylı bilgi için resmin üzerine gelin</h5>
</div>
<div class="back">
<div class="details">
<h2>'Captainkanka<br><span>Web Developer</span></h2>
<div class="social-icons">
<a href="#"><i class="fa fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa fa-brands fa-youtube"></i></a>
<a href="#"><i class="fa fa-brands fa-whatsapp"></i></a>
<a href="#"><i class="fa fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>Font awesome ve kendi css dosyamızı içeri aktardık. Ardından fotoğraf alanımızı ve fotoğrafın üstüne gelince gözükecek alanı ayırdık. Ardından fotoğrafın üstünde bir siyahlık verip istenilen yazı için bir alan oluşturduk.
Artık css tarafına geçebiliriz.
CSS:
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700');
body{
margin: 0;
padding: 0;
font-family: 'Josefin Sans' sans-serif;
}
.card
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 400px;
transform-style: preserve-3d;
perspective: 600px;
transition: 0.5s;
}Josefin sans yazı tipini içeri aktarıp card divimizin konumlanmasını ve boyutlarını ayarladık. Transition ile saniye cinsinden süresini verdik.
CSS:
.card .front{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
backface-visibility: hidden;
transform: rotateX(0deg);
transition: 1s;
}
.card .front img{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}Kartımızın ön tarafında fotoğrafımızın kaplayacağı alanı ve x ekseninde rotasını belirledik. Top ve left 0 la boşlukları kaldırdık.
CSS:
.card .front .den{
background-color:black;
width:100%;
height:15%;
margin-top:-25%;
opacity:0.5;
}
.card .front h5{
position:absolute;
margin-left:8%;
margin-right:4%;
z-index:10000;
margin-top:-15%;
color:#fff;
font-size:15px;
}
.card:hover .front
{
transform: rotateX(180deg);
}Ardından yazımızın arkasındaki siyah alanı ayarlamak için den divimizi çağırıp genişlik yükseklik belirledik. Opacity ile canlılığını azaltıp bir karartma efekti vermiş olduk. Sonrasında yazımızın stillerini belirleyip hover yani mouse üstüne gelince ne olması gerektiğini söyledik. Bunuda x ekseninde 180 derece yer değiştir diyerek dedik.
CSS:
.card .back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
backface-visibility: hidden;
transform: rotateX(180deg);
transition: 1s;
}
.card .back::before
{
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
}Burada da kartımızın arka tarafının görünüşünü ve normalde gözükmeyeceğini sağladık. Diğer eşitlik ve boşluk ayarladından sonra
CSS:
.card:hover .back
{
transform: rotateX(0deg);
}
.card .back .details
{
position:absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.card .back .details h2
{
margin: 0;
padding: 0;
font-size: 24px;
color: #fff;
}
.card .back .details h2 span
{
color: #a7a7a7;
font-size: 16px;
}Mouse kartımızın üstündeyken kartımızın yerini ardındanda yazılarımızın konumunu ve büyüklüklerini belirledik.
CSS:
.social-icons
{
padding: 10px 0;
}
.social-icons a{
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
background: #262626;
color: #fff;
text-decoration: none;
border-radius: 50%;
transition: 0.5s;
}
.social-icons a .fa
{
line-height: 36px;
}
.social-icons a:hover
{
background: #e91e63;
}Sosyal medya iconlarının görünümünü, konumunu belirledikten sonra üstlerine gelince arkaplanın hangi renk olacağınıda social-icons a:hover div kullanımımızla vermiş olduk.
Bu günlük sizlere anlatacaklarım bu kadar.
İyi Forumlar
