5 coole CSS3-effecten waar je meer van zult zien

CSS3 (gecombineerd met de kracht van HTML5) wordt snel door alle grote browsers ondersteund (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 krachtbron van je browser en een beetje CSS-code. U moet alle effecten in dit artikel kunnen zien als u de nieuwste Chrome-, Safari- of Firefox-browser gebruikt.

Eerste - Wat is CSS?

Als je dit artikel leest omdat je geïntrigeerd bent maar geen idee hebt wat CSS betekent, laten we het me dan snel uitleggen. CSS is de coderingstaal die wordt gebruikt voor het versieren van webpagina's. Het staat voor Cascading Style Sheet, en eigenlijk voegt het gewoon stijl en flair toe aan een site. Websites zijn zeker leesbaar zonder hun CSS, maar ze zijn afschuwelijk net zoals alle websites terug in 1995 waren. Terwijl HTML-bestanden de structuur en tekstuele inhoud van een pagina beschrijven, laat de CSS ze weergeven op de manier die de ontwerper bedoelde, en bepaalt alles van pagina-indeling, tekstgrootte en kleuren, en nu een aantal fancy effecten met de introductie van CSS3.

In het verleden zou het bereiken van dezelfde soort effecten als degene die in dit artikel worden beschreven, het downloaden van omvangrijke CSS of zelfs grotere afbeeldingen hebben betekend. CSS kan nu aan uw browser beschrijven hoe het eruit zou zien dat de pagina eruit zou 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

Het internet is geleidelijk aan 'ronder' geworden, maar nu is dit gestold in CSS3. Kijk eens naar het kader rond deze paragraaf. Het is geen afbeelding - probeer rechts te klikken om het te zien. Pure CSS!

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+ * / grensradius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /

Schaduw tekst

Tekst kan soms heel hard op zichzelf lijken, maar een eenvoudige kleine schaduw helpt echt dingen. Bekijk de schaduw die ik op deze paragraaf heb toegepast.

Hier is de code voor sommige tekstschaduwen:

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

Verlopen

Geen vlakke kleuren of achtergrondverloopafbeeldingen meer, nu kunt u een cool verloop maken met alleen CSS. Helaas heb je een paar regels nodig vanwege de huidige incompatibiliteitsproblemen tussen browsers, maar je kunt de tool gebruiken die ik later zal beschrijven om deze automatisch te genereren.

Hier is de code voor CSS-gradiënten:

.box_gradient background-color: # 3f9fe3; achtergrondafbeelding: -moz-linear-gradient (top, # 3f9fe3, #white); / * FF3.6 * / achtergrond: -moz-lineaire gradiënt (boven, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / achtergrondafbeelding: -ms-linear-gradient (boven, # 3f9fe3, #white); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # 3f9fe3, #white); / * Opera 11.10+ * / achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (# 3f9fe3), tot (#white)); / * Saf4 +, Chrome * / achtergrondafbeelding: -webkit-lineair verloop (bovenaan, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: lineair verloop (boven, # 3f9fe3, #white); filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /

omwenteling

Het is moeilijk om je dit voor te stellen in termen van tekst, maar het kan een aantal leuke ontwerpelementen toevoegen bij het gebruik van bijvoorbeeld afbeeldingen. Nogmaals, merk op dat hoewel deze paragraaf is geroteerd, je nog steeds kunt selecteren en ermee kunt werken omdat het gewone tekst blijft.

Hier de code om iets te draaien:

 .box_rotate -moz-transform: rotate (7.5deg); / * FF3.5 + * / -o-transform: roteren (7.5deg); / * Opera 10.5 * / -webkit-transform: roteren (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: roteren (7.5deg); / * IE9 * / transform: roteren (7.5deg); 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

Oh ja, ik heb het beste bewaard tot het laatst. CSS3 introduceert verschillende vormen van animatie voor elk aantal van de beschreven coole CSS-effecten. In deze alinea heb ik de overgangseigenschap zoals hieronder aangegeven gedefinieerd, evenals een eenvoudige achtergrondkleur en rotatie wanneer u eroverheen beweegt. Als u dat nog niet doet, plaatst u de muisaanwijzer op deze alinea om het effect in actie te zien. Je kunt vrijwel alles animeren!

Je hebt de overgangscode zoals deze nodig voor elk element dat je wilt wijzigen. U moet ook een aantal pseudo-CSS-klassen gebruiken (zoals: hover om eigenschappen te wijzigen die u wilt animeren, zoals kleur, grootte of rotatie)

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

Incorrecte compatibiliteit met de browser

Hoewel de meeste moderne browsers CSS op een bepaalde manier ondersteunen, vereisen sommige nog steeds enkele enigszins andere code of hacks om deze te laten werken met hun specifieke implementatie van de standaard. In de bovenstaande code ziet u bijvoorbeeld veel instanties van -moz- of -webkit- die voorafgaan aan enkele CSS-eigenschappen, die betrekking hebben 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 gaat nog veel spannender worden met de nieuwe CSS3- en HTML5-extensies. Toegegeven, we zullen een nieuwe golf van knipperende tekst en een hoge verhouding van whiz-bang tot echte inhoud zien (net zoals we deden toen geanimeerde GIF's voor het eerst plaatsvonden “ontdekt”) maar op de lange termijn zullen we leren hoe we de tools van CSS3 kunnen gebruiken om interessantere webinterfaces te maken. En hey, je kunt het altijd uitzetten!

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

Ontdek meer over: HTML, HTML5, Programmeren, Webontwikkeling.