Navigatie

Arabesk Mosaic Statische websites

Via Arabesk Mosaic maak je kennis met de Arabische kunst en mozaïek, de geheimen van de Arabische kunst laat u verbazen over de onthullingen die tijdens deze zoektocht tevoorschijn komen. Arabesk Mosaic biedt tevens mozaïekworkshops met Arabische kunstvormen aan.
Opdrachtgever:
Oil4 Communication
Vormgeving:
Nuiten Creatie
Talen:
xhtml, css, js
Oplevering:
Winter 2009
Website / url:
Arabesk Mosaic
Arabesk Mosaic
De navigatie bevat op het oog een regelmatige structuur, echter moest er voor elk menu-item eigen CSS-regels geschreven worden om ze correct te positioneren, waarbij voor de mouseover een CSS Roll-over techniek is gebruikt.

De randen om de witte letters, zijn -om aan de aangeleverde ontwerpen te voldoen- middels JavaScript en CSS gecreëerd. In eerste instantie viel de keuze op schaduwtechnieken, echter is de CSS text-shadow property pas geimplementeerd in CSS 3, op moment van schrijven niet ondersteund door de meest populaire webbrowsers, waaronder Internet Explorer. Voor deze browser kon de filter-property gebruikt worden, echter gaf dit geen wenselijk resultaat.

Omdat het ontwerp een rand rond de gehele letter bevatte, heb ik gekozen voor een (technisch) niet heel erg nette maar wel doeltreffende oplossing, namelijk vier kopies maken van elk menu-item, om deze in een span-element te plaatsen en middels CSS absoluut op de juiste plaats te positioneren opdat het lijkt alsof de letters een rand bevatten.