IN DEZE HANDLEIDING:
- 1 Schaduw maken met CSS wordpress
- 2 Schaduw voor tekst maken met CSS
- 3 Schaduw maken met Shadow Palette Generator
- 4 Parameters, cijfers en getallen voor schaduw
- 5 Schaduw maken met page builder in wordpress
- 6 Schaduw maken met page builder en CSS in wordpress
- 7 WP Bakery Builder WP Plugin Handleiding Nederlands
- 8 Divi wordpress thema page builder review en test
- 9 Elementor WordPress page builder handleiding en review
- 10 WP Beaver Builder training pagina’s bouwen met WP plugin
- 11 Voorbeeld schaduw maken met CSS voor webdesign
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 achtergrond hebt.
Je kunt CSS-class 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 achtergrondkleur:
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 kleur 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 kolom. 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 page builder integreren. Het onderstaande werkt met alle page builders:
WP Bakery Builder WP Plugin Handleiding Nederlands
WP Bakery Builder is een eenvoudig te gebruiken page builder plugin die je de mogelijkheid bied om mooie webpagina’s te bouwen. Handleidingen vind je onderaan deze pagina. IN DEZE HANDLEIDING:1 WP Bakery Builder voor WordPress2 WordPress thema en design aanpassen met page builder3 WPBakery Page Builder Review | Voordelen en […]
Divi wordpress thema page builder review en test
In deze handleiding en review leg ik uit hoe het Divi thema en de Divi page builder werkt. Daarnaast heb ik het Divi thema getest.
Elementor WordPress page builder handleiding en review
Elementor is de populairste pagebuilder plugin voor WordPress. Je kunt met de ‘drag-and-drop’ webpagina’s vormgeven. Lees review en handleiding.
WP Beaver Builder training pagina’s bouwen met WP plugin
De WP Beaver Builder is één van de beste page builder op dit moment voor WordPress. Lees de handleidingen, voordelen en tips en volg eventueel een training.
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