Css köşeli yorum çerçevesi. Kıvrılmış köşeler, yalnızca CSS kullanılarak etki eder. Kodun son görünümü

Vlad Merjeviç

Web sitelerinde üçgenler, öğelerin tasarımının bir parçası olarak her zaman kullanılır, örneğin, okuyucunun dikkatini doğru yere yönlendiren bir nesneye işaretçi olarak hizmet ederler. Ayrıca üçgenler dekoratif işlevler üstlenerek uygulandıkları blokları daha zarif ve modern hale getirir. İncirde. Şekil 1, tasarımda üçgen kullanımına bir örnek göstermektedir.

Pirinç. 1. Web tasarımında üçgenler

Doğrudan CSS kullanarak bir üçgen oluşturamazsınız, bu nedenle onu eklemek için iki yöntem vardır - kenarlık yoluyla ve dönüştürme.

kenarlık kullanma

Border özelliği ile oluşturulan bordürler üçgenlerle doğrudan ilişkili olmasa da bunun için en sık kullanılan bordürdür. Eleman genişliğini ve yüksekliğini sıfıra ayarlarsak ve ayrıca yeterince kalın bir kenarlık ayarlarsak, dört üçgenden oluşan bir set göreceğiz (Şekil 2). Anlaşılır olması için her taraftaki kenarlıklar farklı renklerde ayarlanmıştır.

Pirinç. 2. Bir öğeye kenarlık ekleme

Sadece istenen kenarlığı bırakıp gerisini şeffaf hale getirerek istenen renkte bir üçgen elde ederiz (Şekil 3).

Pirinç. 3. Saydam kenarlıklı öğe

Örnek 1, sözde elemandan sonra :: aracılığıyla bir bloğa bir üçgen eklemeyi gösterir.

Örnek 1. Üçgenli blok

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.

Sekme. 1. Olası üçgen türleri

görüş	stil
	kenarlık: 20 piksel katı şeffaf; üst kenarlık: 20 piksel sabit yeşil;
	kenarlık: 20 piksel katı şeffaf; sağ kenarlık: 20 piksel sabit yeşil;
	kenarlık: 20 piksel katı şeffaf; kenarlık-alt: 20 piksel sabit yeşil;
	kenarlık: 20 piksel katı şeffaf; sol kenarlık: 20 piksel sabit yeşil;
	kenarlık: 20 piksel katı şeffaf; üst kenarlık: 20 piksel sabit yeşil; sağ kenarlık: 20 piksel sabit yeşil;
	kenarlık: 20 piksel katı şeffaf; sağ kenarlık: 20 piksel sabit yeşil; kenarlık-alt: 20 piksel sabit yeşil;
	kenarlık: 20 piksel katı şeffaf; kenarlık-alt: 20 piksel sabit yeşil; sol kenarlık: 20 piksel sabit yeşil;
	kenarlık: 20 piksel katı şeffaf; sol kenarlık: 20 piksel sabit yeşil; üst kenarlık: 20 piksel sabit yeşil;

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

CSS3 çerçevesi izin veren özelliklerle eleman sınırlarının biçimlendirme yeteneklerini artırır. yuvarlak köşeler eleman ve ayrıca kullanım Görüntüler bir elemanın sınırlarını süslemek için.

Yuvarlatılmış köşeler ve resim çerçeveleri

1. Kenarlık yarıçaplı köşeleri yuvarlama

tarayıcı desteği

IE: 9.0
Firefox: 4.0
Krom: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Tarayıcı: 4.1
Android için Chrome: 44

Özellik, satır içi ve blok öğelerinin köşelerini yuvarlamanıza olanak tanır. Her köşe için eğri, şeklini tanımlayan bir veya iki yarıçap ile tanımlanır - Daire veya elips... Yarıçap tüm arka plana uzanır, elemanın sınırları olmasa bile, kesenin tam konumu background-clip özelliği kullanılarak belirlenir.

border-radius özelliği, border-top-sol-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-sol-radius kullanarak tüm köşeleri aynı anda yuvarlamanızı sağlar. her köşeyi ayrı ayrı yuvarlayabileceğiniz özellikler...

border-radius özelliği için iki değer ayarlarsanız, ilk değer yuvarlanır Sol üst ve sag alt köşe ve ikincisi sağ üst ve sol alt.

Verilen değerler/belirleyen yatay ve dikey yarıçap... Mülkiyet miras alınmaz.

