CSS3 – Multiple Border-Shadow

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.

En dan wil ik je nu laten zien dat je ook in een stijl meerdere slagschaduwen tegelijkertijd kunt beschrijven.

En dan wil ik je nu laten zien dat je ook in een stijl meerdere slagschaduwen tegelijkertijd kunt beschrijven.

Onderaan de pagina staat een link naar de website Multiple Box Shadows.

En hier bieden ze jou deze mogelijkheid. Ik ga hier naar toe.

En opnieuw krijg je een invoer venster waarin je een schaduw kunt opgeven

Ik bepaal eerst voor naar buiten toe dat ik wil dat ik een schaduw krijg van horizontaal en verticaal verplaatst.

De Blur wil ik graag op hebben, de Spread op . Ik wil als kleur een donkere kleur.

En deze ga ik dan vervolgens transparant maken bij de Opacity.

Daarvoor moet je de schuif gebruiken. Deze plaats ik ongeveer op %.

En in het vlak eronder staat dan vervolgens de code die je kunt kopiëren en plakken.

Als ik ook voor Webkit en voor Mozilla Firefox de bijbehorende prefixes wil hebben.

Dan zal ik deze opties nog even moeten aan vinken.

Bovenin het venster wordt de mogelijkheid geboden om een schaduw toe te voegen.

En dat is zo mooi hieraan. Dus dan ga ik vervolgens opnieuw een schaduw toevoegen.

Dan verschijnt er een nieuw instel venster.

Dit is nu de Top Shaduw en hieronder staat dan de Second Shadow.

Die kan ik ook nog weer bekijken en aanpassen. De Top Shadow is er nu bij gekomen.

En deze wil ik juist naar binnen gaan toepassen.

Wil ik dat deze langs alle zijden wordt toegepast, dus ik ga niet horizontaal verschuiven. Die staat gewoon op .

Maar die ga ik wel een Blur meegeven van bijvoorbeeld .

Ik wil hem niet gaan spreiden.

En de kleur is in principe prima zoals ik die nu zie.

Ik zou natuurlijk ook een heel andere kleur kunnen geven, maar ik vind deze mooi.

En vervolgens ga ik hier onderin alle codes selecteren. ik ga deze kopiëren met Control- of Commando-C.

En ik ga deze toepassen in mijn eigen document.

En ik vervang de slagschaduw die ik aan mijn artikelen heb verbonden, voor deze nieuwe, maar dan dubbele slagschaduw.

En bekijk het resultaat hiervan in de browser.

En je ziet dat nu zowel naar binnen een zachte slagschaduw wordt toegepast, als ook naar buiten.

Je kunt hier natuurlijk eindeloos mee variëren en experimenteren.

Je hoeft jezelf niet te vermoeien met het zelf maken van de prefixes.

Het gebruik kunnen maken van deze online css-generators, maakt het een stuk aantrekkelijker en makkelijker.