• ← vorige
• terug naar inspiratie

Interne + externe links verschillend stylen

Ik kreeg laatst de vraag hoe je ervoor zorgt dat alle externe links een icoontje mee krijgen, zoals bijvoorbeeld Wikipedia dat doet.

Dan krijg je dus het volgende:

interne link

externe link

Hieronder vind je de CSS code!

Vervang siteurl.com met jouw eigen domein en link de background url naar jouw eigen icoon.

a[href*="//"]:not([href*="siteurl.com"]):after {
    display: inline-block;
    content: ' ';
    height: 18px;
    width: 18px;
    background-size: cover !important;
    margin: 0 8px;
    background: url(/wp-content/uploads/2020/04/icon.png);
}

Attribution: External Link icon icon by Icons8

Underlines vs. box-shadow: fancy underline met eigen kleur 🙂

link met standaard underline

link met box-shadow onderlijning

externe link met box-shadow onderlijning

Om links een underline te geven, gebruik je over het algemeen:

a {
    text-decoration: underline;
}

Werkt super, maar deze underline kun je geen kleur meegeven. Wil je wel een andere kleur underline dan je link kleur, gebruik dan box-shadow!

a {
    text-decoration: none;
    box-shadow: inset 0 -1.5px 0 #F287B7;
}

• ← vorige
• terug naar inspiratie

• ← vorige
• terug naar inspiratie
• volgende →

De vorige inspiratie post ging over de grayscale filter in CSS. CSS kent nog veel meer filters, waaronder:

• blur()
• brightness()
• contrast()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

NOTE:
desktop: ga met je cursor over de afbeelding heen om de filter toe te passen
mobiel: klik op de afbeelding om de filter toe te passen

Blur

Met deze filter blur je je afbeelding. Hij past een Gaussian blur toe, de waarde die je aangeeft is een radius van een aantal pixels (hoeveel pixels moeten in elkaar blenden). Hoe hoger het aantal pixels, hoe meer blurry je afbeelding.

