Aşkınızı CSS ile Dile Getirin

[L34DRi]

Merhabalar,
Bazı arkadaşlar üşenmemiş CSS ile kalp çizmişler. Kendilerini tebrik ediyorum ve kodlarını sizlerle paylaşıyorum :)

PHP Kod: Tümünü Seç Tümünü Kopyala

#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
} 


HTML kodu:

Kod: Tümünü Seç Tümünü Kopyala

<div id="heart"></div>

Ekran Görüntüsü :



Kodlar Alıntıdır...

Bir sonraki konuda nasıl kolay tasarımlar yapabiliriz anlatacağım. Takipte kalın :)

İyi Forumlar

[Ripbyrustavi]

position fixed yaptım artık takip ediyor

[L34DRi]

position fixed yaptım artık takip ediyor

Güzel bi fikir :)

[yusufkoc]

Animasyon kullanarak kalbin hareketli olmasını sağlayabilirsiniz.
Örnek: http://teknology.10tl.net footer kısmında bulunuyor.