5 coole CSS3-effecten waar je meer van zult zien

Advertentie

CSS3 (gecombineerd met de kracht van HTML5) wordt snel ondersteund door alle grote browsers (lees - alles behalve Internet Explorer), dus ik dacht dat het nu een goed moment zou zijn om enkele van de coole CSS-effecten te zien die we kunnen bereiken met behulp van de kracht van je browser en een beetje CSS-code. U zou alle effecten in dit artikel moeten kunnen zien als u de nieuwste Chrome-, Safari- of Firefox-browser gebruikt.

Ten eerste - Wat is CSS?

Als je dit artikel leest omdat je geïntrigeerd bent maar geen idee hebt wat CSS betekent, laat me het dan snel uitleggen. CSS is de codeertaal die wordt gebruikt om webpagina's te versieren. Het staat voor Coplopend Style Sheet, en voegt in feite gewoon stijl en flair toe aan een site. Websites zijn zeker leesbaar zonder hun CSS, maar ze zijn afschuwelijk net zoals alle websites in 1995 waren. Terwijl HTML-bestanden de structuur en tekstuele inhoud van een pagina beschrijven, zorgt de CSS ervoor dat ze worden weergegeven op de manier zoals de ontwerper bedoeld, en bepaal alles van paginalay-out, tekstgrootte en kleuren, en nu een aantal mooie effecten met de introductie van CSS3.

In het verleden zou het bereiken van hetzelfde soort effecten als die beschreven in dit artikel betekenen dat u omvangrijke CSS of zelfs grotere afbeeldingen moest downloaden. Nu kan CSS gewoon aan uw browser beschrijven hoe de pagina eruit moet zien en de browser zal de verwerking afhandelen. Het is alsof ik je de plannen geef om je eigen huis te bouwen in plaats van je het hele huis te verkopen - het is aanzienlijk goedkoper!

Afgeronde hoeken

De code voor afgeronde hoeken is heel eenvoudig:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / border-radius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Schaduw tekst

Hier is de code voor enkele tekstschaduwen:

.box_textshadow {text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

Verlopen

Hier is de code voor CSS-verlopen:

.box_gradient {achtergrondkleur: # 3f9fe3; achtergrondafbeelding: -moz-lineair-verloop (boven, # 3f9fe3, #wit); / * FF3.6 * / background: -moz-linear-gradient (top, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / achtergrond-afbeelding: -ms-linear-gradient (top, # 3f9fe3, #white); / * IE10 * / achtergrondafbeelding: -o-lineair verloop (boven, # 3f9fe3, #wit); / * Opera 11.10+ * / achtergrondafbeelding: -webkit-verloop (lineair, linksboven, linksonder, van (# 3f9fe3) tot (#white)); / * Saf4 +, Chrome * / achtergrondafbeelding: -webkit-linear-gradient (top, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: lineair verloop (bovenaan, # 3f9fe3, #wit); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Rotatie

Hier de code om iets te roteren:

.box_rotate {-moz-transform: rotate (7.5deg); / * FF3.5 + * / -o-transformatie: roteren (7,5 graden); / * Opera 10.5 * / -webkit-transform: rotate (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotate (7.5deg); / * IE9 * / transform: roteren (7,5 graden); filter: progid: DXImageTransform. Microsoft. Matrix (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'auto expand'); zoom: 1; }

Animatie

U heeft de transitiecode zoals deze nodig voor elk element dat u wilt wijzigen. Je zult ook een aantal pseudo CSS-klassen moeten gebruiken (zoals: zweven om eigenschappen te wijzigen die je wilt laten animeren, zoals kleur, grootte of rotatie)

.box_transition {-moz-transition: alle 0,5s gemak; / * FF4 + * / -o-overgang: alle gemak van 0,5 seconden; / * Opera 10.5+ * / -webkit-overgang: alle 0,5s gemak; / * Saf3.2 +, Chrome * / -ms-overgang: alle 0,5s gemak; / * IE10? * / overgang: alle gemak van 0,5 seconden; } 

Cross-browser incompatibiliteit

Hoewel de meeste moderne browsers in sommige opzichten alle CSS3 ondersteunen, hebben sommige nog steeds een iets andere code of hacks nodig om het te laten werken met hun specifieke implementatie van de standaard. In de bovenstaande code ziet u bijvoorbeeld veel gevallen van -moz- of -webkit- die voorafgaan aan enkele van de CSS-eigenschappen, die betrekking hebben op op Mozilla gebaseerde of op Webkit gebaseerde browsers. Het schrijven van deze extra regels kan echter lastig zijn, dus bekijk de css3 generator om ze voor je te schrijven.

Conclusie

Het web wordt een stuk spannender met de nieuwe CSS3- en HTML5-extensies. Toegegeven, we zullen weer een golf van knipperende tekst zien en een hoge verhouding van whizz-bang tot echte inhoud (net zoals we deden toen geanimeerde GIF's werden voor het eerst "ontdekt") maar op de lange termijn zullen we leren hoe we de tools van CSS3 kunnen gebruiken om interessantere websites te maken interfaces. En ja, je kunt het altijd allemaal uitschakelen!

Als u zelf een ontwerper of webontwikkelaar bent, onthoud dan dat CSS3 nooit de enige optie mag zijn. Als uw site niet werkt zonder CSS3, heeft u deze niet correct gebruikt. CSS moet worden gebruikt om de ervaring te verbeteren, niet de programmafunctionaliteit.