.css-blur:hover {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

Brightness

Volgens mij zijn de meeste mensen wel bekend met het begrip van digitale brightness. Deze filter gebruik je door een percentage of getal op te geven. 100% is de normale brightness, door meer dan 100% op te geven krijg je een meer ‘bright’ effect. Hieronder even een wat overdreven voorbeeld: brightness(3).

.css-brightness:hover {
  -webkit-filter: brightness(160%);
  filter: brightness(160%);
}

Contrast

Ook het begrip contrast is je vast niet onbekend. Je kunt hierbij ook weer gebruik maken van percentages, waarbij 100% de basis is. Minder dan 100% resulteert in minder contrast, meer dan 100% in meer contrast. Hieronder een voorbeeld van contrast(200%):

.css-contrast:hover {
  -webkit-filter: contrast(200%);
  filter: contrast(200%);
}

Grayscale

Deze filtert de afbeelding naar zijn grijswaarden, waardoor je dus een zwart-witte afbeelding overhoudt. De waarde die je ingeeft bepaalt de mate van conversie. 100% is compleet zwart-wit, 0% laat de afbeelding zoals hij gewoonlijk is. Je kunt dus ook met 50% een soort ‘halverwege effect’ bereiken.

grayscale(100%)

.css-grayscale:hover { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
}

grayscale(50%)

.css-grayscale-50:hover {
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

Hue-rotate

Hue-rotate werkt net een beetje anders. De waarde die je ingeeft is een ‘hoek’, deze geeft het aantal graden van de kleurencirkel aan waar de kleuren naar zullen worden aangepast. 0deg is default, dan is de afbeelding zoals gewoonlijk. De maximale waarde die je kunt invoeren is 360deg (wat een complete cirkel is en dus weer op dezelfde kleuren uitkomt als 0deg). Hieronder een voorbeeld van hue-rotate(90deg):

.css-hue-rotate:hover {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Invert

Inverted afbeeldingen zijn altijd ergens een beetje scary vind ik 😉 gebruik de filter weer met een percentage of getal (80% is hetzelfde als .8), waar bij 0% niks gebeurt en 100% compleet inverted is. Hieronder een voorbeeld van invert(.8):

.css-invert:hover {
  -webkit-filter: invert(.8);
  filter: invert(.8);
}

Opacity

Opacity verklaart de transparantie. Leuk als je bijvoorbeeld een patroon achter je afbeelding hebt staan welke je er doorheen wilt laten komen, of als je een watermerk-achtig effect wilt bereiken. 0% is compleet transparant, 100% is zoals de afbeelding normaal is (geen transparantie).

.css-opacity:hover {
  -webkit-filter: opacity(.3);
  filter: opacity(.3);
}

Saturate

Dan de saturation, ofwel verzadiging. 0% is compleet onverzadigd, 100% is zoals de afbeelding normaal is. Hoger dan 100% mag natuurlijk ook weer, voor een effect van oververzadiging.

.css-saturate:hover {
  -webkit-filter: saturate(220%);
  filter: saturate(220%);
}

Sepia

Last in this list, but not least: Sepia! Wie kent ‘m niet, hét ancient equivalent van Instagram filters 😉 Nog steeds veelgebruikt, het geeft dan ook een mooi effect. 0% of 0 is ‘business as usual’, 100% of 1 is compleet sepia (zie hieronder).

.css-sepia:hover {
   -webkit-filter: sepia(1);
   filter: sepia(1);
}

• ← vorige
• terug naar inspiratie
• volgende →

• ← vorige
• terug naar inspiratie
• volgende →

CSS heeft hele fijne filters (check hier meer filters), waaronder een grayscale filter! Dat betekent dat je bijvoorbeeld super simpel alle afbeeldingen op een pagina zwart-wit kunt maken 🙂 Vet handig als je een bepaalde uniformiteit wilt bereiken.

Je kunt er dan ook weer met :hover voor zorgen dat hij zijn grayscale filter ‘verliest’, en dat de afbeelding dus weer gekleurd wordt, als je er overheen gaat met je cursor. Bovenstaande afbeeldingen hebben allemaal een class gekregen van grayscale-image, zie hier bijvoorbeeld een image tag:

<img class="alignnone wp-image-4883 size-large grayscale-image" src="https://www.iluzie.nl/wp-content/uploads/2019/09/website-Anymation-door-ILUZIE-Homepage-1030x685.png" alt="website Anymation door ILUZIE - Homepage" width="1030" height="685" />

Hieronder vind je de bijbehorende CSS:

.grayscale-image {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 1s ease;
}

.grayscale-image:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
   transition: all 1s ease;
}

• ← vorige
• terug naar inspiratie
• volgende →

• ← vorige
• terug naar inspiratie
• volgende →

Een leuk detail op je website, is om afbeeldingen te laten veranderen als je er overheen gaat met je cursor. Dat kun je doen met iconen, maar ook met foto’s. Op de website van Mass Audio hebben we dit bijvoorbeeld in de footer gebruikt. Op de initiële foto kijken ze redelijk neutraal, maar als je er met je pijltje overheen gaat:

Bovenstaande voorbeelden zijn gemaakt met CSS. De HTML markup zijn lege div’s:

<div class="arnout"></div> <div class="folkert"></div> <div class="riekz"></div>

De bijbehorende CSS is als volgt:

.arnout, .folkert, .riekz {
	margin: 10px auto 20px auto;
	display: block;
	height: 150px;
	width: 150px;
	background: url(/wp-content/uploads/2019/10/Arnout-1.png);
}
 
.folkert {
	background: url(/wp-content/uploads/2019/10/Folkert-1.png)
}
 
.riekz {
	background: url(/wp-content/uploads/2019/10/Riekz-1.png)
}
 
.arnout:hover {
	background: url(/wp-content/uploads/2019/10/Arnout-2.png);
}
 
.folkert:hover {
	background: url(/wp-content/uploads/2019/10/Folkert-2.png)
}
 
.riekz:hover {
	background: url(/wp-content/uploads/2019/10/Riekz-2.png)
}

Als je in een widget werkt en html kunt gebruiken die niet opgeschoond wordt door WordPress, kun je het evt. ook in pure HTML doen:

<img class="mouseover" src="/wp-content/uploads/2019/10/foto1.jpg" alt="alt" oversrc="/wp-content/uploads/2019/10/foto2.jpg">

• ← vorige
• terug naar inspiratie
• volgende →

• terug naar inspiratie
• volgende →

Contact Form 7 is een van de meest populaire contactformulier plugins voor WordPress. Het is dan ook mijn go-to oplossing voor forms. Wel vind ik het belangrijk dat contactformulieren per site worden gestyled, zodat ook deze perfect bij de huisstijl passen.

Hieronder vind je als voorbeeld mijn eigen custom styled radio buttons & checkboxes 🙂 Andere kleurtjes en vormpjes zijn natuurlijk ook mogelijk.

Hieronder vind je de gebruikte CSS (geïnspireerd op deze pen van Colin Reilly)

/* custom radio buttons & checkboxes */

  /* radio buttons */

.wpcf7-radio .wpcf7-list-item, .wpcf7-checkbox .wpcf7-list-item {
    display: block;
    margin-left: 0px;
}

.wpcf7-radio:after, .wpcf7-checkbox:after {
    content: "";
    display: block;
    height: 15px;
}

.wpcf7 .wpcf7-list-item {
    display: block;
    margin-bottom: 10px;
}

.wpcf7-form .wpcf7-radio label {
    position: relative;
    cursor: pointer;
}

.wpcf7-form .wpcf7-radio input[type=radio] {
    position: relative;
    visibility: hidden;
}

.wpcf7-form .wpcf7-radio input[type=radio] + span:before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 18px;
    width: 18px;
    top: 2px;
    border: 1px solid #000;
}

.wpcf7-form .wpcf7-radio input[type=radio] + span:after {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 7px;
    left: 5px;
    visibility: hidden;
}

.wpcf7-form .wpcf7-radio input[type=radio]:checked + span:before {
    background: transparent;
}

.wpcf7-form .wpcf7-radio input[type=radio], .wpcf7-form .wpcf7-checkbox input[type=checkbox] {
    margin-right: 10px;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item:nth-of-type(3n + 1) input[type=radio]:checked + span:after {
    background: #FFC20E;
    visibility: visible;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item:nth-of-type(3n + 2) input[type=radio]:checked + span:after {
    background: #6DCFF6;
    visibility: visible;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item:nth-of-type(3n) input[type=radio]:checked + span:after {
    background: #F287B7;
    visibility: visible;
}

	/* Checkbox */

.wpcf7-form .wpcf7-checkbox label {
    position: relative;
    cursor: pointer;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] {
    position: relative;
    visibility: hidden;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 5px;
    height: 18px;
    width: 18px;
    top: 2px;
    border: 1px solid #000;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:after {
    display: block;
    position: absolute;
    content: '\2713';
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: -1px;
    left: 5px;
    visibility: hidden;
    font-size: 16px;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item:nth-of-type(3n + 1) input[type=checkbox] + span:after {
    color: #FFC20E;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item:nth-of-type(3n + 2) input[type=checkbox] + span:after {
    color: #6DCFF6;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item:nth-of-type(3n) input[type=checkbox] + span:after {
    color: #F287B7;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:before {
    background: transparent;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:after {
    visibility: visible;
}

• terug naar inspiratie
• volgende →