CSS ile Kalp Çizmek
Arkadaşlar sizinle bugün CSS3 ile bir kalp çizelim.
İlk önce html dosyamızı oluşturup Body nin içine bir div etiketi oluşturalım. Classı kalp olsun. Sonra css dosyamızı oluşturup html dosyasına çağıralım.
<!DOCTYPE html> <html> <head> <title>CSS Kalp</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="kalp"></div> </body> </html>
Şimdi css dosyamızı kodlamaya başlayalım. Div etiketini bulunduğu pozisyona göre değiştirmek için position: relative yapalım.
Yüksekliği 170px yapalım.
Genişliği 200px yapalım.
Dışarıdan 20px boşluk verelim.
.kalp{ position: relative; width: 200px; height: 170px; margin: 20px; }
div etiketinden önce ve sonra işlem yapabilmek için before, after tanımlayalım.
Pozisyonunu absolute yapalım. Diğer nesnelerden bağımsız olsun.
Yükseliği 160px, Genişliği 100px olan iki nesne oluşturalım.
Arkaplanını kırmızı yapalım.
.kalp{ position: relative; width: 200px; height: 170px; margin: 20px; } .kalp:after, .kalp:before{ content: ""; position: absolute; height: 160px; width: 100px; background-color: red; }
İki şekil arka arkaya olduğu için birmiş gibi görünüyor.
Birinci şekli sola yaslayalım. Diğer şekli soldan 100px genişlik kadar boşluk bırakalım.
.kalp{ position: relative; width: 200px; height: 170px; margin: 20px; } .kalp:after, .kalp:before{ content: ""; position: absolute; height: 160px; width: 100px; background-color: red; } .kalp:before{ left: 100px; } .kalp:after{ left: 0px; }
Birinci şekli döndürmek için başlangıç noktasını alt, sağ noktayı referans olarak alalım ve sağa 45 derece açıyla döndürelim. İkinci şekli döndürmek için ise alt sol noktayı referans alalım ve sola doğru 45 derece açıyla döndürelim. Net görebilmek için border verelim.
.kalp{ position: relative; width: 200px; height: 170px; margin: 20px; } .kalp:after, .kalp:before{ content: ""; position: absolute; height: 160px; width: 100px; background-color: red; border: 1px solid #000; } /* birinci şekil */ .kalp:after{ -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; left: 0px; } /* ikinci şekil */ .kalp:before{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; left: 100px; }
Üst köşe kenarlarını yuvarlak yapalım ve kenarlığı kaldıralım.
.kalp{ position: relative; width: 200px; height: 170px; margin: 20px; } .kalp:after, .kalp:before{ content: ""; position: absolute; height: 160px; width: 100px; background-color: red; border-radius: 50px 50px 0 0; } /* birinci şekil */ .kalp:after{ -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; left: 0px; } /* ikinci şekil */ .kalp:before{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; left: 100px; }
Sağlıcakla kalın, Hayırlı günler…