Home > kruimelpad

vorige 58 volgende

inhoud

Twitter invoegen (13)

(reset)

Geen opacity, toch opacity!

Gerealiseerd in deze stap

  • De linkerkolom laten infaden met een geleend opacity-script (zie broncode), dat in principe ook werkt in browsers die niet de css3-eigenschap opacity ondersteunen.
  • Reset deze pagina voor het effect bij openen van een andere pagina.
  • NB: de opacity loopt weliswaar van 0 tot 1 (lees: van transparant tot 100% niet doorschijnend), maar dat geldt alleen voor de tekst en de opgegeven kleuren (van tekst, backgrounds, borders en images).
    Wat transparant is in het twitterblok, blijft transparant. En daarmee blijft ook de eronder zittende semi-transparantie van de linkerkolom gehandhaafd.
  • Omdat het via (op zich ook te missen) javascript gaat, kunnen de validators (css, WCAG, Quickscan Webrichtlijnen) er geen bezwaar tegen aantekenen. ;-)
  • Het herhalen van de invulling van het twitterblok is uitgesteld tot het infaden klaar is.

Browsers: werkt in Firefox, Chrome, Opera en Safari.
IE7 kan de opacity in combinatie met het van twitter doorgekregen stylesheet niet aan (plaatst het twitterblok toch in één keer). IE8 en IE9 niet kunnen testen.
Jammer voor IE7 (het was een extra'tje binnen een extra'tje), maar we gaan verder.

Nog één twitter-stapje.

Twitter

[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[laatste kolomregel]
[rechterkolom]
[vultekst]
[vultekst]
[laatste kolomregel]