CSS3 – Eigen patroon toepassen als Border-Image

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

Klik op de knop Browse en wijs vervolgens de illustratie aan die je specifiek hiervoor gemaakt hebt.

En die staat opgeslagen in de localroot folder van je website.

Vervolgens wordt deze zelfgemaakte illustratie toegepast in het voorbeeld venster.

Je zult nu eerst dus de juiste uitsnedes moeten bepalen.

En dat kun je dus doen met Top Offset en als je beneden meekijkt, dan kun je precies aflezen wanneer je de pixels hebt bereikt.

En dat doe ik dan ook voor Right Offset en hier moet ik ook precies de pixels bepalen.

En dat geldt dan ook voor de Bottom Offste en voor de Left Offset.

Daarom is het handig dat je van te voren precies bepaalt hoeveel ruimte je reserveert voor de hoekillustraties.

En voor de horizontale- en verticale delen.

Als ik niet wil dat in de verticale- en horizontale delen mijn patroondelen worden afgehakt.

Kies ik niet voor Repeat maar Round. Dat doe ik dan zowel horzontaal als verticaal.

De Border Width staat op dit moment op pixels.

Ik ga kijken hoe dit eruit zou zien als ik dit ga toepassen in mijn eigen webpagina.

Vergeet niet deze css-stijl te selecteren en te kopiëren.

Ik selecteer de oude border-image en ik plak hiervoor de nieuwe code met mijn eigen ontworpen patroon.

Alleen in deze code staat wel aangegeven dat de url is een 'patroonster.png'.

Maar niet dat ik deze heb opgeslagen in het mapje 'img', dus ik moet nog even de juiste route aangeven.

En dat is dus maje 'img/'. En dit moet ik dan bij alle overige prefix stijlen ook doen.

Dus hier moet ik het nog even aangeven en ook daar zal ik het moeten aangeven en hier nogmaals.

Dan bewaar ik vervolgens mijn stijlblad en bekijk ik het eindresultaat in de browser.

En dit is dus de toepassing van mijn zelf ontworpen border-image.

Je kan vrij eenvoudig de border-width aanpassen. Ik zal deze even netjes ordenen en op een nieuwe regel plaatsen.

Ik doe dat ook even met de overige prefixes.

De border-width staat nu op pixels, maar deze kun je dus vrij eenvoudig kleiner maken naar pixels. Of juist groter maken.

Dankzij de website 'Border-Image-Generator is het vrij eenvoudig om deze css-eigenschap te kunnen maken.

En toe te passen in je eigen webontwerp. Nu heb ik een voorbeeld getoond hoe je een illustratie kunt voorbereiden in Illustrator.

Maar dit kun je in principe in elk illustratieprogramma natuurlijk maken, bijvoorbeeld ook als je liever werkt met photoshop.