Als je geinteresserd bent in inline borders kan je dus heel goed scripten... Waarschijnlijk kan ik wat van jou leren (brede grijns). Ik ga dus niet alles voorkauwen. En ik weet absoluut zeker dat jij in staat bent om de broncode van deze pagina op eigen houtje te bekijken. Van mij alleen wat commentaar:
Eerst maar even een voorbeeld van hoe de meeste scripters het
inline-border gegeven benaderen. Klik even op het plaatje hier
(om het plaatje weer te verkleinen: klik er nog een keer op)
en merk op
dat, in deze procedure, de afmetingen exact moeten worden gedefinieerd, en dat het plaatje zelf
als achtergrond wordt gemaakt. Daarna wordt er wat gerommeld met
de afmetingen, en klaar is Kees. Het werkt natuurlijk, en het plaatje
van de poes vind ik echt heel leuk. Maar om alle plaatjes op een
pagina nu dezelfde afmeting te gaan geven, een background-positie te
offeren en een ingewikkelde procedure over te houden, die helaas niet
crossbrowser is, lijkt mij niet zo handig. Mijn voorstel is om de procedure
(in de stylesheet) a.negatieve-border te gebruiken (zie broncode van deze pagina). Deze class behoort
bij het tweede plaatje van de "trevis" (de auto) op deze pagina. Je hoeft
alleen maar de hoeveelheid pixels van de border aan te geven voor de
normale- en hover-state van een plaatje. Voeg deze class aan (de link van) het plaatje toe,
en je bent klaar. Het maakt niet uit welk formaat het plaatje heeft, en
waar het op jouw pagina staat. Het werkt bulletproof in alle browsers.
De overige CSS code van de voorbeeldjes 1,3 en 4 staat alleen maar op de pagina om te laten zien dat je vrij veel kan "uithalen" met inline borders. Deze voorbeelden zijn meer bedoeld voor het uitknobbelen van een leuk effect voor (slechts) 1 plaatje. Of als je van plan bent om het oude "memory-spel" te gaan maken, kan het ook handig zijn om plaatjes helemaal te bedekken, en bij een active- of focus-state ze open te laten gaan... Mogelijkheden genoeg, dunkt me.
De titel van deze pagina is: 'inline borders - css border over background'.
De sleutelwoorden zijn : css, inline, border, geen, script en nodig.
De omschrijving is: 'inline borders puur css. Bulletproof cross browser'.