CSS3 Border-beeldeigenschappen Foto's maken Echt cool!
Grenzen maken is niets nieuws HTML & CSS; we hebben vanaf het begin grenzen kunnen toevoegen. Misschien bent u bekend met solide randen, gestippelde randen, onderbroken randen enzovoort.
Maar met de nieuwe CSS3-eigenschap voor randafbeeldingen wordt het maken van randen op het HTML-element geavanceerder; Nou, eenvoudig gezegd, we kunnen nu een rand toevoegen met behulp van een afbeelding als de bron waarmee we aantrekkelijkere randen kunnen toevoegen. Oké, laten we eens kijken hoe deze woning werkt.
Syntaxis en Browser-ondersteuning
De randafbeelding in CSS3 wordt gedefinieerd met behulp van de volgende syntaxis voor steno:
randafbeelding: [afbeeldingsbron] [segment] [breedte] [uit] [herhaling];
De bovenstaande syntaxis is de officiële versie van W3C die alleen wordt ondersteund in Chrome, terwijl Opera, Firefox en Safari nog steeds de vooraf gedefinieerde versie vereisen (-O-, -moz-, -webkit-), en het is geen verrassing dat Internet Explorer deze eigenschap helemaal niet ondersteunt.
Verder is de [breedte] en de [begin] waarde hierin border-image eigenschappen worden nog niet ondersteund in browsers, maar de waarde van de breedte kan worden vervangen met behulp van de grensbreedte eigendom.
Kortom, voor nu kunnen we alleen de waarde van toepassen [afbeeldingsbron], [plak] en [herhaling] .
randafbeelding: [afbeeldingsbron] [segment] [herhalen];
Image Slice
Voordat we overgaan tot het aantonen van deze eigenschap, laten we het hebben over de “afbeelding” eerst omdat het iets nieuws is bij het verklaren van een eigendom. De afbeeldingsegment definieert hier de afsnijding van de afbeelding die respectievelijk het beginpunt van boven, rechts, onder en links van de afbeeldingsranden neemt, dat vervolgens het beeld ook in negen secties zal verdelen, zoals geïllustreerd met de volgende afbeelding.
In de bovenstaande afbeelding ziet u dat de secties 1, 3, 7 en 9 worden de hoeken van de grens en de secties 2, 4, 6 en 8 wordt de rand of lijn van de rand en zorgt ervoor dat het gedeelte waar het de rand wordt, herhaalbaar of uitrekbaar is.
De waarde van de plakjes kan worden aangegeven met een pixel eenheid of een percentage (%) eenheid voor flexibele meting.
meer referenties:
- CSS Achtergronden en randen Niveau 3
Een fotolijst maken
Laten we nu eens het onroerend goed in een echt voorbeeld demonstreren.
Deze keer gaan we het implementeren border-image eigenschap om een fotolijst te maken en we zullen de onderstaande afbeelding als bron gebruiken. We hebben het beeld zorgvuldig gemeten, zodat het op de juiste manier kan worden gesneden, herhaald en uitgerekt, ongeacht de breedte van de inhoud en de hoogte.
Notitie: je kunt de afbeelding hierboven downloaden via deze link.
In deze demonstratie gebruiken we deze prachtige Cinemagraph van From Me to You als de foto.
(Beeldbron: From Me To You)
De opmaak
De opmaak is zo simpel als dit:
Vergeet niet om de images_2 / CSS3-border-image-eigenschap-making-foto-echt-cool_3.jpg met je eigen foto.
De stijlen
En laten we het dan een kader geven met border-image.
Als u de afbeelding hierboven bekijkt, is onze beeldbreedte dat 180px in totaal. Deze waarde kan vervolgens worden onderverdeeld in 6 die elke divisie is 30px; en dus zullen we de afbeelding doorsnijden 30px.
Als u de lengtewaarde voor het segment gebruikt, moet u de waarde uitsluiten px eenheid, omdat deze automatisch wordt vertaald naar pixel, maar als u besluit om het percentage te gebruiken, moet u nog steeds het (%).
Wat betreft de beeldherhaling, zullen we de standaard gebruiken; herhaling. Als alternatief kunt u gebruiken uitrekken en maak je geen zorgen, het grensbeeld ziet er nog steeds gracieus uit.
img border-image: url ("images / frame.png") 30 herhaling; -o-border-image: url ("images / frame.png") 30 herhaling; -moz-border-image: url ("images / frame.png") 30 herhalingen; -webkit-border-image: url ("images / frame.png") 30 herhalingen; grensbreedte: 30px; Bovendien willen we de afbeelding ook in het midden van het browservenster plaatsen en een achtergrondstructuur aan het document toevoegen om het nog aantrekkelijker te maken.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; hoogte: 476px; breedte: 675 px; text-align: center; Oké, ik denk dat we hier klaar zijn, laten we het nu in een browser bekijken.
- demonstratie
- Download de bron
Heb je het gevoel alsof je naar een magisch schilderij op Hogwarts kijkt?
Laatste gedachte
Deze border-image ongetwijfeld een leuke toevoeging in de CSS3-familie; we hoeven ons niet langer te beperken tot de eenvoudige vlakken.
En in deze post hebben we je laten zien hoe we een afbeeldingskader kunnen maken zonder je zorgen te maken over de inhoud of in dit geval de afmetingen van de foto (breedte en hoogte). De hoogte en breedte kunnen flexibel zijn, zolang de randbron reproduceerbaar of uitrekbaar is.
Ten slotte, als je je nog steeds een beetje zorgen maakt border-image, er is een hulpmiddel dat u kunt gebruiken om u gemakkelijker een hulpmiddel te laten maken: gereedschap om een randafbeelding te maken
