Video: CSS Efecto - 03 PseudoClases @JoseCodFacilito 2025
CSS3-modulerne kan forenkles i 10 kategorier: grænser, baggrunde, skrifttyper, teksteffekter, flere kolonner, overgange, 2D overgange, 3D overgange, animationer og brugergrænseflade. Tag et kort kig på hvert modul for at se, hvad det kan gøre.
Grænser: Grænsemodulet udvider kapaciteterne i grænsekategorien ved at tilføje muligheder for indstilling af grænseradius for at lave buede hjørner, bokseskyggen for at tilføje dropshadows og grænsebilledet for at bruge grafik til stil grænser snarere end at bruge en enkelt farve pr. kant.
Baggrunde: Der er i øjeblikket tre nye tilføjelser til baggrundskategorien med CSS3. Baggrundsstørrelsen er specielt praktisk til at skabe skalerbar grafik. Baggrundsoprindelsen tilbyder tre steder til at placere baggrundsbilleder i forhold til boksemodellen, og baggrundsklipet gør det muligt at klippe baggrundsfarverne til indholdet af en boks frem for kanterne af en boks.
Derudover giver CSS3 dig nu mulighed for at bruge flere baggrundsbilleder til enhver container.
Skrifttyper: I stedet for at sidde fast ved hjælp af websikker skrifttyper til alle dine designs, giver den nye @ font-face-ejendom dig mulighed for at vælge og bruge enhver skrifttype, der er hostet på din webserver. Hvad der sker er a. ttf (True Type Fonts) eller. Otf (OpenType Fonts) fontfil hentes automatisk til brugerens enhed, hvis og når denne skrifttype ikke registreres.
Du har muligvis allerede set en lignende funktion i aktion med websteder, der bruger Google-skrifttyper og Typekit-skrifttyper. Denne stilregel udvider denne mulighed ved at tillade dig at bruge dine egne system skrifttyper. Sørg dog for ikke at bryde ophavsretlige love ved at angive copyright beskyttede skrifttyper!
Teksteffekter: Der er faktisk 11 nye egenskaber i dette modul, men ikke alle har stor browser support. De egenskaber, der for øjeblikket har støtte, er retfærdiggør, overløb, skygge, ordbrud og ordindpakning.
Flere kolonner: Uden at skulle bruge ekstra beholdere eller flyder, kan du nu oprette flere tekstkolonner med de ti forskellige flere kolonneegenskaber. Selvom de fleste arbejder nu, kræver nogle stadig browserspecifikke stilpræfikser. Alligevel er de stadig pæne darn pæne. For de bedste resultater skal du indstille kolonneantalet og mellemrummets bredde.
Overgange: Hold på din hat, du kan nu oprette bevægelse på siden uden animerede gifs, Flash eller JavaScript! Overgange kommer i tre varianter, regelmæssig, 2D og 3D. Med den regelmæssige overgang kan du ændre et eller flere egenskaber af et element, såsom ændring af et objekts bredde i løbet af et bestemt antal sekunder, når det kombineres med povudpseudoklassen.
2D Overgange: Elementerne i dette modul giver dig mulighed for at manipulere 2D-egenskaberne for et element. Brug dem separat eller kombineret til at bevæge, skala, skæv, spin, strække og dreje elementer langs et vandret eller lodret plan. For eksempel kan du gøre en kasse vokse og dreje mens du flytter fra venstre mod højre.
3D-overgange: Som om 2D-overgange ikke var kølige nok, vent indtil du ser, hvad 3D-overgangene gør! Ved hjælp af en metode, der transformerer objektet langs X- og / eller Y-aksen, kan du få dine objekter til at rotere i 3D-rum, hvilket giver seerne mulighed for at se den omvendte "tilbage" -side af et objekt.
Selv om browsersupport er begrænset til mere avancerede transformationer, vil du i sidste ende kunne rotere, skalere og flytte langs X, Y og Z-akserne. Simpelthen kraftfuld.
Animationer: Okay, hvad sker der, når du sætter alle disse nye transformationsteknikker sammen? CSS3 animationer, baby - den slags, der kan erstatte animerede GIF'er, Flash, og endda nogle JavaScript. Al magien sker ved at binde den nye @keyframes-ejendom til en vælger ved at bruge animationsegenskaben med et angivet navn og varighed.
Du kan for eksempel ændre placeringen og baggrundsfarven på et objekt, så objektet ser ud til at formere gennem rummet, og så kan du medtage koden for at gøre animationen omvendt og fortsætte med at løbe uendeligt.
Brugergrænseflade: Med disse nye egenskaber kan du tilføje egenskaber til forskellige objekter, der konverterer dem til interaktive elementer til besøgende på webstedet. Du kan f.eks. Ændre størrelsen på lag og textarea formularfelter, påkalde fanen og piletasterne på et tastatur og oprette en forskydning, der rækker ud over kantkanten.
Nu hvor du har et overblik over de nye moduler, kan du finde ud af mere om, hvad de kan gøre. For eksempel kan du oprette skygger på former og tekst, anvende baggrundsgradienteffekter og flytte dine objekter herfra til der.
