CSS3 Border-Image Property gör foton riktigt coolt!
Att skapa gränser är inget nytt i html & CSS; Vi har kunnat lägga till gränser sedan början. Du kanske har varit bekant med sola gränser, prickade gränser, streckade gränser och så vidare.
Men med den nya CSS3-gränssnittsegenskapen skapas gränser på HTML-elementet mer avancerat. Tja, enkelt sagt, vi kan nu lägga till en kant med en bild som källa som gör att vi kan lägga till mer attraktiva gränser. Okej, låt oss nu se hur den här egenskapen fungerar.
Syntax och Browser Support
Gränsbilden i CSS3 definieras med hjälp av följande syntetik för stenografi:
gränsbild: [bildkälla] [skiva] [bredd] [utgång] [upprepa];
Syntaxen ovan är den officiella versionen från W3C som bara stöds i Chrome, medan Opera, Firefox och Safari fortfarande kräver den prefixade versionen (-o-, -moz-, -webkit-), och Internet Explorer stöder inte överraskande den här egenskapen alls.
Dessutom [bredd] och den [början] värde i detta border-image egenskapen stöds ännu inte i alla webbläsare, men breddvärdet kan bytas ut med gränsbredd fast egendom.
Så kort sagt, för närvarande kan vi bara tillämpa värdet av [bildkälla], [skiva] och [upprepa] .
gränsbild: [bildkälla] [skiva] [upprepa];
Bildskärm
Innan vi fortsätter att demonstrera den här egenskapen, låt oss prata om “bildskiva” först eftersom det är något nytt för att förklara en egendom. Bildskärmen här definierar skärningen av bilden som respektive tar utgångspunkten från toppen, höger, botten och vänster om bildkanterna som därefter också delar upp bilden i nio sektioner, vilket illustreras med följande bild.
I bilden ovan kommer du att se att avsnitten 1, 3, 7 och 9 kommer att bli hörn av gränsen och sektionerna 2, 4, 6 och 8 kommer att bli kantkanten eller linjen, se till att sektionen där den blir kanten är repeterbar eller töjbar.
Skivans värde kan deklareras med a pixel enhet eller en procentandel (%) enhet för flexibel mätning.
fler referenser:
- CSS Bakgrund och gränser Nivå 3
Skapa en fotoram
Nu, låt oss visa egenskapen i ett verkligt exempel.
Den här gången ska vi genomföra border-image egenskap för att skapa en fotoram och vi kommer att använda bilden nedan som källa. Vi har noggrant mätt bilden så att den kan skäras ordentligt, upprepas och sträckas oberoende av innehållets bredd och höjd.
Notera: Du kan ladda ner bilden ovan från den här länken.
Också i den här demonstrationen kommer vi att använda den här fantastiska Cinemagraph från From Me to You som fotot.
(Bildkälla: Från mig till dig)
Markeringen
Markeringen är så enkel som detta:
Glöm inte att byta ut images_2 / CSS3-border-image-fastighets making-foton-verkligen-cool_3.jpg med ditt eget foto.
Stilarna
Och låt oss ge det en ram med border-image.
Om du tittar på bilden ovan är vår bildbredd 180px totalt. Detta värde kan sedan delas in i 6 som varje division är 30px; och så ska vi skära bilden för 30px.
Om du använder längdvärdet för skivan bör du utesluta px enhet, eftersom den automatiskt kommer att översättas till pixel, men om du bestämmer dig för att använda procentandelar behöver du fortfarande lägga till (%).
När det gäller bildrepetitionen använder vi standardvärdet; upprepa. Alternativt kan du använda sträcka och oroa dig inte, gränsbilden kommer fortfarande att se graciös ut.
img border-image: url ("images / frame.png") 30 upprepa; -o-border-image: url ("images / frame.png") 30 upprepa; -moz-border-image: url ("images / frame.png") 30 upprepa; -webkit-border-image: url ("images / frame.png") 30 upprepa; kantbredd: 30px; Dessutom vill vi också placera bilden mitt i webbläsarfönstret och lägga till en bakgrundsstruktur i dokumentet för att göra det mer övertygande.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; höjd: 476px; bredd: 675px; text-align: center; Okej, jag tror att vi är färdiga här, nu får vi se den i en webbläsare.
- demo
- Hämta källa
Känner du att du tittar på en magisk målning i Hogwarts?
Slutlig tanke
Detta border-image utan tvekan är ett bra tillägg i CSS3-familjen; vi är inte längre begränsade till de enkla vanliga gränserna.
Och i det här inlägget har vi visat dig hur vi kan skapa en bildram utan att oroa dig för innehållet eller i så fall bildens dimensioner (bredd och höjd). Höjden och bredden kan vara flexibel, så länge som gränskällan är repeterbar eller töjbar.
Slutligen, om du fortfarande är lite förbryllad om border-image, Det finns ett verktyg som du kan använda för att hjälpa dig att skapa ett lättare: gränssnittsverktyg
