Merhaba. Sizlere bu sefer eğlenceli bir konuyla geldim. Css İle Kalp çizme. Kodlar aşağıda.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ile Kalp Yapımı</title>
<style>
.heart {
position: relative;
width: 100px; /* Kalp genişliği */
height: 100px; /* Kalp yüksekliği */
background-color: red; /* Kalp rengi */
transform: rotate(-45deg);
margin: 50px;
}
.heart:before,
.heart:after {
content: '';
position: absolute;
width: 100px; /* Yuvarlakların genişliği */
height: 100px; /* Yuvarlakların yüksekliği */
background-color: red; /* Yuvarlakların rengi */
border-radius: 50%; /* Yuvarlak şekil */
}
.heart:before {
top: -50px; /* Üst yuvarlağın konumu */
left: 0; /* Üst yuvarlağın konumu */
}
.heart:after {
left: 50px; /* Sağ yuvarlağın konumu */
top: 0; /* Sağ yuvarlağın konumu */
}
</style>
</head>
<body>
<h1>CSS ile Kalp Şekli</h1>
<div class="heart"></div>
</body>
</html>
Gelin size kodları açıklayayım.
.heart sınıfı, kalp şeklini oluşturmak için temel dikdörtgeni tanımlar ve rotate ile dikdörtgeni döndürerek kalp şekli oluşturur.:before ve :after pseudo-elementleri, kalp şeklinin üst kısmındaki iki yuvarlak bölümü oluşturur.Bu kodu bir HTML dosyasına yapıştırarak bir tarayıcıda görüntüleyebilirsiniz. Kalp şekliniz kırmızı renkte görünecektir!
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
