CSS kenarlığı: yarıçap, renk, stil ve diğer css özellikleri

Bir önceki yazımızda, sayfa elemanlarında CSS border() özelliklerinin kullanımını tartışmıştık. Ve size sınırları çizmek için resimlerin nasıl kullanılacağını anlatacağıma söz verdim. Bugün tartışılacak olan budur.

Kenarlıkları oluşturmak için görüntüleri kullanmak için border-image CSS özelliğini kullanacağız.

Kenarlıkların kalınlığı özellik tarafından belirlenir ve border: 0 belirtilirse kenarlık görüntülenmez. Kenarlığın diğer değerleri için çizim her zaman önceliklidir. Arka plan, arka plan özelliği aracılığıyla ayarlanırsa, çerçevenin altında görüntülenir.

Kod Sözdizimi

Bir özellik girişi örneğine bakalım:

border-image: url (images/bg-image.png ) 30 yuvarlak;

url (images/bg-image.png) — arka plan resminin adresi.

30 - görüntü bölümlerinin boyutunu piksel cinsinden gösteren bir, iki, üç veya dört değer olabilir, böylece görüntüyü bölmek için alan ayarlanır. Birimlerin kendileri yazılmaz, yalnızca sayı (10 piksel değil, 10 piksel). Şekilde, kırmızı çizgiler çerçeveyi oluşturmak için gerekli alanları vurgulamaktadır.

Bir, iki, üç veya dört değerin aralarında boşluk bırakılarak kullanılmasına izin verilir. Etki, değer sayısına bağlıdır ve tabloda gösterilmiştir.

yuvarlak yuvarlak - iki parametre (sırasıyla yatay ve dikey sınırlar için). Üç değerden birini alabilirler. Sonuç resimlerde görülebilir.

uzatmak— Kenarlık çizimini öğenin boyutuna uzatır. Bu değer varsayılan olarak kullanılır.
tekrar et— Kenarlığın desenini tekrarlar.
yuvarlak— Deseni tekrarlar ve öğenin yanında tam sayıda görüntü olacak şekilde ölçekler.

Tarayıcı Uyumluluğu

Ne yazık ki, tüm tarayıcı sürümleri border-image özelliğini desteklemez. Daha iyi uyumluluk için, özelliğin tüm tarayıcılara kaydedilmesi arzu edilir.

Kod örneği:

