Saf CSS ile Temel ve Gelişmiş Şekiller Nasıl Yapılır?

Her öğenin CSS ile tamamlandığı saf bir CSS web sitesi gördünüz mü? CSS, yalnızca stil öğelerinden daha fazlasını yapar. CSS şekilleri, web tasarımcılarının üçgen, daireler, çokgenler ve daha fazlası gibi özel yollar oluşturmasına olanak tanır. Bu şekilde, şeffaf bir arka plana sahip kayan bir görüntü eklemek zorunda kalmazsınız, yalnızca etrafındaki dikdörtgen bir kutu tarafından hayal kırıklığına uğrarsınız.

Bu makalede, farklı şekilleri kodlamak için CSS şekillerini ve birkaç işlevsel değeri kullanacağız.

Temel CSS Şekilleri Çizimi

Kare, dikdörtgen, üçgen, daire ve elips gibi temel şekillerle başlayalım.

Kare ve Dikdörtgen

Kare ve dikdörtgen, CSS'de yapılması en kolay şekillerdir. Tek yapmanız gereken bir ve ona bir ver boy uzunluğu ve bir Genişlik.

HTML

CSS

.rec-sq {
ekran: esnek;
boşluk: 2em;
kenar boşluğu: 2em;
}
.Meydan {
genişlik: 15rem;
yükseklik: 15rem;
arka plan: rgb (255, 123, 0);
}
.dikdörtgen {
genişlik: 24rem;
yükseklik: 14rem;
arka plan: rgb (0, 119, 128);
}

Çıktı:

Daire ve Elips

atamanız yeterli sınır yarıçapı %50'yi bir kareye bölerseniz bir daire elde edersiniz. Bir elips elde etmek için dikdörtgen için de aynısını yapın.

HTML

CSS

.Daire {
genişlik: 15rem;
yükseklik: 15rem;
arka plan: rgb (255, 123, 0);
sınır yarıçapı: %50;
}
.elips {
genişlik: 24rem;
yükseklik: 14rem;
arka plan: rgb (0, 119, 128);
sınır yarıçapı: %50;
}

Çıktı:

üçgenler

Üçgenler oluşturmak için kenarlıkları kullanacağız. Nasıl çalıştığını merak ediyor musunuz? Tek yapmanız gereken, Genişlik ve boy uzunluğu üçgenin sıfıra. Bunun anlamı, ilerlemek, gerçek genişlik elemanın olacak sınırın genişliği. Ayrıca, kenarlık kenarlarının birbirine 45 derece diyagonal olduğunu zaten biliyor olabilirsiniz. Her kenarlığa farklı renkler verin ve üçünü şeffaf olarak ayarlayın. Sonunda, üçgeninize sahip olacaksınız.

HTML

CSS

// herkes için ortak
vücut {
ekran: esnek;
boşluk: 5em;
kenar boşluğu: 15em;
}.örneklem {
yükseklik: 8.5em;
genişlik: 8.5em;
üst kenarlık: 1em düz #9ee780;
sağ kenarlık: 1em katı rgb (240, 241, 141);
kenarlık-alt: 1em katı rgb (145, 236, 252);
sol kenarlık: 1em katı rgb (248, 115, 106);
}.üçgen {
yükseklik: 0;
genişlik: 0;
üst kenarlık: 5em düz #9ee780;
sağ kenarlık: 5em katı rgb (240, 241, 141);
kenarlık-alt: 5em katı rgb (145, 236, 252);
sol kenarlık: 5em katı rgb (248, 115, 106);
}

Çıktı:

ile oynayabilirsin boy uzunluğu ve sınır rengi farklı türde üçgenler elde etmek için. Örneğin, yukarı yönü gösteren bir üçgen oluşturabilirsiniz. sınır-alt düz bir renk, diğer tüm kenarlıklar şeffaf olarak ayarlanmıştır. Ayrıca, ile oynayarak doğru yönü gösteren bir üçgen veya dik açılı bir üçgen oluşturabilirsiniz. sınır genişliği ve sınır rengi.

HTML

CSS

.üçgen yukarı {
yükseklik: 0;
genişlik: 0;
kenarlık üstü: 5em katı şeffaf;
sağ kenarlık: 5em katı şeffaf;
kenarlık-alt: 5em katı rgb (145, 236, 252);
sol kenarlık: 5em düz şeffaf;
}
.üçgen-sağ {
genişlik: 0;
yükseklik: 0;
kenarlık stili: katı;
sınır genişliği: 4em 0 4em 8em;
border-color: şeffaf şeffaf şeffaf rgb (245, 149, 221);
}
.triangle-alt-sağ {
genişlik: 0;
yükseklik: 0;
kenarlık stili: katı;
sınır genişliği: 8em 0 0 8em;
kenarlık rengi: şeffaf şeffaf şeffaf rgb (151, 235, 158);
}

Çıktı:

CSS Kullanarak Gelişmiş Şekiller Oluşturma

Kullanabilirsiniz ::önce ve ::sonrasındasözde elemanlar gelişmiş şekiller oluşturmak için. Konumlandırma ve dönüştürme özelliklerinin akıllı kullanımıyla, saf CSS kullanarak kolayca karmaşık şekiller oluşturabilirsiniz.

Yıldız Şekli (5-Puan)

Dönüşümün döndürme değerini kullanarak kenarlıkları değiştirmeniz gerekecektir. Fikir, bir kullanarak iki taraf oluşturmaktır. sınıf=”yıldız”, diğer iki taraf ::sonrasında eleman ve son tarafı kullanarak ::önce öğe.

HTML

CSS

