10 av de kuleste CSS3- og CSS-effektene
Vi vet alle det, og vi alle elsker det, og selvfølgelig vet du sikkert allerede at jeg snakker om CSS og CSS3.
Faktisk bør vi nok ta et øyeblikk til å takke CSS3 før du går videre for å øke hastighetstiden for alle favorittnettene dine. De, hvis de vet hva de gjør, er mer enn sannsynlig å bruke CSS3 i stedet for massevis av bilder for å forbedre brukerbelastningstider, noe som er ganske bra.
Det er et ganske akseptert faktum nå, at vi ganske enkelt ikke trenger bilder for å gjøre alle de tingene vi pleide å trenge dem til. Med CSS3-gradienter, overganger og alle effekter har det egentlig syntes å ha tatt mye av vekten fra skuldrene til våre nettsider, fordi la oss være ærlige-bilder var sikkert veier dem ned.
Ikke misforstå, men CSS3 og CSS kan ikke gjøre alt, men jeg tror at de fleste av oss er klar over begrensningene sine, eller hva som skaper svært kanter av mulighetene.
Vel, i dag er vi her for å finne ut det. Så la oss dykke rett inn i det som sikkert vil være en interessant og fascinerende oppdagelsesreise for alle oss som er fans av CSS3 og CSS.
Merk: Jeg gjør alle disse med antagelsen om at en bruker er på Google Chrome, så vær så glad for alt som er hellig, før du faktisk implementerer disse på nettstedet, bruk de riktige prefiksetene for andre nettlesere. Ikke kopier og lim inn herfra og tenk alt vil fungere perfekt, fordi det kan - men det kan ikke.
Tekstbaserte effekter
anaglyphs
De sier Anaglyphs, selv når de er gjort i CSS3, kan vises i 3D hvis du har noen snazzy beskyttelsesbriller i huset ditt. Det skjønt, jeg er ikke sikker på, men det jeg vet er at det kan se ganske fantastisk ut for bestemte temaer for ulike prosjekter (som et videospill retro tema og lignende).
Denne effekten opprettes ved å kompensere to av de røde grønne og blå fargene (rgb). For å starte ting for denne effekten trenger vi to av de samme ordene, og vi trenger dem begge for å kunne målrettes i CSS, slik at vi kan jobbe med repetisjonen og fargelagien på dem. I dette tilfellet skjønt, i stedet for å legge til unødvendig HTML i vår kode som vi bruker for disse ordene, kan vi bare bruke pseudoklassen ": etter" for å legge til det andre ordet. For å gjøre det vil vi bruke dette eksempelet: forestill deg at vi bruker en H1 for å vise vårt første ord, for eksempel:
Anaglyph
Vi vil da gjøre:
h1:after {content: “Anaglyph”;}Dette vil gi oss den fine repetisjonen, og vil vise: "Anaglyph Anaglyph" på siden. Så, la oss begynne å style dette opp slik at vi kan kaste på noen av den fancy 3D-skjønnheten.
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 */}Bruke RGBA her er veldig viktig fordi det tillater at en alfa gjennomsiktighet settes slik at den overlappede teksten ikke helt vil blokkere teksten under den, og gir oss en fin gjennomsiktighet. Teksten i det etterfølgende pseudoelementet er da helt posisjonert for å være litt motvirket av den underliggende teksten som du kunne se, og det er også veldig viktig.
Sørg for å leke med disse stillingene litt som du vil og teste forskjellige farger, fordi det er mye moro å være her. Men for å fullføre denne effekten opp vi kaster på det røde overlegget, og voila har vi vår anaglyphic effekt.
Tekstgradienter
CSS3-gradienter synes å være alle raseri i disse dager, og med rette. Som vi diskuterte tidligere, var de noe som tidligere kun var tilgjengelig gjennom noe som Photoshop og innebygd bilder på nettstedet ditt. Nå skjønt, kan du gjøre alt gjennom litt av CSS3 wizardry.
Og bemerkelsesverdig, med staver som ikke er så kompliserte på det. Så la oss se hva vi har å tilby her i fontgradientkategorien, og hvordan du kan oppleve noen magi der.
Lineær, topp til bunn:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));Lineær, venstre til høyre:
-webkit-linear-gradient(left, #000000, #FFFFFF);Lineær gradient (med jevne fargestopp):
-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 (plassert):
-webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);Så la oss sette opp et eksempel her, og la oss begynne med en h1.
CSS3 Gradient
La oss da begynne å style det opp med litt 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;Nå, ikke bli forvirret av mengden parenteser som brukes i RGBA-innstillingene, da de ofte kan forvirre selv de mest dygtige utviklerne, og vi vil alle glemme og misplace dem til tider, så husk at vi er alle mennesker .
Men la meg bryte ned hva som skjer her. Her bruker vi et maskebilde som en måte å klippe den synlige delen av elementet i henhold til maskebildeets gjennomsiktighet. Da bruker vi det etterfølgende pseudoelementet til å gjøre en fin tekstskygge på vårt element.
Dette er selvsagt ikke nødvendig for en gradient, men det er en fin måte å spruce opp er hva som skjer, og absolutt lar deg se hvor langt vi kan strekke en enkel gradient. Nå, gå bandy om og lek med alle stiler av gradienter og sørg for at du kommer opp med noe snazzy for ditt neste prosjekt.
Dripping text
En av de få tingene vi svært sjelden trenger, men som faktisk kan tenke er interessant, er å dryppe tekst for å få det til å virke som om det faller fra hverandre med bokstavene intakt. Noen ganger kan dette skyldes at vi er besatt av vampyrer, og at teksten skal bløde det hevnens røde blod, ELLER det kan bare være fordi vi vil at den skal dryppe en vann-esque blå farge mens vi leser ned. Noen ganger har jeg selv sett at folk bruker dette med div-elementer som siden ruller ned fra en overflate til undervanns styling, der undervannsområdene er mye tyngre på deres uskarphet, og derfor synes å være å dryppe litt (eller synes å være under vann).
Syntaxen for dette er ganske enkel, så jeg vil etterlate den komplekse forklaringen ut, men jeg vil gi deg en intro om hvordan du gjør det i en setning. Det er alt basert på gjentakelse. Så la oss si at du vil tørke ned ganske langt, vel, vi bruker omtrent 15 eller så tekstskygger på forskjellige y-sett for å få den effekten. Hvis vi bare ønsker noen, vil vi bare bruke noen få med mindre offsets. Et eksempel ved bruk av 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;}I utgangspunktet kan du beholde dette til du når den ønskede grensen (y-aksen off-set) eller arbeid bakover hvis du vil ha det motsatte, og en mindre offset. Selv om du ikke er sikker på at du ikke bruker dette - fordi jeg sa at dette er en svært uvanlig effekt, og en som jeg er sikker på, er det ikke mange brukssaker til. Men prøv det sikkert, siden gjentatte tekstskygger er veldig interessante å spille med.
Stilig funksjoner
Den sømte utseendet
Hvis du ikke vil bruke Photoshop eller jQuery for å få noen vanvittige sømte effekter på gang, så er CSS3 trolig din neste beste innsats. Nå kan selvfølgelig noen kaste en stiplet kantlinje på et innhold eller en div og si at den er sydd, men den virkelige nøkkelen er å bruke den i tangent med noen andre CSS3-funksjoner som virkelig gjør det skiller seg ut som et stilig tilleggs- på.
Det du virkelig vil gjøre er å kaste på en fin dropshadow med stor spredningsradius. Årsaken er at du vil få bakgrunnsfargen til å bløde over grensen, og for å gjøre at du setter spredningsradiusen (det fjerde elementet) veldig høyt. For eksempel ville jeg gjøre noe sånt som:
.stitched_element {border: 2px dashed #ffffff;box-shadow: 0 0 0 8px #ff0030;}Det vil gi deg en fin effekt at andre mennesker synes å bruke linjer og linjer med unødvendig CSS å skape. Faktisk er dette en effekt der du kanskje vil spille med å lage den i Photoshop først for en stund, bare slik at du forstår teorien bak hva du gjør her.
Jeg har nok tilbrakt 6 timer i Photoshop i den siste måneden, og spilte med sømte effekter, for ærlig talt er de veldig morsomme - og hjelper deg å forstå hva du egentlig prøver å få CSS til å gjøre.
Den fancy ampersand
Du kan spørre deg selv: "Hvor i verden får folk de fantastiske forstørrelsene som jeg ser rundt hele tiden." Du har kanskje selv søkt høyt og lavt for en i alle standardfonter du kjører over, og vel du, som meg selv, har sikkert ikke funnet den før du så noen som skrev om det. Årsaken er at det er en skrifttype som du må lisensiere for å bruke, og dermed foretrekker mange av oss webfontene eller standardalternativer.
En av de store alternativene på et Mac OSX-operativsystem (kommer som standard) er kursiv'Cochin '. Hvis du alternativt foretrekker en Google Web Font, sjekk ut Josefin Sans .
Jeg vet at dette ikke er helt CSS3, men det er et fint lite @ font-face-handling, og i dette tilfellet skal jeg sette deg opp med en lenke for nedlasting av skrifttypen og alt. Nå er dette en Google Web Font slik at de viser deg hvordan du gjør dette på deres side, men det er hyggelig å huske på at du kan kombinere de to attributter for å jobbe med skrifttyper. Og for å lette den tiden har jeg tatt med den i koden her, og dette er direkte til skriften som gir oss en fancy ampersand. Men vær sikker på å leke med kursiv bruk av disse skriftene, da det er her du vanligvis vil få de veldig interessante forstørrelsene.
@font-face {font-family: ‘Josefin Sans’;src: url(https://fonts.googleapis.com/css?family=Josefin+Sans);}Og der går du. Noen notater om bruk skjønt. Som du kan fortelle fra bildet ovenfor, er dette en veldig "fancy" ampersand, og den brukes best når du kontrasterer to skrifttype ansikter, eller i bryllup invitasjoner eller andre "fancy" hendelser. Jeg har brukt den i veldig moderne designstykker også, men føl ikke at du ikke kan bruke den fordi du gjør noe moderne. Jeg sier bare det kan ikke være den perfekte "grunge" løsningen hvis det er det du skal. Jeg må si skjønt, mellom en dristig og en tynn skrifttype, ser denne ampersand vakker ut.
Ensidig bokseskygge
Vi kjenner og elsker bokseskygger, men noen ganger er den typiske skyggen kanskje ikke akkurat det vi vil ha. For eksempel kan vi noen ganger gjøre en realistisk skygge av et bestemt element på vår side og vil at skyggen bare skal vises på en bestemt side. Eller vi kan være interessert i å gjøre et sveverelement, eller et hoppende element, og la oss se det i ansikt - ingenting forsterker skjønnheten i det som en ensidig bokseskygge.
Det vi gjør her er ganske enkelt faktisk, vi bruker negativ spredningsradius for å klemme boksens skygge av en kant. Så for eksempel, la oss forestille oss at vi har et grått bokselement, og det er satt opp med en bredde og høyde på 40px ved 40px. Vår CSS vil se ut som:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}Det vil gi oss akkurat det vi trenger, og i en forenklet kodelinje på det. Som jeg sa, hvis du bruker et belysningselement (eller tema) for å skygge nettstedet ditt i en bestemt retning som om det var et maleri, er dette den perfekte løsningen for deg.
Tilsvarende hopper eller svinger: spretteelementer er bare perfekt for dette. I sistnevnte tilfelle aktiverer du skyggen etter at studeringen har startet, og deaktiverer når den har landet, og så virker wow at du blir en designer allerede.
Ruller over til en CSS Sprite
CSS Sprites er en morsom teknikk, og de fleste av oss er mer enn sannsynlig kjent med dem. Men bare hvis du ikke er, la meg oppsummere hva de er. En CSS Sprite er et stort bilde som inneholder minst to visningsområder, en som er i visningen, og en som kommer til syne ved en slags brukerinteraksjon (vanligvis en musoverflytting).
Nå som du vet hva de er, vil vi faktisk sette opp vår første, og sannsynligvis mest grunnleggende av et CSS-spritbilde. I dette tilfellet bruker vi en koblingsvever, og de to bildene kan være alt du liker, men vi vil kalle det "sprite.png". Vi vil også bruke et element for å huse vår lenke og bildet vårt, derfor bruker vi bakgrunns CSS-syntaks. Så vår kode vil se ut som:
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 hemmeligheten her hva som skjer når brukeren svinger over bildeelementet, og bildet overgår på Y-aksen med en lengde på 50 piksler. Årsaken til det er at det er den nøyaktige høyden på bildet, slik at det ikke blir overlapping eller overlapping under overgangsviften, og det vil se så rent og jevnt ut som mulig.
Dette er den virkelige hemmeligheten til spritbilder, og svinger over handlinger. Uansett det faktum at du kan ha et veldig merkelig eller avlangt bilde, må du ha y (eller x) forskyvningen, avhengig av hva du skal til, på nøyaktig bredden (x) eller høyden (y) av elementet ditt . Rene og enkle og ganske morsomme på det Nå går du og lager dine egne sprites!
lagdeling
Du kan være interessert i layering ting på nettstedet ditt. Det er papir, blader, trær eller mer latterlig ting, som folks ansikter, kan du bruke samme syntaks for å komme unna med det du vil ha. Det er i utgangspunktet et utvalg av boksskygge av det første elementet ditt for å gi den effekten du leter etter.
I dette tilfellet vil vi bruke en enkel div med en grå bakgrunn slik at du kan samle det vi refererer til. Vi vil som vanlig dykke rett inn og deretter forklare etterpå.
.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 litt komplisert, men det er faktisk ganske enkelt. Det som skjer er skygge, lag, skygge, lag og skygge. Så det øverste laget i dette tilfellet er en div med en bakgrunnsfarge på #EEE. Da har vi vår første boksskygge som skygge på det øverste laget, så vises det andre laget (merk #EEE), og da har vi det andre lagets skygge, og deretter det tredje laget (merk igjen #EEE) og så sin skygge.
Ganske enkelt, og med de valgene vi har gjort, gir det en fin stablet eller lagdelt effekt. Igjen, dette kan brukes med noe virkelig, du må bare tinker med justeringen for å få det riktig. Husk at når du lagerlegger, vil du være best å jobbe fra øverste venstre ned til bunnen til høyre med bildene dine eller divs, da det flyter mer naturlig.
funksjonalitet
Responsive design: iPad stil
La oss innse det, responsiv design er utrolig viktig. Og jeg bryr meg ikke om du hater medieforespørsler og fluidnettet, du vil bruke dem om noen år, uansett om du liker dem. Forvent at det skal være en standard i webdesign, spesielt gitt hvor mange forskjellige skjermstørrelser og enhetsoppløsninger som slår på markedet og blir vedtatt med en alarmerende høy hastighet - hele veien fra 27 '' iMacs til iPod Touches og alt i mellom , og de alle surfer på nettet.
De trenger alle en fin opplevelse, og ærlig talt ønsker ingen å lage en annen versjon av deres nettsted for hver enhet, da det bare er for mye arbeid. Vi er opptatt av folk, så vi trenger en løsning for travle mennesker. Det er der media spørringer kommer inn i blandingen. Det jeg vil fokusere på her, er iPad-spesifikke spørringer, men fra dette kan du samle det du trenger for å skyve ut spørringene dine til andre skjermstørrelser. Etter det kommer bare endringen av nettstedets layout til å gjenspeile disse endrede skjermstørrelsene. Så la oss slå ned noen kode og snakke om det etterpå.
@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*/ }Dette burde ikke være for veldig vanskelig å se hva som skjer her, men hva vi gjør, bruker medieforespørslene ' spesifikk syntaks å bryte ned og aktivere visning av nettstedet vårt for å reflektere best for bestemte skjermstørrelser. Så la oss si at vi har en H1 med litt tekst som er dimensjonert på 60px ... vel, det er trolig bra for iMacs og andre store skrivebord, men det vil trolig ikke passe sammen med resten av nettstedet ditt på en mer konservativ iPad-visning. . Så hva vi skal gjøre er inne i koden vår:
@media only screen and (device-width: 768px) { h1: font-size 60px }Og det vil størrelsen ned for iPad-skjermene på riktig måte. Selvfølgelig, disse størrelsene var bare eksempler du ville være best å teste nettstedet ditt for bestemte størrelser og lignende før du fortsetter å fullføre spørringene dine, men dette er en metode som vil spare deg for mye arbeid i det lange løp (og bruken av brukerne ).
MERK: Hvis du er kjent med objektorientert programmering, så er dette noe som kommer til en annen natur, det vi ser på, er i utgangspunktet en "hvis da" erklæring for sortering av nettleserens gjengivelse av displayet på nettstedet vårt. Etter min mening er dette en av de beste tingene å komme ut av CSS, vel ... noensinne.
Nyttig navigering (utvide)
Navigering er ikke alltid perfekt på våre sider, og på grunn av det må vi til og med gå tilbake til tegnebrettet for å tenke på hvordan vi gjør det, og hvis vi kan bruke CSS3 til å hjelpe oss.
La oss forestille oss at vi har en navigeringslinje øverst på nettstedet vårt, men vi vil gjerne legge til flere av en pop når brukere musen over det, la dem få vite at de kan bruke det og at det faktisk er en attraktiv ting for dem å klikk på. Vel, den beste måten å gjøre det på er å kaste på en enkel webkit overgang ved hjelp av enkle metoden. Så hva vi skal gjøre er å gi et eksempel på et "nav" -element.
Selvfølgelig i dette eksemplet må du gjøre hele oppsettet selv, vi ser bare på det eksakte forbigående elementet som vil hjelpe deg i dette tilfellet.
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);}Noen få notater om overgangseiendommer for webkit, slik at du kan bruke det riktig på nettstedet ditt. Det er en trollstokk i utgangspunktet, og tar inn tre verdier. Egenskapen som blir animert, animasjonens varighet og en "timing-funksjon" (dette påvirker animasjonens akselerasjon for en jevnere effekt).
Det er mange måter å jobbe med med disse, og mange ressurser der ute her og her og her . Men jeg håpet å gi deg en innføring i det som er mulig med dem, og motvirker virkelig din tørst etter forståelse, slik at du går ut og eksperimenterer ganske mye. Veldig morsomt å være her.
Og så kommer vi til slutten av vår reise. Bare for å merke seg, dette var ikke en uttømmende eller fullstendig liste på noen måte, men jeg håper det ga interesse for noen av de mer interessante tingene du kan gjøre med CSS og CSS3. Det er en gal og underholdende verden til tider, og til tider en frustrerende.
Tross alt vet vi alle hvordan det er når en designer ikke kan få en div for å vise et barnelement riktig, eller når et tekstelement ikke gjør det som du vil.
Så hold kontakten med favorittdesignerne dine, og vokse en vennekrets i dette rommet du kan kommunisere med og dele disse triksene med frem og tilbake, fordi jeg vet det er hvordan jeg lærte det meste av det jeg har delt i dag, og jeg har å si jeg synes det er det beste du kan gjøre som webdesigner. Twitter er en stor ressurs for det, og søk [dot] twitter en enda bedre en. I mellomtiden vil jeg la deg eksperimentere, men ikke før en siste setning.
Gå ut på ung Padawan og spill med det moroa som venter på deg som webdesigner i den ville verden av stil og design innen CSS (3).
Hva er din favoritt nye CSS3 teknikker? Eller lite brukt / lite kjente CSS teknikker? Gi oss beskjed i kommentarene!