kenarlık stili : katı ; sınır genişliği : 27 piksel ; -moz-border-image: url (http://mysite.ru/border.png ) 27 yuvarlak streç; -webkit-border-image: url (http://mysite.ru/border.png ) 27 yuvarlak streç; -o-border-image: url (http://mysite.ru/border.png ) 27 yuvarlak streç; border-image: url (http://mysite.ru/border.png ) 27 yuvarlak streç;

Otomasyon

Web'de kod yazmamıza yardımcı olan araçlar var. border-image özelliği için çok kullanışlı bir kurucu var. Sınır resminizi oraya yüklemeniz yeterlidir (bu arada, internette birçoğu var). Görüntüyü alanlara bölmek için kaydırıcıları kullanın, kenarlıkların kalınlığını ve tekrarlama parametrelerini ayarlayın.

Ve hemen çevrimiçi modda sonucu görürsünüz (sonunda ne olur).

İstediğiniz sonucu elde ettiğinizde, oluşturulan kodu kopyalayıp sayfa koduna (css dosyası) yapıştırmanız yeterlidir.

Çok basit ve kullanışlı.

Çözüm

Bu, CSS'deki sınır özellikleri tartışmamızı sonlandırıyor. Sana veda etmiyorum. Yakın gelecekte düzen eğitimine devam edeceğiz. Güncellemelere abone olun ... ve ... Yakında görüşürüz!

border evrensel özelliği, bir öğenin etrafındaki kenarlığın genişliğini, stilini ve rengini aynı anda ayarlamanıza olanak tanır. Değerler boşlukla ayrılmış herhangi bir sırayla gidebilir, tarayıcı hangisinin istenen özelliğe karşılık geldiğini belirleyecektir. Bir öğenin yalnızca belirli taraflarında kenarlık ayarlamak için border-top , border-bottom , border-left , border-right özelliklerini kullanın.

kısa bilgi

gösterim

	Tanım	Örnek
<тип>	Değerin türünü belirtir.	<размер>
A&B	Değerler belirtilen sırada çıktı alınmalıdır.	<размер> && <цвет>
bir | B	Önerilen değerlerden (A veya B) yalnızca birinin seçilmesi gerektiğini belirtir.	normal | küçük şapkalar
Bir || B	Her değer tek başına veya herhangi bir sırayla diğerleriyle birlikte kullanılabilir.	genişlik || saymak
	Grup değerleri.	[ kırp || geçmek]
*	Sıfır veya daha fazla kez tekrarlayın.	[,<время>]*
+	Bir veya daha fazla kez tekrarlayın.	<число>+
?	Belirtilen tür, sözcük veya grup isteğe bağlıdır.	ek?
(A, B)	En az A'yı tekrarlayın, ancak B'den fazla değil.	<радиус>{1,4}
#	Virgülle ayırarak bir veya daha fazla kez tekrarlayın.	<время>#

×

değerler

border-width değeri, sınırın genişliğini belirler. Görünümünü kontrol etmek için birkaç sınır stili değeri sağlanmıştır. İsimleri ve eylemin sonucu Şekil 2'de gösterilmektedir. bir.

Şekil 1. Çerçeve stilleri

border-color sınırın rengini ayarlar, değer herhangi bir geçerli CSS formatında olabilir.

Örnek

Bu örnekte, kutunun etrafına çift kenarlık eklenmiştir. Sonuç, Şek. 2.

Pirinç. 2. Border özelliğinin uygulanması

Nesne Modeli

Bir obje.style.border

Not

Internet Explorer, sürüm 6'ya kadar ve dahil olmak üzere, 1 piksel kenarlık genişliğiyle noktalı olarak noktalı görüntüler oluşturur. 2px ve üzerinde noktalı değer doğru çalışır. Bu hata IE7'de düzeltildi, ancak yalnızca tüm 1px kenarlıkları için. Kutunun kenarlarından biri 2 piksel veya daha kalınsa, noktalı nokta IE7'de kesikli hale gelir.

Kenarlığın stili, groove, ridge, inset veya outset değerlerini kullanırken tarayıcılar arasında biraz farklılık gösterebilir.

Şartname

Her spesifikasyon, birkaç onay aşamasından geçer.

• Tavsiye (Tavsiye) - spesifikasyon W3C tarafından onaylanmış ve standart olarak tavsiye edilmiştir.
• Aday Önerisi ( Olası öneri) - standarttan sorumlu grup, hedeflerine nasıl ulaştığından memnun, ancak standardı uygulamak için geliştirme topluluğunun desteği gerekiyor.
• Önerilen Öneri ( Önerilen öneri) - Bu aşamada belge nihai onay için W3C Danışma Kurulu'na sunulur.
• Çalışma Taslağı - Tartışma ve topluluk incelemesi için yapılan değişikliklerden sonra taslağın daha olgun bir versiyonu.
• Editörün taslağı ( içerik taslağı) proje editörleri tarafından değişiklikler yapıldıktan sonra standardın taslak versiyonudur.
• taslak ( Şartname taslağı) standardın ilk taslak versiyonudur.

×

Eminim css border özelliğini zaten biliyorsunuzdur. CSS border hakkında daha önce bilmediğiniz yeni bir şey öğrenecek misiniz? Eh, sadece öğrenmekle kalmayacak, aynı zamanda daha önce hiç bilmediğin yeni şeyler de göreceksin!

CSS3 sadece köşeleri yuvarlamak için değil, aynı zamanda karmaşık şekiller oluşturmak için saf CSS kodu da kullanılabilir. Önceden, yuvarlatılmış köşeler izlenimi vermek için arka plan görüntüsünü kullanabiliyordunuz. Yeni border teknikleri sayesinde bunu saf CSS ile yapabiliyoruz.

CSS sınırlarını kullanmanın temelleri

Muhtemelen border özelliğinin standart kullanımına zaten aşinasınızdır:

Kenarlık: 1 piksel düz siyah;

Yukarıdaki kod, siyah olacak 1 piksellik bir kenarlık oluşturacaktır. Basit ve kolay. Ayrıca sözdizimini biraz genişletebilirsiniz:

sınır genişliği: kalın; sınır stili: katı kenarlık rengi: siyah

Ek olarak, border-width özelliği için üç anahtar kelime olan belirli değerleri kullanabilirsiniz: ince, orta, kalın.

Ancak genişletilmiş sözdizimi kullanmak her zaman pratik değildir. Fareyle üzerine geldiğinizde bir blok kenarlığının rengini değiştirmek istediğiniz bir örneğe bakalım. Böyle bir durumda, steno sözdizimini kullanmak çok daha kolaydır:

Kutu ( kenarlık: 1 piksel kesintisiz kırmızı; ) .box: vurgulu ( kenarlık: 1 piksel sürekli yeşil; )

Daha zarif ve daha basit şu şekilde yapılabilir:

Kutu ( border: 1px düz kırmızı; ) .box:hover ( border-color: yeşil; )

Gördüğünüz gibi, gelişmiş teknik, yalnızca bazı özellikleri değiştirdiğimizde de kullanışlıdır: genişlik, stil, renk ve diğerleri.

sınır yarıçapı

Sınır-yarıçap pratik ve kullanışlı hale gelen ilk, en yaygın özellik olan CSS3'ün "altın" özelliğidir. IE8 ve altı hariç, tüm tarayıcılar bununla yuvarlatılmış köşeler görüntüler.

Bununla birlikte, stilin doğru olması için Webkit ve Mozilla için özel öneklerin kullanılması gerekir.

webkit-border-radius: 10px; -moz-border-radius: 10px; sınır yarıçapı: 10px

Günümüzde özel önekleri kaldırabilir ve standart kenarlık yarıçapı şeklini kullanabiliriz.

Diğer bir avantaj ise bloğun her bir tarafı için özel değerler kullanabilmemizdir:

sınır-üst-sol-yarıçap: 20 piksel; sınır-sağ-üst-yarıçap: 0; sınır-alt-sağ-yarıçap: 30 piksel; sınır-alt-sol-yarıçap: 0;

Yukarıdaki kodda, border-üst-sağ-yarıçap ve border-alt-sol-radius "sıfır" olarak ayarlanarak harika şekiller elde edilebilir. Öğe, null yapılması gereken bazı özellikleri devralabilir.

Kenar boşluğu ve dolgu gibi, sözdizimini yoğunlaştırabiliriz:

/* sol üst, sağ üst, sağ alt, sol alt */ border-radius: 20px 0 30px 0;

Örnek olarak, border-radius özelliğini kullanarak, size tasarımcıların web sitelerini düzenlerken sıklıkla kullandıkları bir "limon" göstereceğim:

Limon ( genişlik: 200 piksel; yükseklik: 200 piksel; arka plan: #F5F240; kenarlık: 1 piksel katı #F0D900; kenarlık yarıçapı: 10 piksel 150 piksel 30 piksel 150 piksel; )

Temel bilgilerin ötesine geçmek

Birçok tasarımcıda, css özellik sınırı alanındaki tüm bilgiler burada sona erer. Ama harika şeyler yaratmak için kullanabileceğiniz başka harika şeyler de var!

Karmaşık css sınır yapıları

Karmaşık sınır yapılarını tasarlamak için birçok teknik vardır. Örneğin, aşağıdakileri göz önünde bulundurun ...

kenarlık tarzı

Her zaman en ünlü katı, kesikli ve noktalı özellikleri kullanırız. Ancak birkaç kenar stili özelliği daha var: oluk ve sırt.

Kenarlık: 20px oluk #e3e3e3;

Veya genişletilmiş sözdiziminde:

kenarlık rengi: #e3e3e3; sınır genişliği: 20 piksel sınır stili: oluk;

Bu özellikler yararlı olsa da, karmaşık çerçeveler oluşturmak için temel oluşturmazlar.

anahat

En popüler çift kenarlık tekniği, anahat özelliğini kullanmaktır.

Kutu ( kenarlık: 5 piksel düz #292929; anahat: 5 piksel düz #e3e3e3; )

Bu yöntem harika çalışıyor, ancak bizi yalnızca iki kareyle sınırlandırıyor. Bazen birçok katmandan oluşan bir degrade kenarlık oluşturmanız gerekir... o zaman nasıl?

sözde öğeler

Anahat tekniği yeterli olmadığında, alternatif :before ve :after sözde öğelerini kullanmaktır. Öğeye ek kenarlıklar ekleyebileceğiniz:

Kutu ( genişlik: 200 piksel; yükseklik: 200 piksel; arka plan: #e3e3e3; konum: göreceli; kenarlık: 10 piksel kesintisiz yeşil; ) /* Aynı kap genişliğine sahip iki kutu oluşturun */ .box:after, .box:before ( içerik: ""; konum: mutlak; üst: 0; sol: 0; alt: 0; sağ: 0; ) .box:sonra ( kenarlık: 5 piksel düz kırmızı; ana hat: 5 piksel kesintisiz sarı; ) .box:önce ( kenarlık : 10px düz mavi; )

Çok zarif görünmüyor ama en azından işe yarıyor. İçindeki renk dizisiyle uğraşmak biraz sorunlu... ama anlayabilirsiniz.

Kutu Gölge

Bu efekti yaratmanın ilginç bir "çocukça" yolu, CSS3 box-shadow özelliğini kullanmaktır:

Kutu ( kenarlık: 5 piksel düz kırmızı; kutu gölgesi: 0 0 0 5 piksel yeşil, 0 0 0 10 piksel sarı, 0 0 0 15 piksel turuncu; )

Bu durumda, özel box-shadow özelliğini kullanarak daha akıllıydık. x, y, blur parametrelerini sıfıra değiştirerek birden çok kare oluşturmak için farklı renkler kullanabiliriz.

Ancak bir sorun var, box-shadow özelliğini anlamayan eski tarayıcılarda sadece bir 5px kırmızı kenarlık görünecek.

"Unutma! Sitenin tasarımı tarayıcılar arası, yani tüm tarayıcılarda aynı görünmelidir. Eski sürümler dahil.

Değişen açılar

Kullanılan basit border-radius'a ek olarak, iki ayrı tane belirtebiliriz - onları / ile ayırarak yatay ve dikey yarıçapı belirleyeceğiz.

Örneğin:

Sınır yarıçapı: 50 piksel / 100 piksel /* yatay yarıçap, dikey yarıçap */

... şuna eşdeğerdir:

Sol üst kenarlık yarıçapı: 50 piksel 100 piksel; sağ üst kenarlık yarıçapı: 50 piksel 100 piksel; sınır-sağ-yarıçap: 50px 100px; sınır-alt-sol-yarıçap: 50px 100px;

Bu teknik, benzersiz blok şekilleri oluşturmak için uygundur. Örneğin, sarılmış kağıt efektinin nasıl oluşturulacağı aşağıda açıklanmıştır:

Kutu (genişlik: 200 piksel; yükseklik: 200 piksel; arka plan: #666; kenarlık-üst-sol-yarıçap: 15em 1em; kenar-alt-sağ-yarıçap: 15em 1em; )

Kenarlık kullanan CSS şekilleri

Bu teknik, sıfır yükseklik ve genişlik boyutlarına sahip öğeleri kullanırken nasıl css formları oluşturabileceğinizi gösterir. Şaşırmış? Bir örneğe bakalım...

Sonraki birkaç örnek için aşağıdaki işaretlemeyi kullanacağız:

…ve aşağıdaki temel stil:

Kutu (genişlik: 200 piksel; yükseklik: 200 piksel; arka plan: siyah; )

CSS şekillerinin en yaygın kullanımı, etrafı saran bir ok oluşturmaktır. Bu okun sırrı, her bir kenar için farklı renklerde bir bordür oluşturmasında yatmaktadır. Ardından, genişlik ve yükseklik niteliklerini 0 olarak ayarlayın.

Ok sınıfını div bloğuna atayalım:

Ok ( genişlik: 0; yükseklik: 0; kenarlık-üst: 100 piksel kesintisiz kırmızı; kenarlık-sağ: 100 piksel kesintisiz yeşil; kenarlık-alt: 100 piksel kesintisiz mavi; sol kenarlık: 100 piksel kesintisiz sarı; )

Göstermek için önce genişletilmiş sözdizimini kullanıyoruz. Ardından, kısaltılmış sözdizimini kullanarak fazladan kodu kaldırabiliriz:

Ok (genişlik: 0; yükseklik: 0; kenarlık: 100 piksel katı; kenarlık rengi: kırmızı yeşil mavi sarı; )

İlginç, değil mi? Şimdi mavi taraf hariç tüm taraflara şeffaf renkler ayarlayacağız.

Ok ( genişlik: 0; yükseklik: 0; kenarlık: 100 piksel düz; kenarlık-alt-renk: mavi; )

Harika çalıştı! Ama bu çelişiyor anlamsal düzen, sadece sayfaya bir ok eklemek için bir .arrow div oluşturun. Bunun için şimdi yapacağımız sözde elemanları kullanabiliriz.

Konuşma Balonu Oluşturun

Bir Konuşma Balonu oluşturmak için küçük bir parça saf CSS koduna ve bir div bloğuna ihtiyacımız var.

Konuşma balonu (konum: göreli; arka plan rengi: #292929; genişlik: 200 piksel; yükseklik: 150 piksel; satır yüksekliği: 150 piksel; /* dikey olarak merkez */ renk: beyaz; metin hizalama: merkez; )

Konuşma balonu:sonra (içerik: ""; )

Bu noktada, daha önce yaptığımız oku oluşturacağız, onu elemana ekleyeceğiz ve geriye sadece onu konumlandırmak kalıyor:

Konuşma balonu:sonra (içerik: ""; konum: mutlak; genişlik: 0; yükseklik: 0; kenarlık: 10 piksel katı; kenarlık rengi: kırmızı yeşil mavi sarı; )

Okun aşağıyı göstermesini istiyorsak, en üstteki kenarlık hariç tüm kenarlıkları şeffaf olarak ayarlamamız gerekecek.

Konuşma balonu:sonra (içerik: ""; konum: mutlak; genişlik: 0; yükseklik: 0; kenarlık: 10 piksel katı; kenarlık üstü renk: kırmızı; )

Bu CSS şeklini oluşturduğumuzda, okun boyutunu özel olarak belirtemiyoruz. Bunun yerine, okun boyutunu ayarlayacak olan border-width özelliğini ayarlayabiliriz. Ayrıca okun alt ortadaki konumunu da ayarlayacağız. Buna göre, bunun için üst ve sol değerleri kullanıyoruz.

Konuşma balonu:sonra ( içerik: ""; konum: mutlak; genişlik: 0; yükseklik: 0; kenarlık: 15 piksel katı; kenarlık üstü renk: kırmızı; üst: %100; sol: %50; )

Ayrıca, bloğun rengiyle aynı rengi vermek bize kalır. Konumlandırma yaparken, görünmez olan diğer sınırların (15px) boyutunu hesaba katmanız gerektiğini unutmayın. Köşelerde blok yuvarlama da vereceğiz.

Konuşma balonu ( /* ... diğer stiller */ border-radius: 10px; ) .speech-bubble:after ( içerik: ""; konum: mutlak; genişlik: 0; yükseklik: 0; kenarlık: 15 piksel katı; kenarlık -top -color: #292929; üst: %100; sol: %50; sol kenar boşluğu: -15px; /* kenarlık genişliği için ayarla */ )

Fena değil, ha? Birkaç css sınıfı ve border trick kullanarak böyle bir şey oluşturabilirsiniz.

/* Speech Bubbles Kullanımı: .speech-bubble ve .speech-bubble-DIRECTION sınıfını aşağıda gösterildiği gibi uygulayın

*/ .speech-bubble ( konum: göreli; arka plan rengi: #292929; genişlik: 200 piksel; yükseklik: 150 piksel; satır yüksekliği: 150 piksel; /* dikey olarak orta */ renk: beyaz; metin hizalama: merkez; kenarlık- yarıçap: 10 piksel; yazı tipi ailesi: sans-serif; ) .speech-bubble:after ( içerik: ""; konum: mutlak; genişlik: 0; yükseklik: 0; kenarlık: 15 piksel katı; ) /* Oku Konumlandırın */ .speech-bubble-top:after ( border-bottom-color: #292929; sol: %50; alt: %100; margin-sol: -15px; ) .speech-bubble-right:after ( border-sol-color : #292929; sol: %100; üst: %50; kenar boşluğu: -15 piksel; ) .speech-bubble-bottom:sonra ( border-top-color: #292929; üst: %100; sol: %50; margin-sol: -15px; ) .speech-bubble-left:after ( border-right-color: #292929; üst: %50; sağ: %100; üst kenar boşluğu: -15px; )

Bonus! Bir blok içinde dikey merkezleme

Tek bir metin satırı için satır yüksekliği kullanılabilir. Ancak iki veya daha fazla metin satırınız varsa... En iyi çözüm, display özelliğini tablo olarak ayarlamak ve tüm metni bir paragrafa koymaktır. Html işaretlemesinde şöyle görünür: