CSS ile Kalp Şekli Nasıl Oluşturulur
CSS3, yalnızca HTML ve CSS kullanarak web sitelerinde yapabileceklerimizin uygulanabilirliğini arttırır. Daha önce belirttiğimiz şaşırtıcı örnekleri bulabilirsiniz. Fakat kendimizden fazla ileri gitmeyelim, karmaşık bir tasarım başınızı ağrıtacak kodlara ihtiyaç duyacak.
Bunun yerine, size yardımcı olacak basit bir şey yaratacağız. önce CSS ile şekilleri ve konumlandırmayı anlayın, daha gelişmiş tasarımlara girişmeden önce. Sevgililer Günü köşeyi döndüğü için, HTML ve CSS kullanarak bir kalp şekli oluşturalım..
Temeller
Temel olarak, dikdörtgenler ve daireler gibi bir veya daha fazla temel şekle birleştirerek yeni bir şekil oluşturabiliriz. Eğer bir kalp şeklini incelersek, bunun oluştuğunu görebiliriz. iki daire ve bir dikdörtgen kombine. HTML elemanları aslında bir kare veya dikdörtgendir. CSS3 sınır yarıçapı sayesinde bir dikdörtgeni kolayca daireye dönüştürebiliriz.
Ekleyerek başlayın Ardından genişliği ve yüksekliği eşit olarak belirleyerek kare yaparız. Beğendiğiniz bir arka plan rengi seçin. Sonra, çevreleri yapacağız. Yeni öğeler eklemek yerine, sözde öğeleri kullanacağız., Kare ile birlikte şöyle bir sonuç elde edeceğiz: Ondan sonra, sözde elemanla ikinci çemberi yaratırız. Sonuçlar aşağıdaki gibidir: Sözde eleman seçicilerini aşağıdaki gibi gruplayarak bu iki aynı stili birleştirebiliriz: Sürpriz! Henüz doğru yönde olmasa da kalp şeklimiz var. Düzeltmek için CSS3 Transformation kullanacağız. Dönüşüm, şeklin ana unsurlarına verilebilir; Burada, kare anlamına gelir. Dönüştürüldüğünde, sözde öğe ana öğenin ardından konumunu otomatik olarak değiştirir. Burada kalbi döndüreceğiz böylece görülecektir “ayakta”. Ve işte şimdi kalbimiz neye benziyor?. Yukarıdaki kalp şeklinin tam kodu, HTML'de şöyledir: Ve bizim CSS'mizde şöyle olacak: Şimdi alfa kanalını ayarladığımıza dikkat edin. Şimdi mükemmel bir kalp şeklimiz olduğuna göre arka planı başka bir renge değiştir (örneğin, pembe veya kırmızı) kolaylıkla. Burada tek dezavantajı biz olmasıdır kenarlık eklenemedi yığılmış elemanlar nedeniyle şekle gelir. Kenarlık çizgisi eklemek kalbin garip görünmesini sağlar. CSS3 ile Kalp şekli gibi bir şekil oluşturmak artık kolayca yapılabilir. Sınır yarıçapı özelliği bize sağlar elementler ve hatta sahte bir elementi bir daireye dönüştürün. CSS3 dönüşümü ile yapabiliriz. nesnenin koordinatlarını döndürme veya taşıma kolaylıkla. Sadece yaratıcılığın ve hayal gücünle sınırlısın!
.kalp şekli pozisyon: bağıl; genişlik: 200px; yükseklik: 200px; arkaplan rengi: rgba (250,184,66, 0,8);
:önce ve :sonra. İlk önce biz :önce ilk çemberimiz olarak sözde elemanlar. Aynen div ile yaptığımız gibi genişlik ve yükseklikte eşit büyüklükte bir kare yaparız. Daha sonra,% 50 sınır yarıçapı vererek bir daireye dönüştürüyoruz ve karenin sol tarafına koyuyoruz.. .kalp şekli: önce pozisyon: mutlak; alt: 0 piksel; solda: -100px; genişlik: 200px; yükseklik: 200px; içerik: "; -webkit-sınır yarıçapı:% 50; -moz-sınır yarıçapı:% 50; -o-sınır yarıçapı:% 50; sınır yarıçapı:% 50; arka plan rengi: rgba (250,184,66 , 0.8);
:sonra yarattığımız ilk daire ile aynı stilleri. Sonra da karenin tepesine yerleştiririz.. .kalp şekli: sonra pozisyon: mutlak; üst: -100px; sağ: 0 piksel; genişlik: 200px; yükseklik: 200px; içerik: "; -webkit-sınır yarıçapı:% 50; -moz-sınır yarıçapı:% 50; -o-sınır yarıçapı:% 50; sınır yarıçapı:% 50; arka plan rengi: rgba (250,184,66 , 0.8);
.kalp şekli: önce, kalp şekli: sonra pozisyon: mutlak; genişlik: 200px; yükseklik: 200px; içerik: "; -webkit-sınır yarıçapı:% 50; -moz-sınır yarıçapı:% 50; -o-sınır yarıçapı:% 50; sınır yarıçapı:% 50; arka plan rengi: rgba (250,184,66 , 0.8); .heart-şekli: önce alt: 0px; sol: -100px; .heart-şekli: sonra üst: -100px; sağ: 0px;
.kalp şekli -webkit-dönüşümü: döndürme (45deg); -moz-dönüşümü: döndürme (45deg); -ms-dönüşümü: döndürme (45deg); -o-dönüşümü: döndürme (45deg); dönüşümü: döndürme (45deg);
Sonuç:
.kalp şekli pozisyon: bağıl; genişlik: 200px; yükseklik: 200px; -webkit-dönüşümü: döndürme (45deg); -moz-dönüşümü: döndürme (45deg); -ms-dönüşümü: döndürme (45deg); -o-dönüşümü: döndürme (45deg); dönüşümü: döndürme (45deg); arkaplan rengi: rgba (250,184,66, 1); .heart-shape: önce, .heart-shape: sonra position: absolute; genişlik: 200px; yükseklik: 200px; içerik: "; -webkit-sınır yarıçapı:% 50; -moz-sınır yarıçapı:% 50; -o-sınır yarıçapı:% 50; sınır yarıçapı:% 50; arka plan rengi: rgba (250,184,66 , 1); .heart-şekli: önce alt: 0px; sol: -100px; .heart-şekli: sonra üst: -100px; sağ: 0px;
rgba (250,184,66, 1) arka planda 1 şeffaflığı kaldırmak için İşte yüreğimizin görünüşü bu.
Sonuç