Varyantlar

Div (genişlik: 100 piksel; yükseklik: 100 piksel; kenarlık: 5 piksel katı;) .r1 (sınır yarıçapı: 0 0 20 piksel 20 piksel;) .r2 (sınır yarıçapı: 0 10 piksel 20 piksel;) .r3 (sınır yarıçapı: 10 piksel 20 piksel ;) .r4 (sınır yarıçapı: 10px / 20px;) .r5 (sınır yarıçapı: 5px 10px 15px 30px / 30px 15px 10px 5px;) .r6 (sınır yarıçapı: 10px 20px 30px 40px / 30px;) .r7 ( sınır-yarıçap: %50;) .r8 (sınır-üst: yok; sınır-alt: yok; sınır-yarıçap: 30px / 90px;) .r9 (sınır-alt-sol-yarıçap: 100px;) .r10 (sınır -yarıçap: 0 %100;) .r11 (sınır-yarıçap: 0 %50 %50 %50;) .r12 (sınır-üst-sol-yarıçap: %100 20px; kenar-alt-sağ-yarıçap: %100 20px ;)
Pirinç. 1. Bloğun köşelerini yuvarlamak için farklı seçeneklere örnekler

2. Sınır görüntüsü

tarayıcı desteği

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Krom: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Tarayıcı: 4.4, 4.1 -webkit-
Android için Chrome: 42

Özellik, görüntüyü öğenin sınırı olarak ayarlamanıza olanak tanır. Görüntü için temel gereksinim, simetrik olması gerektiğidir. Özellik aşağıdaki değerleri içerir: (border-image: genişlik kaynak dilim tekrar başlangıcı;).

Böyle basit bir görüntü kullanarak, bir öğe için böyle bir çerçeve elde edebilirsiniz.

/ * Örnek 1 * / div (genişlik: 260 piksel; yükseklik: 100 piksel; kenarlık stili: katı; kenarlık-görüntü-genişlik: 15 piksel; kenarlık-görüntü-kaynak: url (border_round.png); kenarlık-görüntü-dili: 30 ; border-image-repeat: streç;) / * Örnek 2 * / div (width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url (border_round. png); border-image-dili: 30; border-image-repeat: round;)
Pirinç. 2. Bir resim kullanarak bir blok kenarlık dekorasyonu örneği

A - B - C - D dilimleri bordürün köşelerini oluşturur ve resmin aralarında kalan kısmı border-image-repeat özelliğinin belirtilen değerine göre bordürün kalan alanını doldurur. Köşe parçasının boyutu (bu örnekte 30 sayısı), border-image-slice özelliğinin değeri kullanılarak ayarlanır.

2.1. Kenarlık-görüntü genişliği

Özellik, öğenin kenarlığı için görüntünün genişliğini ayarlar. Genişlik belirtilmemişse, varsayılan olarak 1'dir.

kenarlık-görüntü genişliği
Değerler:
uzunluk	Kenarlığın genişliğini uzunluk birimlerinde ayarlar - px / em. Aynı anda birden dört değere kadar ayarlayabilirsiniz. Bir değer verilirse, çerçevenin tüm kenarlarının genişliği aynıdır, iki değer üst-alt ve sağ-sol genişliğini vb.
sayı	Sınır genişliği değerinin çarpıldığı sayısal değer.
%	Öğenin kenarlığının genişliği, görüntünün boyutuna göre hesaplanır. Genişliğe göre yatay, dikey - yüksekliğe göre.
Oto	border-image-slice değerine karşılık gelir.
ilk
miras

Sözdizimi

Div (kenarlık-görüntü genişliği: 30 piksel;) Şek. 3. Farklı değer türlerini kullanarak görüntü çerçevesinin genişliğini ayarlama örneği

2.2. Sınır-görüntü-kaynak kaynağı

Özellik, bloğun sınırlarını süslemek için kullanılacak görüntünün yolunu belirler.

Sözdizimi

Div (border-image-source: url (border.png);)

2.3. Kenarlık-görüntü-dilim öğeleri

Özellik, öğenin sınırlarını süslemek için kullanılan görüntünün parçalarının boyutunu belirler ve görüntüyü dokuz parçaya böler: dört köşe, köşeler arasında dört kenar ve bir orta parça.

