CSS3 Border-Image Property Vytváření fotek opravdu cool!

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

Vytváření hranic není nic nového HTML & CSS; od začátku jsme schopni přidat hranice. Možná jste byli obeznámeni s pevnými ohraničeními, tečkovanými okraji, přerušovanými hranicemi a tak dále.

Ale s novou vlastností CSS3 border-image, vytváření hranic na elementu HTML je stále pokročilejší; Jednoduše řečeno, nyní jsme schopni přidat hranici pomocí obrazu jako zdroje, který nám umožní přidat atraktivnější hranice. Dobře, podívejme se, jak tato vlastnost funguje.

Syntaxe a podpora prohlížeče

Obrázek hranice v CSS3 je definován pomocí následující zkratkové syntaxe:

 border-image: [zdroj obrázku] [slice] [width] [outset] [repeat];

Výše uvedená syntaxe je oficiální verzí W3C, která je podporována pouze v Chrome, zatímco Opera, Firefox a Safari stále vyžadují prefixovou verzi (-Ó-, -moz-, -webkit-) a Internet Explorer tuto vlastnost nepodporuje vůbec.

Dále [šířka] a [počátek] hodnotu border-image Vlastnost není dosud podporována v žádném prohlížeči, ale hodnota šířky může být nahrazena pomocí border-width vlastnictví.

Stručně řečeno, nyní můžeme použít pouze hodnotu [zdroj obrázku], [plátek] a [opakovat] .

 border-image: [obrazový zdroj] [řez] [opakovat];

Obrázek Slice

Než přistoupíme k demonstraci této vlastnosti, mluvme o tom “řez obrazu” Nejprve je to něco nového v deklaraci nemovitosti. Obrazový řez zde bude definovat řez obrazu, který vezme výchozí bod shora, vpravo, dole a vlevo od okrajů obrazu, který následně také rozdělí obraz do devíti sekcí, jak je znázorněno na následujícím obrázku.

Na obrázku nahoře uvidíte, že sekce 1, 3, 7 a 9 se stanou rohy hranice a úseky 2, 4, 6 a 8 se stane hraniční hranou nebo linií, ujistěte se, že sekce, kde se stane hranou, je opakovatelná nebo roztažitelná.

Hodnota řezů může být deklarována pomocí a pixel nebo procenta (%) jednotka pro flexibilní měření.

další reference:

• CSS Pozadí a hranice Úroveň 3

Vytvoření fotorámečku

Nyní ukážeme majetek v reálném příkladu.

Tentokrát budeme implementovat border-image vlastnost vytvořit fotorámeček a budeme používat obrázek níže jako zdroj. Pečlivě jsme změřili obraz tak, aby mohl být správně nakrájen, opakován a natažen bez ohledu na šířku obsahu a výšku.

Poznámka: obrázek můžete stáhnout z tohoto odkazu.

Také v této demonstraci použijeme tento ohromující Cinemagraph od Mne k Tebe jako fotografii.

(Zdroj obrázku: Od mě k vám)

Značky

Značení je tak jednoduché, jako je toto:

Nezapomeňte nahradit images_2 / css3-border-image-property-making-photos-really-cool_3.jpg s vlastní fotografií.

Styly

A pak to udělejme rámem border-image.

Když se podíváte na obrázek nahoře, naše šířka obrázku je 180px dohromady. Tato hodnota pak může být rozdělena na 6 která každá divize je 30px; a tak budeme řezat obraz 30px.

Pokud pro řez použijete hodnotu délky, měli byste vyloučit px automaticky převedena na pixel, ale pokud se rozhodnete použít procento, budete muset ještě přidat (%).

Pokud jde o opakování obrazu, použijeme výchozí nastavení; opakovat. Případně můžete použít protáhnout se a nebojte se, obraz na hranicích bude stále vypadat ladně.

 img border-image: url ("images / frame.png") 30 opakování; -o-border-image: url ("images / frame.png") 30 opakování; -moz-border-image: url ("images / frame.png") 30 opakování; -webkit-border-image: url ("images / frame.png") 30 opakování; border-width: 30px;  

Kromě toho chceme také umístit obrázek do středu okna prohlížeče a přidat do dokumentu texturu pozadí, aby byl více přesvědčivý..

 html background: url ('images / lightpaperfibers.png');  .wrapper margin: 20px auto; výška: 476px; šířka: 675px; zarovnání textu: střed;  

Dobře, myslím, že jsme tady, teď si to prohlížíme v prohlížeči.

• Demo
• Stáhněte si zdroj

Máte pocit, že se díváte na magický obraz v Bradavicích?

Závěrečná myšlenka

Tento border-image nepochybně je pěkným doplňkem v rodině CSS3; už nejsme omezeni na jednoduché prosté hranice.

A v tomto příspěvku jsme vám ukázali, jak můžeme vytvořit rámeček obrázku bez obav o obsah nebo v tomto případě o rozměry fotografie (šířka a výška). Výška a šířka mohou být flexibilní, pokud je zdroj ohraničení opakovatelný nebo roztažitelný.

Konečně, pokud jste ještě trochu zmateni border-image, existuje nástroj, který můžete použít k usnadnění snadnějšího vytvoření: nástroje pro ohraničení obrázků