Externe link stylen - ILUZIE inspiratie blog

005 Icoon na externe links (+ fancy ‘underline’ met andere kleur) – CSS

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;
}

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Verder lezen
ILUZIE inspiratie - CSS filters - wallpainting (foto door Lucas Gallone via Unsplash)

004 meer CSS filters: blur, contrast, invert, sepia en meer

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.

ILUZIE inspiratie - CSS filters - wallpainting (foto door Lucas Gallone via Unsplash)

.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).

ILUZIE inspiratie - CSS filters - bierdrinkende vrouwen

.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%):

ILUZIE inspiratie - CSS filters - wallpainting (foto door Lucas Gallone via Unsplash)

.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%)

ILUZIE inspiratie - CSS filters - bierdrinkende vrouwen

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

grayscale(50%)

ILUZIE inspiratie - CSS filters - bierdrinkende vrouwen

.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):

ILUZIE inspiratie - CSS filters - wallpainting (foto door Lucas Gallone via Unsplash)

.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):

ILUZIE inspiratie - CSS filters - bierdrinkende vrouwen

.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).

ILUZIE inspiratie - CSS filters - wallpainting (foto door Lucas Gallone via Unsplash)

.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.

ILUZIE inspiratie - CSS filters - bierdrinkende vrouwen

.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).

 

ILUZIE inspiratie - CSS filters - wallpainting (foto door Lucas Gallone via Unsplash)

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

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Verder lezen
Houtdruk Linda & Arne

003 afbeelding van zwart-wit (grayscale) naar kleur on :hover

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.

website Anymation door ILUZIE - Homepage

Website jara.nl - door ILUZIE (artwork Marileen Arbouw)

website The Youth Company - homepage - website door ILUZIE

website Frank Allart - Kleuren - website door ILUZIE

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;
}

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Verder lezen
website Student voor Alles - homepage - door ILUZIE

002 Afbeelding aanpassen als je er overheen gaat met je cursor

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">

Nieuwe blogposts in je mailbox ontvangen?

* velden met een asterisk zijn verplicht, wil je deze beiden invullen?

Verder lezen
WPCF7 Contact Form 7 - Custom checkboxes

001 Custom radio buttons & checkboxes (Contact Form 7)

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.

    Custom Radio Buttons

    Custom Checkboxes

    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;
    }

    Nieuwe blogposts in je mailbox ontvangen?

    * velden met een asterisk zijn verplicht, wil je deze beiden invullen?

    Verder lezen