Değerler:
sayı	Çerçeve parçalarının boyutu bir, iki, üç veya dört değer kullanılarak ayarlanabilir. Bir değer, öğenin her bir tarafı için sınırları aynı boyuta ayarlar. İki değer: ilki üst ve alt sınırların boyutunu, ikincisi - sağ ve sol belirler. Üç değer: birincisi üst sınırın boyutunu, ikincisi - sağ ve sol ve üçüncüsü - alt sınırı belirler. Dört değer: Üst, sağ, alt ve sol kenarlığın boyutunu belirler. Sayısal değer, px sayısını temsil eder.
%	Kenarlık boyutları, görüntünün boyutuna göre hesaplanır. Genişliğe göre yatay, dikey - yüksekliğe göre.
doldurmak	Değer, bir sayı veya yüzde ile birlikte belirtilir. Belirtilirse, görüntü çerçevenin iç kenarıyla kırpılmaz, aynı zamanda çerçevenin içindeki alanı da doldurur.
ilk	Bu özelliği varsayılan değerine ayarlar.
miras	Bu özelliğin değerini üst öğeden devralır.

Sözdizimi

Div (kenarlık-görüntü-dilim: 50 20;)
Pirinç. 4. Bir görüntü çerçevesinin dilimlerini ayarlama örneği

2.4. Kenarlık-görüntü-tekrar

Özellik, çerçevenin köşeleri arasındaki boşluğun arka plan görüntüsü tarafından doldurulmasını kontrol eder. Tek bir değer kullanılarak veya bir çift değer kullanılarak ayarlanabilir.

Sözdizimi

Div (kenarlık-görüntü-tekrar: tekrar;) Şek. 5. Farklı değer türleri kullanılarak görüntü çerçevesinin orta kısmının tekrarlanmasına bir örnek

2.5. Ofset sınır-görüntü-başlangıç

Özellik, çerçeve görüntüsünü belirtilen uzunlukta öğenin sınırlarının dışına taşımanıza olanak tanır. Bir veya dört değer kullanılarak ayarlanabilir.

Sözdizimi

Div (kenarlık-görüntü-başlangıç: 10px;)
Pirinç. 6. Farklı değer türleri kullanılarak görüntü çerçevesinin yer değiştirmesine bir örnek

3. Gradyan çerçevesi

Kenarlık-görüntü değeri yalnızca bir görüntü değil, aynı zamanda bir degrade dolgusu da olabilir.

yarı saydam çerçeve

Şeffaf renklerden biridir. Bu şekilde, bir elemanın tüm kenarları için bir kerede veya her bir kenar için ayrı ayrı kenarlıklar ayarlayabilirsiniz. Kenarlığın genişliği border-width özelliği tarafından kontrol edilir.

