CSS3-teknologi i aktion: Designeksempler

Mens CSS3- og HTML5-teknologier stadig er friske for de fleste organisationer, er der mange trendsætende webudviklere, der tager de nye værktøjer med storm. Dette indlæg vil fremhæve flere eksempler, der udnytter CSS3's fulde potentiale til at levere fremragende design, udseende og fornemmelse. Den første gruppe inkluderer adskillige projekter og eksperimenter fra enkeltpersoner, der forholder sig til CSS3. Du kan også se eksemplerne nedenfor i et galleriformat her.

10 eksempler på CSS3-design

CSS3 Analog Clock af Paul Hayes er hans hurtige projekt og eksperiment, der fungerer i Safari og Google Chrome. Grundlæggende er det arbejdende analoge ur en serie på fire billeder, og ved hjælp af CSS3 til at overlejre, transformere og overføre hændernes bevægelse, er tiden opnået fra en kort JavaScript.

Figur A

Snow Flakes af Natalie Downe bruger eksempler på CSS3-animation, tekstskygge, transformering og nøglerammer til at skabe en side med forsigtigt faldende snefnug. Snowflakes kaldes af et kort script, der kontrollerer antallet af flager, hvor hurtigt de falder, og varigheden af ​​sneen falder. Animationen ses bedst i Google Chrome.

Figur B

Matrix Effect af Girlie Mac integrerer en Katakana-skrifttype med CSS3-nøglerammer, transformer og animationer ved hjælp af webkit-præfikser for at skabe denne demonstration, igen, bedst set i Google Chrome.

Fig

Pure CSS Speech Bubbles af Nicolas Gallagher demonstrerer brugen af ​​CSS3-baggrunde, lineære gradienter, grænseradius og transformer translate for at skabe fantastiske talebobler i et udvalg af varianter.

Figur D

Præget teksteffekt af Analog, et selskab med venner, der opretter websteder, bruger en subtil 1px CSS3 tekst-skyggeeffekt til deres h2, h3, p og li tekst, hvilket skaber en præget teksteffekt.

Figur E

Polaroid's med CSS3 af Zurb er et galleri display ved hjælp af CSS3 transformere og rotere for at gøre billeder til et sæt tilfældigt valgte Polaroid billeder.

Figur F

CSS3 Transitions Gallery af AlexandtheWeb demonstrerer CSS3 overgange, transformere, rotere, grænseradius og maskering for at skabe dette fantastiske eksempel.

Figur G

CSS3 3D-sommerfugl af eletriq demonstrerer brugen af ​​CSS3-perspektiv, transform-oprindelse og transform-stil for at skabe et 3D-sommerfugleobjekt i flugt. Skærm er kun tilgængeligt i Safari.

Figur H

3D geometri med 3D CSS3 transformer af Joe Lambert bruger rotateX (deg), rotateY (deg) akse, overgange og transformVector til at oprette denne 3D terning med rotationskontroller (vises i Safari).

Figur I

CSS3 Time Machine af Joe Critchley bruger CSS3 perspektiv, transformerer og oversætter til at oprette dette billedspil, der ligner Apples Time Machine interface (vises i Safari).

Figur J

© Copyright 2021 | mobilegn.com