.yıldız-beş {
marj: 3.125em 0;
pozisyon: göreceli;
Ekran bloğu;
genişlik: 0em;
yükseklik: 0em;
kenar-sağ: 6.25em katı şeffaf;
kenarlık-alt: 4.3em katı rgb (255, 174, 81);
sol kenarlık: 6.25em düz şeffaf;
dönüştürmek: döndürmek (35 derece);
}
.yıldız-beş: önce {
kenarlık-alt: 5em katı rgb (255, 174, 81);
sol kenarlık: 2em düz şeffaf;
sağ kenarlık: 1.875em katı şeffaf;
konum: mutlak;
yükseklik: 0;
genişlik: 0;
üst: -45 piksel;
sol: -65 piksel;
Ekran bloğu;
içerik: '';
dönüştür: döndür (-35 derece);
}
.yıldız-beş: sonra {
konum: mutlak;
Ekran bloğu;
üst: 3 piksel;
sol: -105 piksel;
genişlik: 0;
yükseklik: 0;
kenar-sağ: 6.25em katı şeffaf;
kenarlık-alt: 4.3em katı rgb (255, 174, 81);
sol kenarlık: 5,95em düz şeffaf;
dönüştürmek: döndürmek (-70deg);
içerik: '';
}

Çıktı:

Pentagon

Bir yamuk ve bir üçgeni birleştirerek bir beşgen oluşturabilirsiniz. Kullanmak sınır ve konum özellikleri şekillendirin ve gruplandırın.

HTML

CSS

.pentagon {
pozisyon: göreceli;
genişlik: 10em;
kutu boyutlandırma: içerik kutusu;
sınır genişliği: 10em 5em 0;
kenarlık stili: katı;
kenarlık rengi: rgb (7, 185, 255) şeffaf;
kenar boşluğu: 20rem;
sol kenar boşluğu: 10rem;
}
.pentagon: önce {
içerik: "";
konum: mutlak;
yükseklik: 0;
genişlik: 0;
üst: -18em;
sol: -5em;
sınır genişliği: 0 10em 8em;
kenarlık stili: katı;
border-color: şeffaf şeffaf rgb (7, 185, 255);
}

Çıktı:

Elmas

Bir baklava şekli oluşturmak için konumu kullanarak yukarı ve aşağı bakan iki üçgeni gruplandırın. Evet, kullanacağız sınır Bu üçgenleri oluşturmak için özellikler.

HTML

CSS

.elmas {
genişlik: 0;
yükseklik: 0;
pozisyon: göreceli;
üst: -3em;
kenarlık: 3em katı şeffaf;
kenarlık-alt-renk: rgb (129, 230, 255);
}
.diamond: sonra {
içerik: '';
genişlik: 0;
yükseklik: 0;
konum: mutlak;
sol: -3em;
üst: 3em;
kenarlık: 3em katı şeffaf;
kenarlık rengi: rgb (129, 230, 255);
}

Çıktı:

Aşağıda gösterildiği gibi üst üçgenin yüksekliğini değiştirerek bir elmas kalkan şekli oluşturabilirsiniz:

HTML

CSS

.elmas-kalkan
{
genişlik: 0;
yükseklik: 0;
kenarlık: 3em katı şeffaf;
kenarlık-alt: 1.25em katı rgb (71, 194, 231);
pozisyon: göreceli;
üst: -3em;
}
.diamond-cut: sonra {
içerik: '';
konum: mutlak;
sol: -3em;
üst: 1.25em;
genişlik: 0;
yükseklik: 0;
kenarlık: 3em katı şeffaf;
üst kenarlık: 4.4em katı rgb (71, 194, 231);
}

Çıktı:

Kalp

Kalp şekli biraz zor ama kullanarak yapabilirsiniz. ::önce ve ::sonrasında sözde unsurlar. Farklı değerler kullanabilirsiniz dönüştürmek mükemmel bir kalp şekli oluşturana kadar onları farklı açılardan döndürmek için. Sonunda, ayarlayabilirsiniz transform-orijinal dönüşümün uygulandığı noktayı ayarlamak için.

HTML

CSS

.kalp {
genişlik: 6.25em;
yükseklik: 55em;
pozisyon: göreceli;
}
.kalp: önce,
.kalp: sonra {
içerik: "";
genişlik: 3em;
yükseklik: 5em;
konum: mutlak;
sol: 3em;
üst: 0;
arka plan: kırmızı;
sınır yarıçapı: 3em 3em 0 0;
dönüştür: döndür (-45 derece);
dönüşüm-kökeni: 0 %100;
}
.kalp: sonra {
sol: 0;
dönüştürmek: döndürmek (45 derece);
dönüşüm-kökeni: %100 %100;
}

Çıktı:

Saf CSS Şekilleriyle Deney Yapın

Artık birkaç satır kod yazarak oluşturulabilecek farklı saf CSS görüntülerine aşina olmalısınız. Kodlarla nasıl oynanacağını bildiğiniz için süper hızlı bir web sitesi oluşturmak artık yoğun bir iş değil. En iyi yanı, ihtiyacınıza göre farklı şekil ve renkleri manipüle ederek markanın sesiyle rezonansa girebilmenizdir. Bu nedenle, yalnızca CSS ile harika şekiller çizmenin yeni yollarını denemeye devam edin ve keşfedin.

HTML ve CSS Kullanarak Duyarlı Gezinme Çubuğu Nasıl Oluşturulur

Yeni başlayan tüm web geliştiricilerini çağırmak: Bu eğitim size, yalnızca HTML ve CSS kullanarak kendi duyarlı gezinme çubuklarınızı oluşturmak için ihtiyaç duyduğunuz becerileri verecektir!

Sonrakini Oku

Yazar hakkında