Zifp.nl » CSS

Simpele CSS3 button met 3D effect

Admin — Wed, 03 Nov 2010 21:02:33 +0000

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

Eerst maken we een normale knop:

Code blok

<button class="knop">Button</button>

We geven hem de volgende stijl mee:

Code blok

.knop{
	border: 1px solid #DA7C0C;
	background-color: #f78d1d;
	color: #fef4e9;
	padding: 6px 16px;
	font-size: 13px;
	font-weight:700;
	cursor: pointer;
}

Deze knop ziet er dan als volgt uit:

Doordat ik gebruik maak van cursor: pointer; verandert de muis in een handje wanneer hij over de beweegt. Dit geeft een gebruiker de hint dat hier sprake is van een knop die ingedrukt kan worden. In een goed ontwerp zal dit effect overal aanwezig moeten zijn waarbij er interactie is tussen de gebruiker en de website.

Als eerste geven we de knop een schaduw effect mee:

Code blok

.knop{
	-webkit-box-shadow: #AAA 1px 1px 4px; /*CSS voor webkit browser*/
	-moz-box-shadow: #AAA 1px 1px 4px; /* CSS voor firefox*/
	box-shadow: #AAA 1px 1px 4px; /* officiële CSS voor Opera*/
}

box-shadow creëert een schaduw rondom het gehele object. Eerst geven we een kleur op. #AAA is een lichte kleur grijs zoals een echte schaduw eruit ziet. Met 1px 1px geven we aan dat de schaduw 1px naar onder en 1px naar rechts opschuift. Met 4px wordt aangegeven hoe groot de schaduw word.

Dit geeft een subtiel schaduw effect waardoor het lijkt alsof de knop uit de pagina gelift word:

De volgende stap is het toevoegen van een gradient. Een gradient is een geleidelijk overgang tussen 2 verschillende kleuren.

Voor een 3d effect zijn minimaal 2 gradienten nodig. De eerste moet van boven naar beneden, van licht naar donker lopen. Dit vormt de basis van de knop.

De tweede gradient loopt van boven naar beneden, van donker naar licht. Deze wordt gebruikt wanneer de knop word ingedrukt. Hiervoor maken we gebruik van :active.

Tenslotte kunnen we nog met :hover een gradient toevoegen voor wanneer iemand met de muis over de knop heen beweegt.

We voegen de volgende code voor de gradient toe:

Code blok

