Bu yazıda basitçe css3 kodlarıyla nasıl kalp imajı oluşturcağımızdan sözediyorum. Kullancağımız css 3 özellikleri border-radius

 

box-shadow ve gradiet olacak bunların dışındaki özellikler standart css diyebiliriz… Başlıyalım!

 

kalp şeklimiz için 1 div içinde 2 span kullanacağız… en dıştaki divimizi sadece çerçeve amaçlı arkaplan amaçlı kullanacağız. html olarak aşağıdaki gibi bir temelimiz var:

 

 

<div>x

<span>

x

</span>

<span>

x

</span>

</div>

Daha sonra bu kodları aşağıdaki gibi css li hale getirceğiz

<div style="position: relative; float: left; left: 50px; top: 50px; width: 380px; height: 320px;

background: #000;">x
<span style="

position: absolute; left: 77px; top: 50px; width: 150px; height: 200px; //1. spanin Konum ve boyutları

background: #c00; //1. spanımızın arkaplan rengi kırmızı ancak tam kırmızı değil

border-radius: 100px 100px 0 0; //1. spanımızın üstteki iki köşesini oval hale getirdik

-webkit-transform: rotate(-55deg); // 1. spanımızın sağ alt köşesinin kalbin ucu olması için 55 derece sola döndürüyoruz

-moz-transform: rotate(-55deg); //mozilla firefox için döndürüyoruz

-o-transform: rotate(-50deg); // ve opera için döndürüyoruz

box-shadow: -5px -20px 40px #f00; //kalbin sol parçasındaki kırmızı parlaklık için gölge kullanıyoruz.

border-top: 6px #f99 solid; // sol üstteki beyaz ışıldama için üst çerçeveyi beyaza yakın bi kırmızı yaptık.

">x
</span>
<span style="position: absolute;

left: 150px; top: 50px; width: 150px; height: 200px; // 2. spanımızın konum ve boyutları

background: #d00; //sol parçaya göre daha açık bir arkaplan

border-radius: 100px 100px 0 100px; // üst köşeleri ovalleştirdik

-webkit-transform: rotate(55deg); // 55 derece sağa çeviriyoruz.

-moz-transform: rotate(55deg); //mozilla için çeviriyoruz

-o-transform: rotate(50deg); // ve opera tarayıcısı için çevirdik

box-shadow: 5px -20px 40px #f00; // sağ parçanın etrafındaki flu kırmızı için gölge kullanıyoruz.

border-right: 6px #a00 solid; // sağ alttaki siyah kabarma efekti için koyu bir kırmızı kullanıyoruz.

border-left: 3px #e66 solid; //kalbin ortasına denk gelen hafif bir çizik için orta dereceden bir kırmızı kullandık.

">x
</span>

</div>

Bu kodları bir html sayfasına yapıştırdığınızda css3 ü destekleyen her tarayıcıda

aşağıdaki gibi bir görünüm oluşacaktır. Bu görünümde hiç bir resim dosyası kullanılmamışdır.