* (kutu boyutu: border-box;) .wrap (yükseklik: 200 piksel; dolgu: 25 piksel; arka plan: # 00E4F6;) .gradient (yükseklik: 150 piksel; genişlik: %50; kenar boşluğu: 0 otomatik; kenarlık: 10 piksel katı şeffaf ; border-image: lineer-gradyan (sağa doğru, şeffaf %0, # ADF2F7 %100); border-image-dilimi: 1;)

Posta zarfı

* (kutu boyutu: border-box;) .wrap (yükseklik: 200 piksel; dolgu: 25 piksel;) .gradient (yükseklik: 150 piksel; genişlik: %50; kenar boşluğu: 0 otomatik; kenarlık: 10 piksel katı saydam; kenarlık resmi: 10 yinelenen doğrusal gradyan (45deg, # A7CECC, # A7CECC 10px, şeffaf 10px, şeffaf 20px, # F8463F 20px, # F8463F 30px, şeffaf 30px, şeffaf 40px);)

İşte HTML ve CSS ile kullanılan bilgi blokları için tasarlanmış güzel bir köşe ve çerçeve seçimi. Ayrıca bu notta, fareyle üzerine gelme efekti ve herhangi bir efekt olmadan varsayılan bir ayar ile gelen, sadece şık bir tasarım olan köşelerde yapılan tasarım stilini alabilirsiniz.

Örnek olarak, blokta kavisli köşelerin olduğu ve standart olandan tamamen farklı göründüğü bir varyasyon alabilirsiniz. Bazılarında, çeşitli şeritler yerleştirme veya içindeki bloğa yerleştirilmiş bir görüntü yükleme seçeneği vardır.

Tüm materyaller, büyük bir monitör veya en küçük ekran için farklı çözünürlükler için uyarlanabilir bir biçimde sunulur. Kurulumdan sonra, esas olarak dikkat çekmek için koydukları sitede bir değişiklik meydana gelecektir, çünkü başlangıçta yalnızca ana stili tamamlayabilen yapı gider.

İlk seçenek:

CSS

Ugoinsa_utomatio_npones (
ekran: satır içi blok;
genişlik: 295 piksel;
pozisyon: göreceli;
kenarlık: 1.5 piksel katı # 1b629e;
geçiş: tüm .3'ler kolaylığı;
kenar boşluğu: 5 piksel;
imleç: işaretçi;
}
.ugoinsa_utomatio_npones: önce, .ugoinsa_utomatio_npones: sonra (
içerik: "";
z-endeksi: -1;
Ekran bloğu;
pozisyon: mutlak;
arka plan: #FFF;
üst: %50;
sol: %50;
dönüştürmek: çevir (-50%, -50%);
animasyon-yineleme-sayısı: 1;
dönüşüm-kökeni: %50 %50;
}
.ugoinsa_utomatio_npones: önce (
genişlik: hesap (%100 + 4 piksel);
yükseklik: %75;
z-endeksi: 1;
geçiş: yükseklik 0.6s;
}
.ugoinsa_utomatio_npones: sonra (
yükseklik: hesap (%100 + 4 piksel);
genişlik: %85;
z-endeksi: 1;
geçiş: genişlik 0.7s;
}
.ugoinsa_utomatio_npones: üzerine gelin: önce, .ugoinsa_utomatio_npones: odak: önce (
yükseklik: %50;
}
.ugoinsa_utomatio_npones: vurgulu: sonra, .ugoinsa_utomatio_npones: odak: sonra (
genişlik: %74;
}
.sequpok_egulaned_demob (
dolgu: 29 piksel;
z-endeksi: 2;
pozisyon: göreceli;
metin hizalama: merkez;
}

Burada kendi başımıza kaynağımız için bir kurulum oluşturuyoruz ve hangi eyleme bağlı olarak onu daha belirgin hale getiriyoruz.

İkinci seçenek:

CSS

Pvobamoco-mpagensive (
pozisyon: göreceli;
ekran: satır içi blok;
genişlik: 283 piksel;
kenar boşluğu: 7px 0 37px 0;
dolgu: 28 piksel;
renk: # f3eaea;
metin hizalama: merkez;
arka plan: # 2b22a0;
arka plan: lineer gradyan (sol alta, şeffaf %50, rgba (16, 16, 16, 0.4) 0) tekrarsız %100 0 / 30px 30px, lineer gradyan (-135deg, rgba (0, 0, 0) , 0) 20 piksel, # 334ab9 0);
filtre: gölge (18px 28px rgba (14, 14, 14, 0.1));
}
.pvobamoco-mpagensive :: önce (
içerik: "";
pozisyon: mutlak;
üst: 30 piksel;
sağ: 0;
arka plan: doğrusal gradyan (sol alta, rgba (0, 0, 0, 0) %50, rgba (14, 14, 14, 0.1) 0) %100 0 tekrarsız;
genişlik: 28 piksel;
yükseklik: 28 piksel;
dönüştürmek: döndürmek (180 derece);
}

Başlangıçta, efekt burada kaydedilmedi, ancak renk gamını bağımsız olarak artırabileceğiniz ve değiştirebileceğiniz güzel bir gölge yapıldı.

Üçüncü seçenek:

CSS

Keculosubes_aspectsiveb (
pozisyon: göreceli;
ekran: satır içi blok;
genişlik: 295 piksel;
dolgu: 30 piksel;
kenar boşluğu: 9 piksel;
minimum yükseklik: 91 piksel;
kenarlık: 2 piksel katı # BFE2FF;
metin hizalama: merkez;
}
.malugeke_deculos (
genişlik: 148 piksel;
yükseklik: 148 piksel;
taşma: gizli;
pozisyon: mutlak;
}
.malugeke_deculos :: önce, .malugeke_deculos :: sonra (
pozisyon: mutlak;
z-endeksi: -1;
içerik: "";
Ekran bloğu;
kenarlık: 5 piksel katı # 2980b9;
}
.malugeke_deculos yayılma alanı (
pozisyon: mutlak;
Ekran bloğu;
genişlik: 223 piksel;
dolgu: 15 piksel 0;
arka plan rengi: # 337AB7;
kutu gölgesi: 0 5px 10px rgba (12, 12, 12, 0.1);
renk: # f3f0f0;
yazı tipi: 700 18 piksel / 1 "Lato", sans-serif;
metin gölgesi: 0 1px 1px rgba (8, 8, 8, 0.1);
metin dönüştürme: büyük harf;
metin hizalama: merkez;
}
.malugeke_deculos-sol üst (
üst: -10 piksel;
sol: -10 piksel;
}
.malugeke_deculos-üst-sol :: önce, .malugeke_deculos-üst-sol :: sonra (
border-sol-color: şeffaf;
}
.malugeke_deculos-sol üst :: önce (
üst: 0;
sağ: 0;
}
.malugeke_deculos-sol üst :: sonra (
sol: 0;
alt: 0;
}
.malugeke_deculos-sol üst yayılma alanı (
sağ: -25 piksel;
üst: 30 piksel;
dönüştürmek: döndürmek (-45deg);
}
.malugeke_deculos-sağ üst (
üst: -10 piksel;
sağ: -10 piksel;
}
.malugeke_deculos-üst-sağ :: önce, .malugeke_deculos-sağ üst :: sonra (
border-top-color: şeffaf;
kenarlık-sağ-renk: şeffaf;
}
.malugeke_deculos-sağ üst :: önce (
üst: 0;
sol: 0;
}
.malugeke_deculos-sağ üst :: sonra (
sağ: 0;
alt: 0;
}
.malugeke_deculos-sağ üst yayılma alanı (
sol: -25 piksel;
üst: 30 piksel;
dönüştürmek: döndürmek (45 derece);
}

Bantın üzerine bir başlık yazmak için hizmet edeceği bloğa takmak için sağ veya sol bandı seçmeye devam ediyor. Ayrıca rengi değiştirin veya başlangıçta şeritlerin altında ayarlanan varsayılan bloğu ayarlayın.

Burada, bir web geliştiricisi güzel bir şekilde tasarlayabilir, çünkü bunun için çerçeve zaten tamamen yerindedir, bazıları gölgeler koyar, hepsi İnternet kaynağının renk paletine ve genel olarak nerede olacağınıza ve hangi amaçla yerleştireceğinize bağlıdır. ne kadar orijinal bir kare.

Bu eğitimde, resim veya ek işaretleme kullanmadan kavisli köşeler efekti oluşturacağız. Tüm modern tarayıcılarda harika çalışır ve basit renk şemalarına sahip web sitesi tasarımları için iyi çalışır.

Bu etki ders için gösteride kullanıldı " CSS2 kullanarak çoklu arka planlar ve vuruşlar"Ayrıca, gerçek bir site tasarımında kıvrılmış köşelerin kullanımı Yiibu örneğinde görülebilir. Ama Yiibu görüntüleri kullanıyor ve biz sözde öğeler ve CSS kullanıyoruz.

Başlangıç

Karmaşık bir şey yok. Herhangi bir öğe yapacaktır ve ek işaretleme gerekmez. Her şey basit renkli bir dikdörtgenle başlar. Sözde öğeleri (IE6 ve IE7) desteklemeyen tarayıcılar da onu oluşturacaktır.

position:relative özelliğinin eklenmesi, sözde öğelerin mutlak konumlandırılmasını mümkün kılar.

Not (konum: göreli; genişlik: %30; dolgu: 1em 1,5em; kenar boşluğu: 2em otomatik; renk: #fff; arka plan: #97C02F;)

Katlanmış köşe, dikdörtgenin üst köşesine yerleştirilmiş bir sözde eleman kullanılarak oluşturulur. Sözde öğenin genişliği veya yüksekliği yoktur, ancak kalın bir konturu vardır. Konturun kalınlığını değiştirerek katlanmış köşenin boyutunu değiştireceğiz.

Bu örnekte, konturun üst ve sağ kısımları, ana dikdörtgenin arka plan rengiyle eşleşen renklere sahiptir. Konturun sol ve alt kısımları, dikdörtgenin arka plan renginden daha koyu veya daha açık.

Not: önce (içerik: ""; konum: mutlak; üst: 0; sağ: 0; kenarlık genişliği: 0 16 piksel 16 piksel 0; kenarlık stili: katı; kenarlık rengi: # 658E15 #fff;)

Yiibu web sitesinde kullanılana benzer basit bir kavisli köşe efekti oluşturmak için gereken tek şey bu.

Firefox 3.0, sözde öğelerin konumlandırılmasına izin vermez. Belirli bir tarayıcıda bazı şeyleri düzeltmek için birkaç özelliği kullanabilirsiniz.

Not: önce (... görüntü: blok; genişlik: 0;)

İnce bir gölge ekleyin

Köşenin görünümü, sözde öğeye bir kutu gölge özelliği (onu destekleyen tarayıcılar için) eklenerek biraz iyileştirilebilir. Bir öğe sınıfında overflow: hidden özelliğinin ayarlanması, gölgenin kıvrılmış köşe efektini kıran kısmını gizler.

Not: önce (... -webkit-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); kutu gölgesi: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1 piksel rgba (0,0,0,0.2);)

Yuvarlatılmış köşeler

Bu tekniği yuvarlatılmış köşelerle birlikte kullanmak da nispeten kolaydır. Ne yazık ki, her modern tarayıcının border-radius özelliğiyle ilgili bir tür hatası vardır (öneksiz özelliği kullananlar dahil). Bu durum ek çalışma ihtiyacı anlamına gelmektedir.

Yalnızca Webkit tarayıcıları, konturun yalnızca 2 parçası varsa, sözde öğeler için yuvarlatılmış köşeler yapabilir. Opera 11 ve Firefox 3.6, göz alıcı bir yığın oluşturur. Üstelik Opera 11 bu süreçte maksimum hataya sahip.

Dört tarafı da kullanmak Opera 11 ve Firefox 3.6'daki sorunları ortadan kaldırır. Ancak bu çözüm, Safari 5'te, dişlerle çapraz bir çizginin çıktısında ifade edilen bir hataya yol açar. Konturun en az bir bölümünün rengini saydam olarak ayarlayarak bu sorunu çözebilirsiniz.

Arka plan rengi şeffaf kontur aracılığıyla görünür olacaktır. İdeal olarak, bu yaklaşım bir etki yaratacak ve minimum kod içerecektir. Ancak Opera 11, border-radius özelliği ayarlanmışsa arka plan rengini yalnızca saydam bir vuruşla gösterir.

Not yuvarlatılmış: önce (içerik: ""; konum: mutlak; üst: 0; sağ: 0; kenarlık genişliği: 8 piksel; kenarlık rengi: #fff #fff şeffaf şeffaf; arka plan: # 658E15; -webkit-border- alt-sol yarıçap: 5px; -moz-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; ekran: blok; genişlik: 0;)

Demo sayfasının CSS dosyası, çalışmak için yararlı olan yorumları içerir. Her tarayıcı, border-radius özelliğini veya genişliği veya yüksekliği olmayan bordering öğelerini kullanırken farklıdır.

Kodun son görünümü

Aşağıda, hafif alt gölgelerle ve yalnızca bir HTML öğesi kullanarak kıvrılmış köşeler efekti oluşturmak için gereken tüm CSS'ler yer almaktadır.

pozisyon: akraba; genişlik: %30; dolgu: 1em 1.5em; kenar boşluğu: 2em otomatik; renk: #fff; arka plan: # 97C02F; taşma: gizli; ) .note: önce (içerik: ""; konum: mutlak; üst: 0; sağ: 0; kenarlık genişliği: 0 16 piksel 16 piksel 0; kenarlık stili: katı; kenarlık rengi: #fff #fff # 658E15 # 658E15 ; arka plan: # 658E15; -webkit-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); kutu gölgesi: 0 1px 1px rgba (0,0,0,0.3), -1px 1px 1px rgba (0,0,0,0.2); ekran: blok; genişlik: 0; / * Firefox 3.0 sınırlarını aşın * /) .note.rounded (-webkit-border-radius: 5px; -moz-border-radius: 5px ; border-radius: 5px;) .note.rounded: Before (border-width: 8px; border-color: #fff #fff şeffaf şeffaf; -webkit-border-bottom-left-radius: 5px; -moz-border- yarıçap: 0 0 0 5px; sınır-yarıçap: 0 0 0 5px;)

Çözüm

Demo sayfası, efektin kullanımının kolay olduğundan emin olmak için farklı renkler kullanan örnekler içerir.

Bu tekniğin, bir öğe için arka plan olarak bir görüntü kullanırken basit bir renk kullanmaktan daha kötü çalıştığı akılda tutulmalıdır. Ancak bükülmüş köşeleri düzenlemenin diğer yöntemlerinde de bu tür kısıtlamalar vardır.