Gratis websites ①

met alle code, css en scripts

SEOBOBO

Een website die door kromme (css)lijnen een aparte uitstraling heeft. Het doctype is HTML5 en de basis CSS is van klasse 2. Als een browser CSS3 aan kan, wordt er door de website progressive enhancement toegepast. Op 1 gifje na worden alle grafische zaken door de CSS en Javascript op het scherm gezet.
Voor de prijs hoef je het niet te laten: Deze razendsnelle en volkomen validerende site is gratis. Klik op het plaatje om de site in werking te zien. Op de site zelf is een (gratis) download-module.

VENW

Veel CSS3 zit er in dit HTML5 voorbeeld. En voor wat betreft Javascript zit er een leuke drag-en-drop module in die tevens een vergrotings-effect aan thumbnails geeft. Voor de titel is een crossbrowser CSS2 truc gebruikt die 3D letters op het scherm tovert. Buiten de plaatjes van de gallerij zit er geen enkele PNG of GIF in de site verwerkt. Alles is puur slant-CSS. Voor de zekerheid heb ik de externe Javascript "normaal" ge-included. Maar om alles op topsnelheid te laten draaien kan je beter ook Javascript compressie toevoegen.

3DUBBEL

In 3dubbel zit een knoppen-balk die volkomen CSS is. Er is met de GD-library een logo onder een hoek van 35 graden geplaatst en in het voorbeeld is ruim gebruik gemaakt van kolommen, in div's, die naast elkaar en onder elkaar geplaatst zijn, en toch liquid design mogelijk maken. De pagina is valid HTML5. Per kleur is er maar 1 gifje gebruikt om de kleur iets spannender te maken aan de bovenkant van de layout. Het benodigde font voor het logo is in de zip-file (downloaden vanaf het voorbeeld) toegevoegd.

CSSDESIGNER

Cssdesigner is een HTML5 site met CSS2. Deze website is bedoeld om veel informatie op weer te geven. Er is gekozen voor een gefixeerd ontwerp van 1024 bij 768 px. Hierdoor kan de positionereing van alles uitermate nauwkeurig geregeld worden. Hoe lang de pagina ook wordt, de kolommen zullen altijd synchroon lopen aan de onderkant. Met de opzet is rekening gehouden met het veranderen van ongeveer elk item op de pagina. Het kan niet moeilijk zijn om de pagina geheel naar jouw wens te modificeren.

STANDAARD

Wat heet standaard... Laten we zeggen: dns4-standaard. Deze pagina is een doorsnee van een dns4-pagina. Vanzelfprekend is de pagina valid CSS en valid HTML5. Het ontwerp is er een van 'liquid-design' en er zitten enkele aardige graphische 'grapjes' in. Let even op de verkleurende lijntjes bij de top van de pagina. Dit is puur PHP magic. De Java-script effecten kan je natuurlijk gerust weglaten. Ze dienen niet de effectiviteit van de pagina. Ze geven natuurlijk wel de pagina een 'gelikt' uiterlijk.