Geef een extra dimensie aan je blog

Trek de aandacht met een drop shadow box

Ik ga al weer heel wat jaartjes mee op het Internet. Mijn eerste Internetaansluiting had ik in 1994 via XS4ALL en enkele dagen na de activering van de aansluiting verdiepte ik me al in HTML, in die tijd nog 2.0. De grote spelers van vandaag : Microsoft, FireFox en Chrome, waren nog onbekend. Mosaic was de grote speler, op dat moment bedreigd door een nieuwkomer, Netscape.

Om de positie te versterken, besloot Netscape op eigen initiatief HTML uit te breiden met een aantal nieuwe ‘tags’, waarvan ‘<blink>’ waarschijnlijk wel de meest opvallende was. Door deze tag te gebruiken, kon je de bezoeker van je pagina acute hoofdpijn bezorgen, door je tekst te laten knipperen. Het was opvallend… maar alles behalve fraai.

Het Internet is groot geworden: zowel in omvang als kwalitatief. En we gebruiken geen knipperende teksten meer om de bezoeker zijn aandacht te trekken. Dank zij HTML en CSS hebben we talloze andere methoden, die fraaier werken en meer effect hebben. Een nieuw fenomeen, mogelijk geworden dankzij HTML5 en CSS3, is de zogenaamde ‘box with dropshadow’.

Een dropshadow box, zoals ik het maar even voor het gemak zal noemen, is een ‘rechthoek’ met schaduweffect, getekend om een stuk tekst of tekst met afbeelding.  Zoiets als hieronder :

Deze tekst lijkt iets omhoog te staan…

Dit soort effecten is natuurlijk leuk, mits met mate gebruikt. Maar om dit effect voor elkaar te krijgen is er nogal wat nodig: Je moet kennis hebben van HTML5 en CSS3 en zoals je al gemerkt hebt naar aanleiding van mijn artikel over de ‘Raw HTML‘, De WordPress tekstverwerker is niet echt dol op HTML.

Maar WordPress zou WordPress niet zijn, als dit probleem niet opgelost zou kunnen worden met een plugin. De plugin die we in dit geval nodig hebben heet ‘Drop Shadow Boxes‘ en kan direct vanuit WordPress worden geinstalleerd.

Na installatie en activering van de plugin ben je klaar. Het werkelijke effect krijg je te zien, wanneer je een pagina of een bericht wilt gaan schrijven of bewerken. Naast de knop waarmee je afbeeldingen in kunt voegen, is een nieuwe knop verschenen, een klein vierkant vlakje, wat je in eerste instantie per ongeluk voor een ‘checkbox’ aan zou kunnen zien:

Klik je hier echter op wordt de volgende dialoog zichtbaar :

Door een beetje met de instellingen te spelen, krijg je direct in de ‘preview’ (wanneer je de knop ‘Refresh Preview’ aanklikt) het gevolg van je wijzigingen te zien, ik zou je eigenlijk gewoon willen adviseren eens met alle instellingen te spelen. Het gevolg hiervan is een prachtige ‘box’ die door het schaduweffect los lijkt te komen van zijn omgeving.

Hoewel je natuurlijk altijd spaarzaam met ‘speciale effecten’ om moet gaan, kun je dit effect prima gebruiken door speciale aandacht op een stuk tekst te vestigen: Een citaat, een testimonial, een prijstabel, instructies die je extra onder de aandacht wilt brengen, het maakt niet uit.

Je kunt gewoon extra aandacht aan je tekst geven door hem op een dergelijke manier uit te lichten. Als je wat meer ‘gevorderd’ bent in WordPress kun je ook de ‘shortcodes’ direct in de tekst gebruiken en op deze manier ook andere elementen dan tekst, zoals bijvoorbeeld formulieren en afbeeldingen, uitlichten.
.

Maar zoals met zoveel zaken: Het trekt pas echt de aandacht, als je het met mate toepast!

Veel blogplezier!

 

 

 

 

 

 

 

 

 

 

m4s0n501

Reacties

  1. Leuke plugin. Ik heb hem meteen in gebruik genomen. De pop-ups links onderaan jouw website zijn ook goed. Kan je mij zeggen welke plugin dit is?
    Ik blijf je tips en blogartikelen met veel belangstelling volgen.
    Dankjewel.

    • Die plugin is ‘Pop Notify’ en dat is een commerciele plugin waar WordXPression developerrechten op heeft aangekocht. Binnenkort hoor je er meer over.

Laat wat van je horen

*

Deze site gebruikt cookies om uw ervaring met deze site zo prettig mogelijk te houden.