Schaduw maken in Wordpress element module page builder

Logo cursus traing wordpress

Schaduw maken in WordPress element module page builder

Schaduw maken met CSS wordpress

Ik denk dat het de makkelijkste manier is om de CSS toe te voegen aan een klasse in Snelle CSS en dan de klasse toe te wijzen aan de kolommen of elementen die je wenst. De CSS ziet er bijvoorbeeld zo uit.

.box-shadow {
    box-shadow: 0px 0px 10px black;
}

Je kan ook transparantie gebruiken voor je schaduw. Gebruik dan zoiets als dit.

.box-shadow {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

Of:

.box-shadow {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

Schaduw voor tekst maken met CSS

Je kan uiteraard ook een schaduw maken voor tekst met CSS. Dit is handig als je weinig contrast met je hebt.

Je kunt CSS- toevoegen aan text en dan de klasse aanpassen.
De CSS ziet er dan bijvoorbeeld zo uit.

h1 {
  text-shadow: 2px 2px #ff0000;
}

Tekst met zwarte schaduw

Tekst met een zwarte schaduw. De laatste 0.9 bepaalt de transparantie van de :

h2 {
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}

Schaduw maken met Shadow Palette Generator

Shadow Palette Generator is een fantastisch hulpmiddel. Het uitgangspunt is dat box-shadow er vrijwel altijd beter uitziet als er meerdere gelaagde schaduwen zijn die een beetje getint zijn. De generator doet dat, maar maakt er ook drie niveaus van zodat je wat “hoogte” opties hebt voor je schaduwen. En het zet ze op als aangepaste eigenschappen zodat ze gemakkelijker herbruikbaar zijn. Je hebt wel enige kennis nodig van CSS en de CSS root en variabelen en WordPress.
www.joshwcomeau.com/shadow-palette/
https://codepen.io/chriscoyier/pen/BawzaXW

Parameters, cijfers en getallen voor schaduw

drop-shadow (offset-x offset-y blur-radius color)

offset-x offset-y (vereist)

De 2 waarden die de schaduw-offset bepalen. offset-x specificeert de horizontale afstand, waarbij negatieve waarden de schaduw links van het element plaatsen. Offset-y specificeert de verticale afstand, waarbij negatieve waarden de schaduw boven het element plaatsen. Als beide waarden 0 zijn, wordt de schaduw direct achter het element geplaatst.

vervaag-straal (optioneel)

De onscherpheidsstraal van de schaduw, gespecificeerd als een . Hoe groter de waarde, hoe groter en onscherper de schaduw wordt. Indien niet gespecificeerd, is de standaardwaarde 0, wat resulteert in een scherpe, onscherpe rand. Negatieve waarden zijn niet toegestaan.

kleur (optioneel)

De van de schaduw, opgegeven als een . Indien niet gespecificeerd, wordt de waarde van de color eigenschap gebruikt.

Schaduw maken met page builder in wordpress

In het voorbeeld hieronder een schaduw achter een . Het boxschaduweffect werkt ook met schuifregelaars. Als je de schuifregelaar X naar links schuift, krijg je een achtergrondschaduw aan de linkerkant, en als je hem naar rechts schuift, krijg je een schaduw aan de rechterkant. Je kunt ook onscherpte toevoegen om het meer schaduw-achtig te maken, en de spreiding vergroten om de grootte van de schaduw te veranderen.

https://docs.wpbeaverbuilder.com/beaver-builder/styles/effects/radius-shadow/

Schaduw maken met page builder en CSS in wordpress

Je kan ook de CSS in je integreren. Het onderstaande werkt met alle page builders:

Maak eerst een class in je CSS zoals hierboven beschreven. Ga in je page builder naar naar geavanceerd en dan naar Class. Vul daar de naam van je class in. In dit geval “shad”. Als het goed is krijg je een schaduw.

Klik op afbeelding om de class in de page builder goed te zien.

Voorbeeld schaduw maken met CSS voor webdesign

Voorbeelden voor het schaduw maken met CSS vind je hier:
getcssscan.com/css-box-shadow-examples

voorbeeld schaduw maken kader webdesign website css
voorbeeld schaduw maken webdesign website css

Links en handleiding schaduw

Styling with the CSS box-shadow property

Meer weten over Schaduw maken in Wordpress element module page builderof info?

Wil je meer weten? Veel lezers met interesse in Schaduw maken in Wordpress element module page builder bekeken ook de onderstaande artikelen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je website beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je WordPress site mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Schaduw maken in Wordpress element module page builder

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Schaduw maken in Wordpress element module page builder en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven