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>

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+

Zifp.nl » Tutorials

Simpele CSS3 button met 3D effect

Gebruik je eigen fonts met @font-face