Tagarchief: CSS

Image Thumbnail Viewer of Lightbox plugin?

Voor de Slickr Gallery, een AJAX Flickr plugin voor WordPress blogs, had ik een andere WordPress plugin nodig, namelijk Lightbox. Maar deze plugin lukt het ook aardig om van een thumbnail op een dynamische manier (DHTML) de grote foto te voorschijn te toveren op de webpagina.

Dit wordt hier bij Dynamic Drive DHTML Scripts’ Image Thumbnail Viewer geïllustreerd.

Wat HTML betreft: een snuifje CSS en Javascript in de header, plus een GIF voor de animatie terwijl de bezoeker op de foto wacht en last but not least een rel attribuut toevoegen in de HTML-code van de hyperlink.

De plugin installeren was een fluitje van een cent. Voor dit viewer script moet je toch hier en daar wat ingrijpen o.a. het pad naar de verschillende bestanden aanpassen. Je kunt er ook maar 1 foto meer tonen, niet een hele reeks foto’s zoals bij Lightbox wel het geval is. En sneltoetsen zoals bij Lightbox zijn er ook al niet.

Aptana IDE en YUI Javascript Library

Ik was al een tijdje op zoek naar een goeie open source IDE voor HTML, CSS en javascript. Toevallig vind ik vanavond Aptana, een IDE om gemakkelijk Ajax applicaties te ontwikkelen en te ontplooien.

Je vindt op de site alleszins heel wat screencasts om het werken met Aptana onder de knie te krijgen. Er is ook een screencast om te starten met een webproject gebaseerd op de YUI Javascript library.

Voor wie Flash en Javascript wil combineren om dynamische webapplicaties te maken, wordt er op de site ook verwezen naar AFLAX (Asynchronous Flash and XML).

HTML menu met CSS en…

een klein javascript om ook IE gebruikers tevreden te stellen. Dat alles lees je in het artikel Drop-Down Menus, Horizontal Style. Een HTML lijst met de menu items, wat CSS eraan toevoegen en klaar is kees. Maak eventueel het geheel nog wat aantrekkelijker door een kleurtje toe te voegen wanneer de muis over een menu item komt. Het proberen waard !

Schaduw met CSS

Geef aan een foto of ook aan een titel wat schaduw met de CSS-techniek die duidelijk beschreven en uitgelegd wordt in dit artikel van A List Apart.

In plaats van dit schaduweffect te realiseren met behulp van een fotobewerkingsprogramma, kan het eenvoudig met enkele CSS lijnen in het stijlblad en enkele kleine GIF-bestanden als achtergrond.

Schaduweffect voor titels