Categorie:
CSS »
Simpele CSS3 button met 3D effect
CSS3 bied een heleboel nieuwe gereedschap voor het stylen van een webpagina. CSS3 geeft vooral veel mogelijkheden voor het geven van een 3d look aan je webpagina. Dit maakt CSS3 heel erg geschikt voor gebruik in buttons.
Voor maximale herkenbaarheid moeten buttons net zoals echte knoppen een beetje naar buiten steken. CSS3 geeft ons de mogelijkheid om een illusie van 3D te creëren zonder gebruik te maken van afbeeldingen.
CSS3 effecten die we gaan gebruiken zijn:
- box-shadow
- gradient
HTML, CSS en Javascript vanaf de bodem op
Voor de beginnende web developer heeft Google een reeks video tutorials waarin uitglegd word hoe je een webapplicatie moet maken. In de video tutorials word de basis van HTML, CSS en JavaScript uitgelegd en hoe je deze talen kunt gebruiken voor het maken van een webpagina.
Ook voor de wat meer gevorderden valt er nog het een en het ander te leren uit deze tutorials. Waarbij bij andere tutorials de meeste aandacht uit gaat naar het leren van alle elementen, gaat bij deze tutorial de meeste aandacht naar wat juist gebruik is van je code.
De cursus is in het Engels.
De cursus bestaat uit 4 delen:
- Introductie
- HTML
- CSS
- JavaScript
De bestanden die gebruikt worden in deze Handleiding kun je hier vinden: lab2.zip
Verder »
Google Font Directory
Een paar weken geleden legde ik in dit artikel uit hoe je @font-face kon gebruiken om je eigen fonts op een webpagina te gebruiken. Nu is het gebruiken van andere fonts nog gemakkelijk gemaakt.
Google heeft namelijk een bibliotheek met vrij beschikbare fonts ter beschikking gesteld. Met de Google Font Directory en de Google Font API wil de zoekgigant het gebruik van fonts op webpagina’s gemakkelijker maken.
Op deze pagina kun je zelf je eigen lettertype samenstellen waarbij Google de code genereert die je voor je webpagina kunt gebruiken.
Je kunt natuurlijk ook zelf naar een font toe linken door een link in de head van je HTML te plaatsen:
Daarna kun je deze font gewoon in je CSS gebruiken:
h1 { font-family: 'Cantarell', arial, serif; }Het grote voordeel van deze service is dat je niet zelfs je eigen fonts hoeft te hosten. Ze staan namelijk allemaal op de server van Google die in veel gevallen sneller is dan je eigen server. Ook zijn alle fonts open en vrij te gebruiken zodat je naderhand niet word overvallen door copyright problemen.
Browsers die ondersteunt worden zijn :
- Google Chrome: versie 4.249.4 of hoger
- Mozilla Firefox: versie 3.5 of hoger
- Apple Safari: versie 3.1 of hoger
- Microsoft Internet Explorer: versie 6 of hoger
- Opera versie 10 of hoger
Gebruik je eigen fonts met @font-face
De meeste websites maken gebruik van de zogenaamde web veilige fonts, fonts zoals Arial, Helvetica, Verdana, sans-serif. Deze fonts zijn op iedere computer aanwezig en op die manier veilig om te gebruiken.
Tegenwoordig is het ook mogelijk om gebruik te maken andere fonts. Fonts die je zelf hebt gemaakt of die je van het internet hebt gehaald. Op Fontsquirrel staan veel gratis fonts.
Hoe gebruik je deze fonts nou? Dit gaat heel eenvoudig met behulp van @font-face in CSS.
Laatste reacties