.knop{
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
 
.knop:hover{
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top,  #f88e11,  #f06015);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
 
.knop:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#F47A20), to(#FAA51A));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Opmerking: Hier maken we gebruik van filter:. Filter is specifieke code voor Internet Explorer en is geen CSS3. Filter is bruikbaar vanaf Internet Explorer 5.5.

In -webkit-gradient voor webkit browsers, geven we eerst aan van waar tot waar de gradiënt moet lopen. Daarna geven we aan tussen welke 2 kleuren een gradiënt moet gaan lopen.

In -moz-linear-gradient voor Firefox, geven we eerst aan waar de gradiënt moet starten. Optioneel kunnen we een hoek opgeven waarin wordt aangegeven onder welke hoek de gradiënt moet lopen vb. 90deg. Tenslotte geven we de 2 kleuren op waartussen de gradiënt moet lopen.

Er is geen gradiënt ondersteuning voor Opera.

Met: position:relative en top:1px is het mogelijk om nog een extra illusie van indrukken te creëren. De knop beweegt hierdoor iets naar beneden wanneer je hem indrukt.

De uiteindelijk knop zonder :hover en :active effecten ziet er als volgt uit:

De volledige code:

Code blok

<html>
<head>
	<style type="text/css">
	.knop{
		border: 1px solid #DA7C0C;
		background-color: #f78d1d;
		color: #fef4e9;
		padding: 6 16;
		font-size: 13px;
		font-weight:700;
		cursor: pointer;
		-webkit-box-shadow: #AAA 1px 1px 4px;
		-moz-box-shadow: #AAA 1px 1px 4px;
		box-shadow: #AAA 1px 1px 4px;
		background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
		background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
	}
 
	.knop:hover{
		background: #f47c20;
		background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
		background: -moz-linear-gradient(top,  #f88e11,  #f06015);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
	}
 
	.knop:active {
		position: relative;
		top: 1px;
		color: #fcd3a5;
		background: -webkit-gradient(linear, left top, left bottom, from(#F47A20), to(#FAA51A));
		background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
	}
	</style>
</head>
<body>
	<button class="knop">Button</button>
</body>
</html>

HTML, CSS en Javascript vanaf de bodem op

Admin — Tue, 21 Sep 2010 21:44:44 +0000

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

Denk er aan dat je de tutorials fullscreen bekijkt omdat ze anders onleesbaar zijn.

Introductie

HTML

Presentatie:

Meest gebruikte HTML elementen:

Tag

Betekenis

Display

Uitleg

division

block

Met het DIV element kan een deel (division) van een HTML-document worden ingesloten.

er, span

inline

Met het SPAN element kan een beperkt inline deel van een HTML-document worden ingesloten.

t/m

headline 1-6

block

Gebruiken voor een kop van een tekst.

anchor

inline

Gebruiken voor links.

Gebruik het attribuut href=” “> om aan te geven waar je naar toe wil linken.

De volgende CSS pseudo selectors zijn bruikbaar (:visited, :link, :hover).

Standaard CSS opmaak: (text-decoration: underline)

table	block	Tabellen. Niet gebruiken voor opmaak van een pagina.
	unordered list	block	Een lijst waarbij de volgorde onbelangrijk is.
	ordered list	block	Een lijst waarbij de volgorde belangrijk is.
	list item	block	Lijstelementen. Word binnen een of element geplaatst
	definition list	block	Gebruiken als je ergens een definitie van wil geven
	emphasize	inline	Gebruiken voor tekst waar je nadruk op wil leggen Standaard CSS opmaak: (font-style: italic)
	emphasize	inline	Gebruiken voor tekst waar je extra nadruk op wil leggen Standaard CSS opmaak: (font-weight: bold)
	form	block	Een formulier waarin een gebruiker dingen kan invullen
	set of fields	block	De invulvelden die bij een formulier horen.
	field label	inline	Een label die hoort bij uitleg geeft over een input veld van een formulier.

Oefeningen:

CSS

Presentatie:

Walkthrough:

Oefeningen:

JavaScript

Presentatie:

Oefeningen:

Google Font Directory

Admin — Thu, 20 May 2010 18:23:41 +0000

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:

Code blok

<head>
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
</head>

Daarna kun je deze font gewoon in je CSS gebruiken:

Code blok

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

Admin — Wed, 05 May 2010 17:53:48 +0000

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.

Kijk maar naar het voorbeeld:

Code blok

@font-face {
font-family:ColabReg;
src: local("ColabReg.otf") url(fonts/ColabReg.otf) format("opentype");
}

Met font-family geef je aan hoe je font heet. Met url geef je aan waar je, je font hebt staan.
Met format geeft je aan om wat voor type bestand het gaat.
Met local geef je aan dat er eerst gekeken moet worden of de font al op de computer staat voordat deze gedownload moet worden.

Wil je die font dan voor een stuk tekst gebruiken, dan doe je dit net zoals je iedere andere font gebruikt:

Code blok

@font-face {
p{
font-family: "ColabReg", sans-serif;
}

Fonts bestanden die je kan gebruiken zijn OpenType Fonts(otf) en TrueType Fonts (ttf). Deze worden ondersteunt door alle moderne browsers behalve Internet Explorer.

Voor Internet Explorer heb je fonts in het Embeded OpenType (eot) formaat nodig. Fonts kun je bij onlinefontconverter omzetten naar het eot formaat.

Deze zet je er dan als volgt tussen:

Code blok

@font-face {
font-family:ColabReg;
src: url(ColabReg.eot); /* Speciaal voor IE */
src: local("ColabReg.otf") url(fonts/ColabReg.otf) format("opentype");
}

Let op dat de volgorde voor ie belangrijk is. De font voor IE moet bovenaan staan.

Fontface word ondersteunt door: Firefox 3.1+, Safari 3.1+, Opera 10 en IE4+