Category: CSS

Creating beautiful css animations

door Rami Saya

SlideShare.net/RamiSayar

Een tegenvallende presentatie waarbij de spreker inging op de geschiedenis van animatie op het web. Op zich aardig maar dit duurde te lang. Vervolgens ging hij in op CSS animaties maar kwam hij niet… Meer...

Collapsing header margin

Collapsing margin-top probleem

Je kent het wellicht wel: je hebt een container gemaakt met daarin een header. De header heeft een aantal pixels margin-top maar tot je verbazing wordt deze margin-top toegekend aan de container en niet aan de header! Dit kan op een aantal manier… Meer...

Een print CSS maken

Een print css maken

Het kan nuttig zijn om een apart stylesheet aan te maken voor een pagina die geprint moet worden. Bijvoorbeeld omdat je een kortingsbon wilt weggeven via internet of omdat je je cv printbaar wilt aanleveren aan een toekomstig werkgever. Om … Meer...

inline-block vs float

Wat is het verschil precies? Optisch gezien weinig. In beide gevallen komen de elementen naast elkaar te staan. Qua gedrag in de code is er wel een verschil. Floating elementen worden uit het stramien gehaald. Een parent container ‘ziet’… Meer...

Formulieren stijlen

Formulieren stylen

In combinatie met tabellen of div’s kun je je formulier mooi opmaken. In het hoofdstuk over tabellen heb je geleerd hoe je achtergrond afbeeldingen in tabellen plaatst om zo een ontwerp te maken.… Meer...

Werken met procenten

Werken in percentages

Er zijn tegenwoordig meer mobiele telefoon met internet verbinding dan computers. Nog even en er zullen ook meer page views zijn vanaf een mobiele telefoon dan vanaf een gewone computer. Tijd dus om te leren hoe je je site voor mobiel geschikt… Meer...

Child selectoren

Descendent selectoren

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id of class) binnen een andere tag (of id of class) zit, bijvoorbeeld “ul li”. Maar je kunt veel nauwkeuriger stijlen… Meer...

Boxmodel

Zoals je inmiddels weet kun je met behulp van een div element een lege box maken in HTML welke je vervolgens “vult” met afbeeldingen, tekst, video etc om zo je ontwerp op te zetten. Meestal maak je div’s in div’s om een… Meer...

Float

Om elementen in je HTML pagina naast elkaar te positioneren kun je de eigenschap float gebruiken. In aansluiting hier op kun je het een en ander lezen over wireframes (je beeldscherm indeling).

Video’tje kijken?

POLS

Mp>Op POLS … Meer...

Schaalbare achtergrond afbeelding

Het maken van een schaalbare achtergrond is tegenwoordig meer standaard dan uitzondering. Echter, een achtergrond afbeelding kan netjes schaalbaar zijn maar helaas toch uit verhouding. In deze post ga ik je niet vertellen hoe je je achtergrondafbeelding… Meer...

Positioning (absolute, relative en fixed)

In les 1 van HTM22 ga je verder met het positioneren van je elementen (je div’s op een plek zetten).

Video’tje kijken?

Links

Bij Codecademy kun je een stap-voor-stap tutorial volgen over positionering: http://www.codecademy.com/courses/advanced-css-positioning/0/1Meer...

Webfonts

Webfonts zijn fonts omgezet voor het internet. Nog niet heel lang geleden was je als ontwerper beperkt tot fonts als Verdana of Arial voor je ontwerp. Tegenwoordig kun je met behulp van CSS aparte fonts op je site gebruiken. De meest gangbare… Meer...

Een menu maken in HTML

De meest gebruikte methode om een menu te maken is met behulp van een lijst. De voornaamste reden hiervoor is zoekmachine optimalisatie.  Een lijst op zichzelf is niet bijzonder mooi of leuk om te zien maar met behulp van CSS kun je een zeer mooi… Meer...