CSS3 Border-Image Özellik Fotoğraflar Gerçekten Harika!
Kenarlıklar oluşturmak yeni bir şey değil HTML & CSS; başından beri sınır ekleyebildik. Kesin kenarlıklar, noktalı kenarlıklar, kesik kenarlıklar vb. Hakkında bilgi sahibi olabilirsiniz..
Ancak, yeni CSS3 kenarlık resmi özelliği ile HTML öğesinde kenarlık oluşturmak daha da gelişiyor; peki, basitçe söylemek gerekirse, daha çekici sınırlar eklememize izin verecek kaynağı olarak görüntüyü kullanarak bir sınır ekleyebiliriz. Pekala, şimdi bu özelliğin nasıl çalıştığını görelim..
Sözdizimi ve Tarayıcı Desteği
CSS3'teki kenarlık resmi, aşağıdaki kısa yol sözdizimi kullanılarak tanımlanır:
kenarlık resmi: [resim kaynağı] [dilim] [genişlik] [çıkış] [tekrarla];
Yukarıdaki sözdizimi, W3C’nin yalnızca Chrome’da desteklenen resmi sürümüdür; Opera, Firefox ve Safari hala ön ek sürüm gerektiriyorsa (-O-
, -moz-
, -webkit-
) ve Internet Explorer şaşırtıcı bir şekilde bu özelliği hiçbir şekilde desteklemiyor..
Ayrıca, [Genişlik]
ve [başlangıç]
bunun içindeki değer border-image
özellik henüz hiçbir tarayıcıda desteklenmiyor, ancak genişlik değeri Çerçeve genişliği
özellik.
Yani, kısaca, şimdilik sadece değerini uygulayabiliriz. [görüntü kaynağı]
, [dilim]
ve [tekrar et]
.
kenarlık resmi: [resim kaynağı] [dilim] [tekrarla];
Görüntü Dilim
Bu özelliği göstermeye devam etmeden önce, konuşalım “görüntü dilimi” ilk olarak bir mülk ilanında yeni bir şey olduğu için. Görüntü dilimi burada sırasıyla başlangıç noktasını sırasıyla üst, sağ, alt ve soldan başlayan ve ardından görüntüyü aşağıdaki görüntüyle gösterildiği gibi dokuz bölüme ayıracak olan görüntü kesimini tanımlayacaktır.
Yukarıdaki resimde, bu bölümleri göreceksiniz 1, 3, 7 ve 9 Sınırın köşeleri ve bölümleri olacak 2, 4, 6 ve 8 kenar olacak veya kenar olacak olan kısmın tekrarlanabilir veya gerilebilir olduğundan emin olarak kenar.
Dilimlerin değeri bir ile ilan edilebilir piksel birim veya yüzde (%) esnek ölçüm birimi.
daha fazla referans:
- CSS Arka Planları ve Sınırları Seviye 3
Fotoğraf Çerçevesi Oluşturma
Şimdi, mülkiyeti gerçek bir örnekle gösterelim.
Bu sefer uygulayacağız border-image
Fotoğraf çerçevesi oluşturma özelliği ve aşağıdaki resmi kaynak olarak kullanacağız. Görüntüyü dikkatlice ölçtük, böylece içerik genişliği ve yüksekliği ne olursa olsun düzgün bir şekilde dilimlenebilir, tekrarlanabilir ve gerilebilir.
Not: Yukarıdaki resmi bu linkten indirebilirsiniz..
Ayrıca, bu gösteride, Benden Sizden Bu Çarpıcı Sinemagrafı, fotoğraf olarak kullanacağız..
(Resim kaynağı: Benden Size)
İşaretleme
İşaretleme bu kadar basittir:
Değiştirmeyi unutma images_2 / css3-border-image-mülk alma-fotoğraflar-gerçekten-cool_3.jpg
kendi fotoğrafınla.
Stilleri
Ve sonra, onu kullanarak bir çerçeve verelim border-image
.
Yukarıdaki resme bakarsanız, resim genişliğimiz 180pks toplamda. Bu değer daha sonra bölünebilir 6 hangi her bölüm 30px; ve böylece görüntüyü dilimleyeceğiz 30px.
Dilim için uzunluk değeri kullanıyorsanız, px birim otomatik olarak çevrilecek piksel, ancak yüzdeyi kullanmaya karar verirseniz, yine de eklemeniz gerekir. (%).
Görüntü tekrarına gelince, varsayılanı kullanacağız; tekrar et
. Alternatif olarak kullanabilirsiniz Uzatmak
ve endişelenmeyin, sınır görüntüsü hala zarif görünecek.
img border-image: url ("images / frame.png") 30 tekrar; -o-border-image: url ("images / frame.png") 30 tekrarı; -moz-border-image: url ("images / frame.png") 30 tekrar; -webkit-border-image: url ("images / frame.png") 30 tekrarı; sınır genişliği: 30px;
Ayrıca, görüntüyü tarayıcı penceresinin ortasına yerleştirmek ve daha çekici hale getirmek için belgeye arka plan dokusu eklemek istiyoruz..
html background: url ('images / lightpaperfibers.png'); . sarıcı marj: 20 piksel otomatik; yükseklik: 476px; genişlik: 675 piksel; metin hizalama: orta;
Tamam, sanırım burada işimiz bitti, şimdi bir tarayıcıda görüntüleyelim.
- gösteri
- Kaynak İndir
Hogwarts'ta büyülü bir resme bakıyormuş gibi hissediyor musunuz??
Son düşünce
Bu border-image
hiç şüphesiz CSS3 ailesinde hoş bir ektir; artık basit düz sınırlarla sınırlı değiliz.
Ve bu yazıda, içeriği veya bu durumda fotoğrafın boyutlarını (genişlik ve yükseklik) dert etmeden nasıl bir resim çerçevesi oluşturabileceğimizi gösterdik. Kenarlık kaynağı tekrarlanabilir veya gerilebilir olduğu sürece yükseklik ve genişlik esnek olabilir.
Son olarak, eğer hala biraz şaşkınsanız border-image
, Bir tane daha kolayca oluşturmanıza yardımcı olacak bir araç var: kenarlık resmi aracı