Bugün Html ve Css kodları yazarak kalp şeklini nasıl yapabileceğimizi göstereceğim.
Örneğimizin son hali aşağıdaki gibi olacak.
Kodlarımızı yazarken Css3 özelliklerinden transform ve position gibi özellikleri kullanıyoruz. Bu özellikler ile ilgili eksikleriniz varsa aşağıdaki linklerden konu anlatımlarına bakabilirsiniz.
Artık kodlarımızı yazmaya başlayabiliriz.
Html Kodları
|
1 2 3 |
<div class="kalp"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<style> .kalp { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: red; height: 50px; width: 50px; transform: rotate(-45deg); } .kalp::after { background-color: red; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: 0px; left: 25px; } .kalp::before { content: ""; background-color: red; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: -25px; left: 0px; } </style> |
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Html ve Css ile Güp Güp Atan Kalp Yapımı
Yeni bir yazımda görüşmek üzere.
