shiny picture CSS
glanzende plaatjes worden gemaakt met zuiver CSS

home | index | menu | help

Er is geen CSS ondersteuning.

		

glossy hart

een hart

		

Dit is de allersnelste (qua laadtijd) manier om een plaatje wat "glossy-shine" te geven. CSS is een paar tandjes sneller dan het gebruik van javascript, en alleen IE gebruikt, op deze pagina, 2846 bytes (extra) code met deze rond.htc. Op de dns5 staat ook de "volbloed-versie" van het "glimmende-plaatjes-gebeuren". Kijk even bij glossy-image-effect hoe dat er-uit ziet. De procedure op déze pagina dient eigenlijk voor "vaste" plaatjes in jouw layout. Het kost meer werk om de plaatjes exact fine te tunen (met de code), maar dat weegt ruimschoots op tegen de wel heel erg grote performance-winst die je met deze procedure bereikt.

Kopieer eerst de broncode van de shiny-pictures naar jouw webruimte (en de htc-file die je hierboven via de link kan downloaden), en om snel te kunnen beginnen ook even het onderste plaatje (hart.jpg). Daarna hoef je alleen maar de code naar jouw eigen wens aan te passen. Om een paar dingen te noemen:
de hoeken van het plaatje kan je in "shiny image" (in de style-sheet) instellen. De ronde hoeken van het glimmende venstertje staan in "shiny a .despan". In ".shiny a img" kan je de border-kleur en -dikte regelen, en tevens bepaal je daar of de plaatjes een "float" moeten krijgen. Ik weet zeker dat je al begrepen had dat het bovenste plaatje gemaakt is van het onderste plaatje..
Voor ik het vergeet: Kopieer ook even de half.png (doe even een "select all": de file is tranparant..) naar jouw werk-directory om even alles makkelijk te laten werken. Later kan je deze file vervangen door jouw eigen exemplaar.

cache 30-05-2010