CSS3 Border-Image Property Sprawia, że zdjęcia są naprawdę fajne!
Tworzenie granic nie jest niczym nowym HTML & CSS; byliśmy w stanie dodawać obramowania od początku. Być może znasz obramowania bryłowe, granice przerywane, kreskowane kreski i tak dalej.
Ale z nową właściwością border-image CSS3 tworzenie granic na elemencie HTML staje się bardziej zaawansowane; cóż, po prostu możemy teraz dodać obramowanie za pomocą obrazu jako źródła, które pozwoli nam dodać bardziej atrakcyjne granice. W porządku, zobaczmy teraz, jak działa ta właściwość.
Obsługa składni i przeglądarki
Obraz obramowania w CSS3 jest zdefiniowany przy użyciu następującej skróconej składni:
border-image: [źródło obrazu] [plasterek] [szerokość] [początek] [powtórz];
Powyższa składnia jest oficjalną wersją z W3C, która jest obsługiwana tylko w Chrome, podczas gdy Opera, Firefox i Safari nadal wymagają wersji z prefiksem (-o-, -moz-, -webkit-), a Internet Explorer nie dziwi, że w ogóle nie obsługuje tej właściwości.
Ponadto [szerokość] i [początek] wartość w tym obraz graniczny właściwości nie są jeszcze obsługiwane w żadnej przeglądarce, jednak wartość szerokości można zastąpić za pomocą szerokość granicy własność.
Krótko mówiąc, teraz możemy zastosować tylko wartość [Źródło obrazu], [kawałek] i [powtarzać] .
border-image: [źródło obrazu] [plasterek] [powtórz];
Plasterek obrazu
Zanim przejdziemy do zademonstrowania tej właściwości, porozmawiajmy o “kawałek obrazu” po pierwsze, ponieważ jest to coś nowego w deklarowaniu nieruchomości. Fragment obrazu tutaj definiuje cięcie obrazu, które odpowiednio przyjmuje punkt początkowy od góry, prawej, dolnej i lewej krawędzi obrazu, który następnie podzieli obraz na dziewięć sekcji, jak pokazano na poniższym obrazie.
Na powyższym obrazku zobaczysz sekcje 1, 3, 7 i 9 stanie się rogami granicy i sekcjami 2, 4, 6 i 8 stanie się krawędzią lub linią graniczną, upewniając się, że sekcja, w której stanie się krawędzią, jest powtarzalna lub rozciągliwa.
Wartość plasterków można zadeklarować za pomocą piksel jednostka lub procent (%) jednostka do elastycznego pomiaru.
więcej referencji:
- Poziomy tła i obramowania CSS 3
Tworzenie ramki na zdjęcia
Teraz pokażmy właściwość w prawdziwym przykładzie.
Tym razem będziemy wdrażać obraz graniczny właściwość do utworzenia ramki i będziemy używać obrazka poniżej jako źródła. Dokładnie zmierzyliśmy obraz, aby można go było odpowiednio pokroić, powtórzyć i rozciągnąć niezależnie od szerokości i wysokości treści.
Uwaga: możesz pobrać obrazek powyżej z tego linku.
Również w tej demonstracji użyjemy tego oszałamiającego Kinografu według From Me to You jako zdjęcia.
(Źródło obrazu: From Me To You)
Znaczniki
Znaczniki są tak proste, jak to:
Nie zapomnij wymienić images_2 / css3-border-image-property-making-photos-really-cool_3.jpg z własnym zdjęciem.
Style
A potem użyjmy ramki obraz graniczny.
Jeśli spojrzysz na obrazek powyżej, nasza szerokość obrazu wynosi 180px w sumie. Tę wartość można następnie podzielić na 6 którym jest każda dywizja 30px; i tak podzielimy obraz na 30px.
Jeśli używasz wartości długości dla plasterka, powinieneś wykluczyć px jednostka, ponieważ zostanie automatycznie przetłumaczona na piksel, ale jeśli zdecydujesz się użyć procentu, nadal będziesz musiał dodać (%).
Jeśli chodzi o powtarzanie obrazu, użyjemy domyślnego; powtarzać. Alternatywnie możesz użyć rozciągać i nie martw się, obraz granicy nadal będzie wyglądał wdzięcznie.
img border-image: url ("images / frame.png") 30 powtórzeń; -o-border-image: url ("images / frame.png") 30 powtórzeń; -moz-border-image: url ("images / frame.png") 30 powtórzeń; -webkit-border-image: url ("images / frame.png") 30 powtórzeń; border-width: 30px; Ponadto chcemy również umieścić obraz w środku okna przeglądarki, a także dodać tekst tekstury do dokumentu, aby uczynić go bardziej atrakcyjnym.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; wysokość: 476px; szerokość: 675px; wyrównywanie tekstu: środek; W porządku, myślę, że skończyliśmy tutaj, teraz zobaczmy to w przeglądarce.
- Próbny
- Pobierz źródło
Czy czujesz, że patrzysz na magiczny obraz w Hogwarcie?
Końcowa myśl
To obraz graniczny niewątpliwie jest miłym dodatkiem w rodzinie CSS3; nie musimy już ograniczać się do prostych prostych granic.
W tym poście pokazaliśmy, jak możemy stworzyć ramkę obrazu bez martwienia się o zawartość lub w tym przypadku wymiary zdjęcia (szerokość i wysokość). Wysokość i szerokość mogą być elastyczne, o ile źródło graniczne jest powtarzalne lub rozciągliwe.
Wreszcie, jeśli wciąż jesteś trochę zdziwiony obraz graniczny, istnieje narzędzie, którego możesz użyć, aby łatwiej utworzyć: narzędzie do tworzenia obramowania
