CSS3 Border-Image Özellik Fotoğraflar Gerçekten Harika!

Bu makale bizim bölümümüzün bir parçası. "HTML5 / CSS3 Dersleri serisi" - sizi daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için. Buraya TIKLAYIN Aynı serideki daha fazla makale görmek için.

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ı