10 af de fedeste CSS3 og CSS effekter
Vi kender alle det, og vi elsker alle det, og selvfølgelig ved du sikkert nok allerede, at jeg snakker om CSS og CSS3.
Faktisk bør vi nok tage et øjeblik til at takke CSS3, inden vi går videre for at fremskynde belastningstiderne for alle dine yndlingswebsteder. De, hvis de ved, hvad de laver, bruger mere end sandsynligt CSS3 i stedet for et ton billede for at forbedre brugerens belastningstider, hvilket er ret fantastisk.
Det er en ret accepteret kendsgerning nu, at vi simpelthen ikke behøver billeder for at gøre alle de ting, vi plejede at bruge dem til. Med CSS3-gradienter, overgange og alle virkningerne har det virkelig syntes at have taget meget af vægten fra vores websites skuldre, fordi lad os være ærlige - billeder vejede dem sikkert.
Gør ikke fejl, men CSS3 og CSS kan ikke gøre alt, men ironisk nok tvivler jeg på, at de fleste af os er opmærksomme på sine begrænsninger eller hvad der skubber meget kanter af sine muligheder.
Nå, i dag er vi her for at finde ud af det. Så lad os dykke lige ind i, hvad der sikkert vil være en interessant og fascinerende oplevelsesdag for os alle, der er fans af CSS3 og CSS.
Bemærk: Jeg gør alle disse med formodning om, at en bruger er på Google Chrome, så vær så venlig for kærligheden til alt, hvad der er hellig, før du faktisk implementerer disse på dit websted, brug de korrekte præfikser til andre browsere. Du må ikke kopiere og indsætte herfra og tænke alt fungerer perfekt, fordi det kan - men det kan ikke.
Tekstbaserede effekter
Anaglyphs
De siger Anaglyphs, selv når de er udført i CSS3, kan de vises i 3D, hvis du har nogle snazzy beskyttelsesbriller på dit hus. Men det er jeg ikke sikker på, men det, jeg ved, er, at det kan se temmelig fantastisk ud for bestemte temaer til forskellige projekter (som et videospil retro tema og lignende).
Denne effekt er skabt ved at kompensere to af de røde grønne og blå farver (rgb). For at starte tingene ud for denne effekt har vi brug for to af de samme ord, og vi har brug for dem begge for at kunne målrette sig mod CSS, så vi kan arbejde vores gentagelse og farve magi på dem. I dette tilfælde vil vi i stedet for at tilføje unødvendig HTML til vores tag, som vi bruger til disse ord, kun bruge pseudoklassen ": efter" for at tilføje det andet ord. For at gøre det vil vi bruge dette eksempel: forestil dig, at vi bruger en H1 til at vise vores første ord, såsom:
Anaglyph
Vi vil så gøre:
h1:after {content: “Anaglyph”;}Dette vil give os den dejlige gentagelse, og vil vise: "Anaglyph Anaglyph" på siden. Så lad os nu begynde at style dette op, så vi kan kaste på nogle af den fancy 3D skønhed.
h1 {display: inline;position: relative;letter-spacing: -5px; /* This will push it together giving us a nice 3D vibe */color: rgba(0,0,255,0.5); /* This will give us a blue at 50% opacity */}h1:after {content: “Anaglyph”;position: absolute;left: 8px; top: 6px; /* These are aligning it to be where we’d like relative to the last word */color: rgba (255,0,0,0.5); /* This gives us a red at 50% opacity */}Brug af RGBA her er meget vigtigt, fordi det gør det muligt at indstille en alfa gennemsigtighed, så den overlejrede tekst ikke fuldstændigt vil blokere teksten under den og give os en god gennemsigtighed. Teksten i det efterfølgende pseudoelement er så absolut positioneret til at være lidt modregnet fra den underliggende tekst som du kunne se, og det er også meget vigtigt.
Sørg for at lege med disse positioner lidt som du vil og teste forskellige farver, fordi der er meget sjov at være her. Men for at afslutte denne effekt op kaster vi på det røde overlæg, og voila har vores anaglyphic effekt.
Tekstgradienter
CSS3-gradienter synes at være alle raserier i disse dage, og med rette. Som vi diskuterede tidligere var de noget, der tidligere kun var tilgængeligt gennem noget som Photoshop og indlejring af billeder på dit websted. Nu kan du dog gøre det hele gennem en smule CSS3 wizardry.
Og bemærkelsesværdigt med staver, der ikke er så komplicerede. Så lad os se, hvad vi har at tilbyde her i fontgradientkategorien, og hvordan man kan opbygge noget magi deri.
Lineær, top til bund:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));Lineær, venstre til højre:
-webkit-linear-gradient(left, #000000, #FFFFFF);Lineær gradient (med ensfarvede stop):
-webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));Radial Gradient:
-webkit-radial-gradient(circle, #000000, #FFFFFF);Radial Gradient (placeret):
-webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);Så lad os lave et eksempel her, og lad os begynde med en h1.
CSS3 Gradient
Lad os begynde at sætte det op med lidt CSS3 magi:
h1 {font-size: 100px;font-family: somethingfancy_or_not, arial; /* These two can be anything you like *//* Here’s where the fun starts */-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to (rgba(0,0,0,1)));}h1:after {content: “CSS3 Gradient”;color: #d6d6d6;text-shadow: 1px 2px 5px #000;Nu skal du ikke forveksles med mængden af parenteser, der bruges i RGBA-indstillingerne, da de ofte kan forvirre selv de mest dygtige udviklere, og vi alle vil glemme og forlade dem til tider, så husk bare at vi er alle mennesker .
Men lad mig nedbryde hvad der sker her. Her bruger vi et maskebillede som en måde at klipe den synlige del af elementet i henhold til maskebilledets gennemsigtighed. Så bruger vi det efterfølgende pseudoelement til at gøre en god tekstskygge på vores element.
Dette er selvfølgelig ikke nødvendigt for en gradient, men det er en god måde at spruce op er, hvad der foregår og helt sikkert giver dig mulighed for at se, hvor langt vi kan strække en simpel gradient. Gå nu bandy om og spil med alle stilarter af gradienter og sørg for at du kommer op med noget snazzy til dit næste projekt.
Dripping text
Et af de få ting, vi meget sjældent har brug for, men måske faktisk synes, er interessant, er at dryppe tekst for at få det til at virke som om det falder fra hinanden med bogstaverne intakte. Nogle gange kan det skyldes, at vi er besat med vampyrer og vil have teksten til at bløde det hede røde blod, ELLER det kunne bare være simpelthen fordi vi vil have det til at dryppe en vand-eske blå farve, som vi læser. Nogle gange har jeg endda set folk bruge dette med div-elementer, da siden ruller ned fra en overflade til undervands styling, hvor undervandsområderne er meget tungere på deres sløret og derfor synes at være at dryppe lidt (eller synes at være under vand).
Syntaxen for dette er ret simpelt, så jeg vil forlade den komplekse forklaring - men jeg vil give dig en introduktion til, hvordan man gør det i en sætning. Det er alt baseret på gentagelse. Så lad os sige, at du ønsker at dryppe ned ganske langt, godt, vi vil bruge omkring 15 eller så tekstskygger på forskellige y-off-sæt for at få den effekt. Hvis vi kun ønsker nogle få, så vil vi kun bruge nogle få med mindre forskydninger. Et eksempel på en rød vampirisk effekt ville være:
.drip {color: #EEE;text-shadow: 4px 4px 1px #300000;4px 6px 1px #400000; 4px 8px 1px #500000; /*......and so on, until*/ 4px 60px 5px #FF0000;}Dybest set kan du beholde dette, indtil du når din ønskede grænse (y-aksen off-set) eller arbejde baglæns, hvis du vil have det modsatte, og en mindre forskydning. Selvfølgelig skal du sørge for ikke at overan bruge dette - for som jeg sagde, det er en meget usædvanlig effekt, og en der er sikker på, at der ikke er mange brugssager til. Men prøv det helt sikkert, da gentagne tekstskygger er virkelig interessante at lege med.
Stilfulde funktioner
Den syede look
Hvis du ikke vil bruge Photoshop eller jQuery til at få nogle sindssyge sømme effekter på, så er CSS3 sandsynligvis din næste bedste indsats. Nu kan selvfølgelig enhver kaste en stiplet kant på et indhold eller en div og sige det er syet, men den rigtige nøgle er at bruge den i tangent med et par andre CSS3-funktioner, der virkelig gør det skiller sig ud som en stilfuld add- på.
Det du virkelig gerne vil gøre er at smide på en dejlig dropshadow med en stor spredningsradius. Årsagen er, at du vil have baggrundsfarven til at bløde over grænsen, og for at gøre det, sætter du spredningsradiusen (det fjerde element) virkelig højt. For eksempel ville jeg gøre noget som:
.stitched_element {border: 2px dashed #ffffff;box-shadow: 0 0 0 8px #ff0030;}Det vil give dig en god effekt, at andre mennesker synes at bruge linjer og linjer med unødvendig CSS til at skabe. Faktisk er dette en effekt, hvor du måske vil spille med at skabe det i Photoshop først et stykke tid, bare for at du forstår teorien bag, hvad du gør her.
Jeg har sikkert brugt 6 timer i Photoshop i den seneste måned med at spille med sømte effekter, fordi de ærligt er meget sjove - og hjælper dig med at forstå, hvad du præcist forsøger at få CSS til at gøre.
Den fancy ampersand
Du kan måske spørge dig selv: "Hvor i verden får folk de fantastiske forstørrelser, som jeg ser rundt hele tiden." Du har måske lige søgt højt og lavt for en i alle de standard skrifttyper, du løber over, og godt du, som mig selv, har sikkert ikke fundet den, før du så nogen skrive om det. Årsagen er, at det er en skrifttype, som du skal licensere for at bruge, og som en del af os foretrækker web skrifttypen eller standardalternativerne.
En af de store alternativer på et Mac OSX-operativsystem (kommer som standard) er kursivet 'Cochin'. Hvis du alternativt foretrækker en Google Web skrifttype, skal du tjekke ud Josefin Sans .
Jeg ved, at dette ikke er helt CSS3, men det er en dejlig lille @ font-face-handling, og i dette tilfælde vil jeg sætte dig op med et link til downloading af skrifttypen og alting. Nu er det en Google Web skrifttype, så de viser dig, hvordan du gør dette på deres side, men det er dejligt at huske på, at du kan kombinere de to attributter til at arbejde med skrifttyper. Og for at lette den tid har jeg medtaget det i koden her, og det er direkte til skrifttypen, der giver os en fancy amperand. Men vær sikker på at lege med kursiv brug af disse skrifttyper, da det er her, hvor du typisk får de rigtig interessante forstærkninger.
@font-face {font-family: ‘Josefin Sans’;src: url(https://fonts.googleapis.com/css?family=Josefin+Sans);}Og der går du. Et par noter om brugen dog. Som du kan fortælle fra billedet ovenfor, er dette en meget fancy 'ampersand' og den bruges bedst til kontrast til to skrifttype ansigter eller i bryllup invitationer eller andre 'fancy' begivenheder. Jeg har også brugt det i meget moderne designstykker, men så føler du ikke, at du ikke kan bruge det, fordi du gør noget moderne. Jeg siger bare, det kan ikke helt være den perfekte 'grunge'-løsning, hvis det er hvad du skal hen. Jeg må dog sige mellem en fed og tynd skrifttype, at denne ampersand ser smuk ud.
Ensidet box-skygge
Vi kender alle og elsker boksskygger, men nogle gange er den typiske skygge måske ikke præcis, hvad vi vil have. For eksempel kan vi undertiden lave en realistisk skygge af et bestemt element på vores websted og ønsker, at skyggen kun skal vises en bestemt side. Eller vi kan være interesserede i at lave et svæveelement eller et hoppende element og lad os se det i øjnene - intet forstærker skønheden i det som en ensidig bokseskygge.
Hvad vi gør her er ganske simpelt faktisk, vi vil bruge negativ spredningsradius til at klemme boksens skygge ud af den ene kant. Så lad os f.eks. Forestille os, at vi har et gråt kasseelement, og det er opstillet med en bredde og højde på 40 px ved 40 px. Vores CSS ville se ud:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}Det vil give os præcis det, vi har brug for, og i en forenklet kodelinje. Som jeg sagde, hvis du bruger et belysningselement (eller tema) til at skygge dit websted i en bestemt retning, som om det var et maleri, er dette den perfekte løsning for dig.
Tilsvarende hopper eller svinger: hoppe elementer er bare perfekt til dette. I sidstnævnte tilfælde skal du aktivere skyggen, efter at studien er startet, og deaktivere, når den er landet, og så wow synes du bliver til en designer allerede.
Rolling over til en CSS Sprite
CSS Sprites er en sjov teknik, og de fleste af os er mere end sandsynligt bekendt med dem. Men bare hvis du ikke er det, lad mig opsummere hvad de er. En CSS Sprite er et stort billede, der indeholder mindst to visningsområder, en der er inden for synsvinklen og en, der kommer til syne ved en form for brugerinteraktion (typisk en musepude).
Nu hvor du ved, hvad de er, vil vi faktisk oprette vores første og sandsynligvis mest basale af et CSS sprite billede. I dette tilfælde bruger vi en link svever, og de to billeder kan være alt, hvad du vil, men vi kalder det "sprite.png". Vi vil også bruge et element til at huse vores link og vores billede, derfor bruger vi baggrunds CSS-syntaksen. Så vores kode vil se ud:
a {display: block;background: url(sprite.png) no-repeat;height: 50px /*Example that is needed for the hover explanation*/width: /*the appropriate width here*/}a:hover {background-position: 0 -50px;}Som du kan se, er den virkelige hemmelighed her, hvad der sker, når brugeren svæver over billedelementet, og billedet overgår på Y-aksen med en længde på 50 pixel. Årsagen til det er, at det er den nøjagtige højde af billedet, så der bliver ingen overlejring eller overlapning under overgangsvægeren, og det vil se så rent og glat ud som muligt.
Dette er den virkelige hemmelighed af sprite-billeder og svinge over handlinger. Uanset at du måske har et meget mærkeligt eller aflangt billede, skal du have y (eller x) forskydningen afhængigt af hvad du skal hen til, på præcis bredden (x) eller højden (y) af dit element . Rene og enkle og ret sjove på det Nu skal du lave og lave dine egne sprites!
lagdeling
Du kan være interesseret i layering ting på dit websted. Det er papir, blade, træer eller det mere latterlige, som folkens ansigter, kan du bruge den samme syntaks til at komme væk med det, du vil have. Det er dybest set et udvalg af boksskygge uden for dit første element for at give den 'effekt', du leder efter.
I dette tilfælde bruger vi en simpel div med en grå baggrund, så du kan samle det, vi refererer til. Vi vil som normalt dykke lige ind og derefter forklare bagefter.
.layering {background: #EEE;box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -4px #EEE, 0 10px 2px -5px rgba(0,0,0,0.15), 0 20px 0 -11px #EEE, 0 20px 1px -8px rgba(0,0,0,0.15);}Det vi ser på kan virke lidt kompliceret, men det er faktisk ret simpelt. Hvad der sker er skygge, lag, skygge, lag og skygge. Så det øverste lag i dette tilfælde er en div med en baggrundsfarve på #EEE. Så har vi vores første bokseskygge som skygge på det øverste lag, så vises det andet lag (bemærk #EEE), og så har vi det andet lags skygge, og så det tredje lag (noter igen #EEE) og så dens skygge.
Ganske enkelt, og med de valg, vi har lavet, giver det en god stablet eller lagdelt effekt. Igen kan dette bruges med noget rigtigt, du skal bare tinker med justeringen for at få det rigtigt. Husk dog, at når du laver lag, vil du være bedst at arbejde fra øverste venstre ned til bunden til højre med dine billeder eller divs, da det strømmer mere naturligt.
Funktionalitet
Responsivt design: iPad stil
Lad os se det, responsivt design er utrolig vigtigt. Og jeg er ligeglad med, hvis du hader medieforespørgsler og flydende net, du vil bruge dem om et par år, uanset om du kan lide dem. Forvent at det er en standard i webdesign, især i betragtning af hvor mange forskellige skærmstørrelser og enhedsopløsninger der rammer markedet og vedtages med en alarmerende høj hastighed - hele vejen fra 27 '' iMacs til iPod Touches og alt imellem , og de kigger alle på internettet.
De har alle brug for en god oplevelse, og ærligt, ingen ønsker at lave en anden version af deres websted til hver enhed, da det bare er for meget arbejde. Vi er optaget af folk, så vi har brug for en løsning for travle mennesker. Det er her, hvor medierne spørger ind i blandingen. Hvad jeg vil fokusere på her, er iPad-specifikke forespørgsler, men herfra kan du samle, hvad du skal bruge til at skubbe dine forespørgsler til andre skærmstørrelser. Derefter kommer kun ændringen af dit websteds layout til at afspejle disse ændrede skærmstørrelser. Så lad os downloade nogle kode og snakke om det bagefter.
@media only screen and (device-width: 768px) { /*General layouts*/ }@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {/*Portrait*/ }@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /*Landscape*/ }Det bør ikke være for meget vanskeligt at se, hvad der sker her, men hvad vi gør, bruger mediernes forespørgsler ' specifik syntaks at nedbryde og gøre det muligt for visning af vores hjemmeside at afspejle bedst for bestemte skærmstørrelser. Så lad os sige, at vi har en H1 med en smule tekst, der er dimensioneret til 60px. Nå, det er nok fint for iMacs og andre store desktops, men det vil sandsynligvis ikke passe til resten af dit websted på en mere konservativ iPad-visning . Så hvad vi vil gøre er inde i vores kode skriv:
@media only screen and (device-width: 768px) { h1: font-size 60px }Og det vil størrelse det ned for iPad skærme passende. Selvfølgelig var disse størrelser kun eksempler, du ville være bedst at teste dit websted til bestemte størrelser og så videre, før du fortsætter med at færdiggøre dine forespørgsler, men det er en metode, der vil spare dig for et stykke arbejde i det lange løb (og brugernes voldshandling ).
BEMÆRK: Hvis du er bekendt med objektorienteret programmering, så er det noget, der kommer til anden natur. Hvad vi ser på, er i grunden en "hvis da" erklæring for sortering for vores browserens gengivelse af vores websteds display. Efter min mening er dette en af de bedste ting at komme ud af CSS, godt ... nogensinde.
Nyttig navigation (udvidende)
Navigation er ikke altid perfekt på vores websteder, og på grund af det nogle gange skal vi gå tilbage til tegnebrættet for at genoverveje, hvordan vi gør det, og hvis vi kan bruge CSS3 til at hjælpe os.
Lad os forestille os, at vi har en navigationslinje øverst på vores hjemmeside, men vi vil gerne tilføje flere af en pop, når brugere muserer over det, så de ved, at de kan bruge det, og at det faktisk er en attraktiv ting for dem at Klik på. Nå, den bedste måde at gøre det på er at kaste på en simpel webkit-overgang ved hjælp af den lette metode. Så hvad vi vil gøre er at give et eksempel på et "nav" -element.
Selvfølgelig i dette eksempel bliver du nødt til at gøre alt for dig selv, vi kigger bare på det nøjagtige overgangselement, der vil hjælpe dig i dette tilfælde.
nav a {-webkit-transition: width 0.15s ease;}eller
nav a {-webkit-transition: all .2 ease-in-out; } /* based on your preference for anims obviously */nav a:hover {-webkit-transform: scale(1.1);}Et par noter om webkit overgangsejendomme, så du kan bruge det korrekt på dit websted. Det er i bund og grund en tryllestav og indtager tre værdier. Egenskaben, der bliver animeret, animationens varighed og en 'timing-funktion' (dette påvirker animationsaccelerationen for en jævnere effekt).
Der er mange måder at gå på at arbejde med disse, og der er mange ressourcer derude her og her og her . Men jeg håbede at give dig et indblik i, hvad der er muligt med dem, og modvirker virkelig din tørst efter forståelse, så du går ud og eksperimenterer en hel del. Meget sjovt at være her.
Og så kommer vi til slutningen af vores rejse. Bare for at bemærke, at dette ikke var en udtømmende eller fuldstændig liste på nogen måde, men jeg håber, at det udgjorde din interesse for nogle af de mere interessante ting, du kan gøre med CSS og CSS3. Det er til tider en skør og underholdende verden, og til tider en frustrerende.
Når alt kommer til alt ved vi, hvordan det er, når en designer ikke kan få en div til at vise et barnelement korrekt, eller når et tekstelement ikke rigtig gør hvad du vil have det til.
Så hold kontakten med dine yndlingsdesignere og vokse en vennekreds i dette rum, som du kan kommunikere med og dele disse tricks med frem og tilbage, fordi jeg ved det, hvordan jeg lærte det meste af det jeg har deltaget i dag, og jeg har at sige, jeg synes det er det bedste, du kan gøre som webdesigner. Twitter er en stor ressource til det, og søge [dot] twitter en endnu bedre. I mellemtiden vil jeg lade dig eksperimentere, men ikke før en sidste sætning.
Gå ud på den unge Padawan og spil med det sjov, der venter dig som webdesigner i den vilde verden af stil og design inden for CSS (3).
Hvad er dine yndlings nye CSS3 teknikker? Eller lidt brugte / mindre kendte CSS teknikker? Lad os vide i kommentarerne!