10 av de coolaste CSS3- och CSS-effekterna
Vi vet alla det och vi alla älskar det, och självklart redan nu vet du förmodligen redan att jag pratar om CSS och CSS3.
Egentligen borde vi noga ta ett ögonblick tacka CSS3 innan vi går längre för att påskynda belastningstiderna för alla dina favoritplatser. De, om de vet vad de gör, brukar använda CSS3 istället för tonvis av bilder för att förbättra användartidstider, vilket är ganska bra.
Det är ett ganska accepterat faktum att vi helt enkelt inte behöver bilder för att göra allt vi brukade behöva. Med CSS3-gradienter, övergångar och alla effekter har det verkligen verkade ha tagit mycket av tyngden på våra hemsidor, därför att vi är ärliga - bilder väger säkert ner dem.
Får inte fel, men CSS3 och CSS kan inte göra allt, men jag tvivlar nog på att de flesta av oss är medvetna om sina begränsningar eller vad som pressar själva kanterna på sina möjligheter.
Tja, idag är vi här för att ta reda på det. Så låt oss dyka in i det som säkert kommer att bli en intressant och fascinerande upptäckningsresa för oss alla som är fans av CSS3 och CSS.
Obs! Jag gör alla dessa med antagandet om att en användare är på Google Chrome, så varför kärleken till allt som är heligt innan du faktiskt implementerar dessa på din webbplats använder lämpliga prefix för andra webbläsare. Kopiera inte och klistra in härifrån och tänk att allt fungerar bra, för det kan - men det kanske inte.
Textbaserade effekter
anaglyphs
De säger Anaglyphs, även om de görs i CSS3, kan visas i 3D om du har några snygga glasögon i ditt hus. Men det är jag inte säker på, men det jag vet är att det kan se ganska häftigt för vissa teman för olika projekt (till exempel ett retrospel för videospel och liknande).
Denna effekt skapas genom att motverka två av de röda gröna och blåa färgerna (rgb). För att starta saker för denna effekt behöver vi två av samma ord, och vi behöver dem båda för att kunna riktas in i CSS, så att vi kan arbeta vår repetition och färgmagi på dem. I det här fallet, i stället för att lägga onödig HTML i vår tagg som vi använder för dessa ord, kan vi bara använda pseudoklassen ": efter" för att lägga till det andra ordet. Så för att göra det kommer vi att använda detta exempel: tänk att vi använder en H1 för att visa vårt första ord, till exempel:
Anaglyph
Vi ska då göra:
h1:after {content: “Anaglyph”;}Detta ger oss den fina repetitionen och kommer att visa: "Anaglyph Anaglyph" på sidan. Så, nu börjar vi utforma det här så att vi kan kasta på några av den fina 3D-skönheten.
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 */}Att använda RGBA här är väldigt viktigt eftersom det gör det möjligt att ställa in en alfabetisk genomskinlighet så att den överlagrade texten inte helt blockerar texten under den och ger oss en fin öppenhet. Texten i det efterföljande pseudoelementet är då absolut positionerat för att vara något motsatt från den underliggande texten som du kan se, och det är också mycket viktigt.
Var noga med att leka med dessa positioner lite som du vill och testa olika färger, för det finns mycket kul att vara här. Men för att avsluta denna effekt upp vi kasta på det röda överdraget, och voila har vi vår anaglyphic effekt.
Textgradienter
CSS3-gradienterna verkar vara alla raserier dessa dagar, och med rätta. Som vi diskuterade tidigare var det något som tidigare endast var tillgängligt genom något som Photoshop och inbäddning av bilder på din webbplats. Nu kan du dock göra det hela genom lite CSS3 wizardry.
Och noterat, med stava som inte är för komplicerade i det. Så låt oss se vad vi har att erbjuda här i typsnittet gradientkategori, och hur man kan räkna upp lite magi däri.
Linjär, uppifrån och nedåt:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));Linjär, vänster till höger:
-webkit-linear-gradient(left, #000000, #FFFFFF);Linjär Gradient (med jämn färgstopp):
-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 (positionerad):
-webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);Så låt oss skapa ett exempel här, och låt oss börja med en h1.
CSS3 Gradient
Låt oss börja utforma den med lite 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 förväxlas inte med mängden parentes som används i RGBA-inställningarna, eftersom de ofta kan förvirra även de mest skickliga utvecklarna, och vi kommer alla att glömma och förskjuta dem ibland, så kom ihåg att vi är alla människor .
Men låt mig bryta ner vad som händer här. Här använder vi en maskbild som ett sätt att klippa den synliga delen av elementet enligt maskbildens transparens. Då använder vi efter pseudo-elementet att göra en fin textskugga på vårt element.
Det här är naturligtvis inte nödvändigt för en gradient, men det är ett bra sätt att spruce upp är vad som händer och låter dig verkligen se hur långt vi kan sträcka en enkel gradient. Nu går bandy om och spelar med alla stilar av gradienter och se till att du kommer upp med något snyggt för ditt nästa projekt.
Dripping text
En av de få saker som vi väldigt sällan behöver men kanske faktiskt tycker är intressant är att droppa text så att det verkar som om det faller ihop med bokstäverna intakta. Ibland kan det bero på att vi är besatta av vampyrer och vill att texten blöder det hämnas röda blodet, ELLER det kan bara vara helt enkelt för att vi vill att det ska droppa en vatten-esque blå färg när vi läser ner. Ibland har jag även sett att folk använder detta med div-element, eftersom sidan rullar ner från en yta till undervattensformning, där undervattensområdena är mycket tungare på deras suddighet och därför verkar vara droppande lite (eller verkar vara under vatten).
Syntaxen för det här är ganska enkelt, så jag lämnar den komplexa förklaringen ut, men jag kommer att ge dig ett intro om hur man gör det i en mening. Det bygger på repetition. Så låt oss säga att du vill droppa ner ganska långt, ja vi skulle använda ungefär 15 eller så textskuggor på olika y-uppsättningar för att få den effekten. Om vi bara vill ha några, så skulle vi bara använda några med mindre förskjutningar. Ett exempel som använder en röd vampirisk effekt skulle vara:
.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 grund och botten kan du behålla detta tills du når den önskade gränsen (y-axeln frånkopplad) eller arbeta bakåt om du vill ha det motsatta och en mindre förskjutning. Men var noga med att inte överanvända detta - för som jag sa det här är en mycket ovanlig effekt och en som jag är säker på, det finns inte massor av användningsfall för. Men försök med det, eftersom upprepade textskuggor är väldigt intressanta att spela med.
Snygga funktioner
Den sydda utseendet
Om du inte vill använda Photoshop eller jQuery för att få några galen sysade effekter pågår, är CSS3 förmodligen din nästa bästa satsning. Nu kan det självklart vem som helst kasta en streckad gräns på en del innehåll eller en div och säga att den är sysatt, men den verkliga nyckeln är att använda den i tangent med några andra CSS3-funktioner som verkligen gör det tydligt som en snygg add- på.
Vad du verkligen vill göra är att kasta på en snygg droppskugga med stor spridradius. Anledningen är att du vill få bakgrundsfärgen att blöda över gränsen, och för att göra det ställer du in radialraden (det fjärde elementet) riktigt högt. Till exempel skulle jag göra något som:
.stitched_element {border: 2px dashed #ffffff;box-shadow: 0 0 0 8px #ff0030;}Det ger dig en bra effekt att andra människor verkar spendera linjer och rader av onödig CSS att skapa. Faktum är att det här är en effekt där du kanske vill spela med att skapa den i Photoshop först ett tag, bara för att du förstår teorin bakom vad du gör här.
Jag har antagligen spenderat 6 timmar i Photoshop under den senaste månaden och spelade med stygna effekter, för att de är riktigt roliga och hjälper dig att förstå vad exakt du försöker få CSS att göra.
Den snygga ampersanden
Du kanske frågar dig själv: "Var i världen får folk de fantastiska ampersands som jag ser runt hela tiden." Du kan ha sökt högt och lågt för en i alla standardfonter du kör över, och du, som jag själv, har förmodligen inte hittat det förrän du såg någon som skrev om det. Anledningen är att det är ett teckensnitt som du måste licensiera för att kunna använda, och därigenom föredrar många oss webbfont eller standardalternativ.
Ett av de stora alternativen på ett Mac OSX-operativsystem (kommer som standard) är kursiv "Cochin". Om du alternativt föredrar en Google Web-teckensnitt, kolla in Josefin Sans .
Jag vet att detta inte är riktigt CSS3, men det är en trevlig liten @ font-face-åtgärd och i det här fallet kommer jag att sätta upp dig med en länk för nedladdning av teckensnittet och allt. Nu är det en Google Web Font så att de visar dig hur du gör det på deras sida, men det är trevligt att komma ihåg att du kan kombinera de två attributen för att arbeta med teckensnitt. Och för att underlätta den tiden har jag tagit med den i koden här, och det här är direkt till teckensnittet som ger oss en fin ampersand. Men var noga med att spela med kursiv användning av dessa teckensnitt, eftersom det är där du vanligtvis kommer att få de riktigt intressanta användarna.
@font-face {font-family: ‘Josefin Sans’;src: url(https://fonts.googleapis.com/css?family=Josefin+Sans);}Och där går du. Några anteckningar om användning men. Som du kan berätta från bilden ovan är detta en väldigt "fancy" ampersand och den används bäst vid kontrasterande två teckensnitt, eller i bröllopsinbjudningar eller andra "fancy" händelser. Jag har använt den i mycket moderna designstycken också, men känner inte att du inte kan använda den eftersom du gör något modernt. Jag säger bara att det inte är rätt att vara den perfekta "grunge" -lösningen om det är vad du ska göra för. Jag måste dock säga, mellan en djärv och tunn typsnitt, ser denna ampersand vacker ut.
Ensidig boxskugga
Vi känner alla och älskar boxskuggor, men ibland kan den typiska skuggan inte vara exakt vad vi vill ha. Till exempel kan vi ibland göra en realistisk skuggning av ett visst element på vår webbplats och vill att skuggan bara ska visas en specifik sida. Eller vi kan vara intresserade av att göra ett svängelement eller ett studsningselement och låt oss möta det - ingenting förstärker skönheten i det som en ensidig boxskugga.
Vad vi gör här är ganska enkelt faktiskt, vi kommer att använda negativ spridningsradie för att klämma ihop boxskuggan av en kant. Så låt oss föreställa oss att vi har ett grått lådelement och det är upprättat med en bredd och höjd på 40px med 40px. Vår CSS skulle se ut:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}Det kommer att ge oss exakt vad vi behöver, och i en förenklad kodlinje. Som om du använder ett belysningselement (eller tema) för att skugga din webbplats i en specifik riktning som om det var en målning, är det här den perfekta lösningen för dig.
På samma sätt är studsning eller svängning: studsningselementen perfekt för detta. I det senare fallet aktiverar du skuggan efter att studsen har startat, och avaktiverar när den har landat, och sedan verkar wow att du blir en designer redan.
Rullar över till en CSS Sprite
CSS Sprites är en rolig teknik, och de flesta av oss är mer än troligt bekanta med dem. Men bara om du inte är, låt mig sammanfatta vad de är. En CSS Sprite är en stor bild som innehåller minst två visningsområden, en som ligger inom utsikten och en som syns på någon typ av användarinteraktion (vanligtvis en muspekare).
Nu när du vet vad de är ska vi faktiskt skapa vår första och förmodligen mest grundläggande av en CSS-spritbild. I det här fallet använder vi en länkhuvud, och de två bilderna kan vara vad som helst, men vi kallar det "sprite.png". Vi kommer också att använda ett element för att hysa vår länk och vår bild, det är därför vi använder bakgrunds CSS-syntaxen. Så kommer vår kod att se ut:
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 är den verkliga hemligheten här vad som händer när användaren svävar över bildelementet och bilden övergår på Y-axeln med en längd av 50 pixlar. Anledningen till det är att det är den exakta höjden på bilden, så det blir ingen överlappning eller överlappning under övergångsväven, och det kommer att se så rent och smidigt ut som möjligt.
Detta är den verkliga hemligheten av spritbilder, och svänger över handlingar. Oavsett det faktum att du kan ha en mycket konstig eller avlång bild måste du ha y (eller x) förskjutningen, beroende på vad du ska för, precis vid bredden (x) eller höjden (y) av ditt element . Ren och enkel och ganska kul på det Nu går och gör dina egna sprites!
skiktning
Du kanske är intresserad av att lägga på saker på din webbplats. Var det papper, löv, träd eller mer löjligt, som folkens ansikten, kan du använda samma syntax för att komma undan med det du vill ha. Det är i grund och botten ett urval av boxskugga av ditt första element för att ge den effekt du letar efter.
I det här fallet kommer vi att använda en enkel div med en grå bakgrund så att du kan samla vad vi hänvisar till. Vi kommer som vanligt dyka in och förklara därefter.
.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 tittar på kan verka lite komplicerat, men det är faktiskt ganska enkelt. Det som händer är skugga, lager, skugga, lager och skugga. Så det översta lagret är i detta fall en div med en bakgrundsfärg på #EEE. Sedan har vi vår första boxskugga som skugg på det översta lagret, då visas det andra lagret (notera #EEE), och sedan har vi det andra skiktets skugga och sedan det tredje lagret (notera igen #EEE) och sedan dess skugga.
Ganska enkelt, och med de val vi har gjort ger det en fin staplad eller lagrad effekt. Återigen, det här kan användas med någonting egentligen, du måste bara tinker med justeringen för att få det rätt. Kom ihåg att när du lägger på lager kommer du att vara bäst att arbeta längst upp till vänster ner till höger med dina bilder eller divs, eftersom det flyter mer naturligt.
Funktionalitet
Responsiv design: iPad stil
Låt oss möta det, lyhörd design är oerhört viktigt. Och jag bryr mig inte om du hatar mediefrågor och fluidnät, du kommer att använda dem om några år oavsett om du gillar dem. Förvänta dig att det är en standard i webbdesign, särskilt med tanke på hur många olika skärmstorlekar och enhetsupplösningar som slår på marknaden och antas med en alarmerande hög hastighet - hela vägen från 27 '' iMacs till iPod Touches och allt däremellan , och de surfar på nätet.
De behöver alla en trevlig upplevelse, och det är uppriktigt ingen som vill göra en annan version av deras webbplats för varje enhet, eftersom det bara är för mycket arbete. Vi är upptagna människor så vi behöver en lösning för upptagna människor. Det är där mediafrågor kommer in i mixen. Vad jag kommer att fokusera på här är iPadspecifika frågor, men här kan du samla vad du behöver för att driva dina frågor till andra skärmstorlekar. Därefter kommer det bara att ändra din webbplatss layout för att återspegla dessa ändrade skärmstorlekar. Så låt oss släppa ner en kod och prata om det efteråt.
@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 borde inte vara för mycket svårt att se vad som händer här, men det som vi gör använder mediefrågorna " specifik syntax att bryta ner och möjliggöra visning av vår hemsida att reflektera bäst för specifika skärmstorlekar. Så låt oss säga att vi har en H1 med lite text som är storlek på 60px ... ja det är nog bra för iMacs och andra stora stationära datorer, men det kommer sannolikt inte att passa med resten av din webbplats på en mer konservativ iPad-vy . Så vad vi ska göra är inne i vår kod skriva:
@media only screen and (device-width: 768px) { h1: font-size 60px }Och det kommer att stega ner för iPad skärmarna på lämpligt sätt. Naturligtvis var dessa storlekar bara exempel du skulle vara bäst att testa din webbplats för specifika storlekar och så vidare innan du går vidare för att slutföra dina frågor, men det här är en metod som sparar dig ett stort antal jobb på lång sikt (och användarens uppror ).
OBS! Om du är bekant med objektorienterad programmering så är det något som kommer att bli andra naturen, det vi tittar på är i grunden ett "om då" uttalande av sorter för vår webbläsares återgivning av vår webbplatss display. Enligt min åsikt är detta en av de bästa sakerna att komma ut ur CSS, ja ... någonsin.
Användbar navigering (expanderande)
Navigering är inte alltid perfekt på våra sidor, och på grund av det behöver vi ibland gå tillbaka till ritbordet för att ompröva hur vi gör det och om vi kan använda CSS3 för att hjälpa oss.
Låt oss föreställa oss att vi har en navigeringsfält på toppen av vår hemsida, men vi skulle vilja lägga till mer av en pop när användarna muspekar över det, så att de vet att de kan använda det och att det faktiskt är en attraktiv sak för dem att Klicka på. Tja, det bästa sättet att göra det skulle vara att kasta på en enkel webkit övergång med hjälp av enkel metod. Så vad vi ska göra är att ge ett exempel på ett "nav" -element.
Självklart i det här exemplet kommer du att behöva göra all uppställning själv, vi tittar bara på det exakta övergående elementet som skulle hjälpa dig i det här fallet.
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);}Några anteckningar om överföringsegenskaper för webkit så att du kan använda den ordentligt på din webbplats. Det är en trollsticka i princip och tar in tre värden. Egenskapen som animeras, animationens varaktighet och en "timing-funktion" (detta påverkar animationsaccelerationen för en jämnare effekt).
Det finns många sätt att arbeta med, och många resurser där ute här och här och här . Men jag hoppades att ge dig en introduktion till vad som är möjligt med dem, och motverkar verkligen din törst efter förståelse så att du går ut och experimenterar en hel del. Mycket roligt att vara här.
Och så kommer vi till slutet av vår resa. Bara att notera, det var inte en uttömmande eller fullständig lista på något sätt, men jag hoppas att det gav dig intresse för några av de mer intressanta sakerna du kan göra med CSS och CSS3. Det är ibland en galen och underhållande värld, och ibland en frustrerande.
När allt kommer omkring vet vi alla hur det är när en formgivare inte kan få en div för att visa ett barnelement korrekt, eller när ett textelement inte gör riktigt vad du vill ha det till.
Så håll kontakten med dina favoritdesigners och växa en vänkrets i det här utrymmet som du kan kommunicera med och dela med dig av dessa tricks med fram och tillbaka, för jag vet hur jag lärde mig det mesta av det jag har delat idag och jag har att säga att jag tycker att det är det bästa du kan göra som webbdesigner. Twitter är en bra resurs för det, och söka [dot] twitter en ännu bättre. Under tiden lämnar jag dig att experimentera men inte för en sista meningen.
Gå ut unga Padawan och spela med det roliga som väntar dig som webbdesigner i den vilda världen av stil och design inom CSS (3).
Vilka är dina favorit nya CSS3-tekniker? Eller lite använda / lite kända CSS-tekniker? Låt oss veta i kommentarerna!