Paralelkenar css3. CSS Şekilleri: Bir Giriş Kursu

Herkese merhaba. Bugün oldukça sıra dışı bir konuya, yani web tasarımının geleceğine değineceğiz, bu CSS şekilleri.

Bildiğiniz gibi, şimdi çok moda, ancak esas olarak tasarımcıların ufkunu büyük ölçüde sınırlayan dikdörtgenlerden oluşuyor. Ve sonra uyarlanabilirlik var .. Yaratıcılık konusunda çok sınırlayıcı. Ancak çok büyük bir artı var - metni bir dikdörtgenin etrafına sarmak daha kolaydır, ancak metnin yuvarlak veya düzensiz şekiller etrafında akmasını sağlamak daha zordur. Çünkü resimler yuvarlak yapılamaz.

Tam da bu durumda, rakamlar yardımımıza koşuyor. Popüler W3C CSS sitesi ilk şekil belgelerini yayınladı. İşte İngilizce CSS Şekilleri Modülü Seviye 1'deki bu yazı. Bu modül yakın zamanda 20 Haziran'da piyasaya sürüldü. Şimdiye kadar bu, dikdörtgen, üçgen, elips, daire ve çokgen gibi şekilleri içeren bir beta sürümüdür.

Şimdi örnek olarak CSS şekillerinin avantajının ne olduğuna daha yakından bakalım.

İlk olarak, http://www.webdesignerdepot.com sayesinde bunun için basit bir HTML işaretlemesi yapalım:

Bu bir örnek metindir

Kesinlikle konumlandırılmış elemanlar için sıfır genişlik ve yükseklik belirtmeniz gerekmez.

Kenarlıkları birleştirerek, daha önce bahsedilenlerle birlikte bize sekiz seçenek sunan dört tür üçgen daha elde edebilirsiniz. Tipleri ve gerekli kodlar tabloda verilmiştir. 1.

Tablodan, görünmez sınırların yer kapladığını görebilirsiniz, öğeleri konumlandırırken bunu dikkate alın. Stilin ayrıca sıfır genişlik ve yükseklikle doldurulması veya örnek 1'deki gibi position özelliğini kullanması gerekir.

Kenarların kalınlığını farklı ayarlarsanız, farklı bir şekle sahip bir üçgen yapabilirsiniz. Bu nedenle, Şekil 2'de gösterilen bloğu oluşturma kodu. 4, örnek 2'de gösterilmiştir.

Pirinç. 4. Akut üçgen

Örnek 2. Akut üçgen

Kenarlık yardımıyla, Şekil l'de gösterilen kenarlığı oluşturmak için düz renkli üçgenler elde ederiz. Şekil 5'te hileye gitmeniz ve bir öğeyi diğerinin üzerine hafif bir kayma ile yerleştirmeniz gerekir. Yine: Before ve: after sözde öğeleri burada bize yardımcı olacaktır (örnek 3).

Pirinç. 5. Köşeli çerçeve

Örnek 3. Üçgenleri bindirme

Bir düz renk öğesini diğerinin üzerine bindirdiğimiz için, bu yöntem yalnızca düz renk dolguları için uygundur ve degradeler veya arka plan görüntüleri için uygun değildir.

Dönüşümü kullanma

Dönüşüm yardımıyla kare elemanı 45º döndürebilir ve ondan bir eşkenar dörtgen alabiliriz. Bu bir üçgen değil, bu yüzden ihtiyacımız olan çıkıntılı kısmı açıkta bırakıyoruz ve gerisini başka bir elemanın arkasına saklıyoruz (örnek 4).

Örnek 3. Dönüşüm

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 6.

Pirinç. 6. Gölgeli üçgen