Den här veckan har vi ännu ett roligt och enkelt CSS-projekt för att du ska finslipa dina kodningskurvor. Den här gången kommer vi att skapa en illusion av en sida med ett hörn som har vikts över.
Med kraften i pseudoelementen skapar vi några CSS-trianglar som vi sedan kan trycka på plats för att skapa vår sidaflik. När vi är alla färdiga kan du helt enkelt tillämpa en klass på vilken div som helst för att lägga till effekten.
Konceptet
demo: Klicka här för att starta.
Nyligen ville jag lägga till en liten bit av karaktären till en enkel textbehållare och bestämde mig för att försöka vika över en av hörnen. Med hjälp av en bild är det här en ganska lätt uppgift. Men om vi försöker gå en ren CSS-väg tar det mer tid och ansträngning.
Metoden som jag kom fram till är säkert inte nyskapande, men jag tyckte det var intressant att dela här. I grund och botten är det vi behöver förutom en rektangulär lådan två trianglar. Vi trycker dessa trianglar i positionerna nedan.
När vi har trianglarna på plats, kan vi ändra den översta triangeln i samma färg som bakgrunden, och plötsligt har vi en fin liten sidviktseffekt. Ganska lätt!
Nu när vi har en plan på plats, kan vi börja bygga våra former med hjälp av CSS. Det finns verkligen ingen bra inbyggd metod för att skapa trianglar med CSS, så vi måste vända oss till en del gränsvudoo.
HTML
För att komma igång, skapa en div som den som visas nedan. Jag har kastat i en rubrik med en paragraf, en klass för allmänna sidstilar som vi kanske vill återanvända någon annanstans och äntligen en klass för att tillämpa sidviktseffekten (tl står för "övre vänster", vi skapar en annan för en högra högervecka senare).
Det är allt vi behöver för nu. Låt oss hoppa över till vår CSS och få den här stilen!
Sida CSS
För CSS börjar vi genom att koda upp det allmänna utseendet på vår lilla sida utan vikningseffekten. Jag började genom att ge bakgrunden en fin mörk färg, sedan flyttade till styling själva sidklassen. Ge den en bredd, höjd och marginal och tilldela vit till bakgrundsfärgen.
Som ett valfritt steg inkluderade jag en mycket subtil bakgrundsgradient. Som alltid tar detta en ogynnsam bit av kod om vi försöker spela bra med så många webbläsare som möjligt. Om du känner att det inte är värt det, helt enkelt gräva gradienten.
Nu när vi har den grundläggande behållaren stilad, är det dags att göra texten lite bättre. För h2 gjorde jag det fint och stort och scooted det ganska långt från toppen så att det inte kommer att komma i vägen för sidvikten. Jag använde också Google Web Font Lilita One. Inbäddning av detta är lika enkelt som att kopiera och klistra in koden som ges till dig på sidan i den länken.
Slutligen, för att avsluta texten, lade jag till en del vaddering på stycket, ställa in teckensnittet och gjorde med färgen några få nyanser tillbaka från svart för att hjälpa till att ställa in den från rubriken.
Avstämning
Vid denna tidpunkt borde du ha en bra liten sida något som den som visas nedan. Det är inte mycket att titta på just nu, men det är en bra start.
CSS Trianglar
Innan vi fortsätter måste vi lära oss att göra en triangel med CSS. För att starta denna process, skapa en tom div och ge den en klass av? Trekant ?. Ställ nu både höjd och bredd på noll men använd en riktigt tjock gräns till botten och vänster sida (använd två olika färger). Här är resultatet att du får:
Som du kan se har detta skapat en kvadrat som delas diagonalt från nedre vänstra hörnet till övre högra hörnet. Varje kant motsvarar en av de trianglar som resulterar. Se nu vad som händer om vi vänder en av dessa gränser genomskinliga:
Där har du det, en triangel gjord med ren CSS. Vi kan även tweak riktningen av triangeln genom att applicera gränser till olika sidor:
Se till att du ställer in den transparenta gränsen mot den riktning som du vill att hypotenus ska stå inför. Så om du vill att den ska möta rätt gör du den rätta gränsen genomskinlig. Det omvända gäller för de andra gränserna. Om du vill att hypotenusen ska vända uppåt, sätt den övre gränsen. Om du vill att den ska vända uppåt, sätt den nedre gränsen.
Kolla in denna Tinkerbin för att se ett exempel på alla fyra alternativen på jobbet.
Fällning av sidan
Nu är det dags att använda denna kunskap för att kasta sidan över. För att göra detta måste vi följa tre steg. Först ska vi stila? Foldtl? klass som vi satt upp förut. Därefter lägger vi till en triangel med: före pseudoelementet.Slutligen lägger vi till den andra triangeln med hjälp av: efter pseudoelementet.
Som vi kan se är allt vi har gjort för huvudklassen tillämplig relativ positionering (detta hjälper de absolut positionerade trianglarna) och sätter en boxskugga. Som en sidotal är det här projektet mycket lättare utan skuggor, men jag ville se till att du visste att det fortfarande kunde fungera. Du måste bara se till att skuggan är kompenserad för att den inte sticker ut på sidan med sidvikten.
Nu är det dags att skapa vår första triangel. Ringa upp: före pseudoelementet, sätt innehållet till ingenting, ställ det absolut till ursprunget, använd sedan den triangelnkod som vi just lärt oss ovan.
Som du kan se ställer jag in storleken till 70px och färgen till #eee, vilket är lite mörkare än sidfärgen eftersom det här är triangeln som skapar vik-över-effekten. Återigen måste skuggan väsentligt kompenseras för att se rätt ut.
Klipp ut hörnet
För att avsluta måste vi placera vår andra triangel för att klippa ut det övre vänstra hörnet. Detta använder ungefär samma syntax som den sista, bara färgen på triangeln är densamma som kroppen och riktningen har blivit omvänd.
Det visar sig att detta steg inte är nödvändigt, se avsnittet Uppdatera nedan för mer information.
Därmed är vår sidaveckseffekt färdig! Så här ser det ut:
Flipping It Around
Nu när vi har avslutat vår övre vänstra sida, är det dags att vända det och se om vi kan dra av samma sak på andra sidan. Syntaxen är nästan identisk, bara förskjuten från höger i stället för vänster med din absoluta positionering och vänd dina trianglar runt.
En sak som kan ge dig upp här är skuggorna, du måste också vända dem, annars kommer illusionen att förstöras. Denna bild illustrerar vad jag menar:
Se den i aktion
Nu när vi är färdiga är det dags att prova kör den här dåliga pojken. Tänk på att eftersom vi använder: före och efter, kommer IE7 och tidigare inte att spela bra. Det finns korrigeringar tillgängliga med JavaScript om det är ett stort problem för dig.
demo: Klicka här för att starta.
Uppdatering
Här är saken, ibland är ett projekt som detta meningsfullt i ditt huvud när du kodar det, då kommer du tillbaka senare och inser att du gjorde allt fel! Det är precis vad som hände här. Strax efter att ha publicerat detta märkte jag att eftersom mitt gränssnitt delades in i två trekanter på egen hand, behövde jag verkligen inte gå igenom steget att lägga till: efter sektionen alls. Uppgifterna ovan är fortfarande bra att lära av, så jag lämnar den ensam, men här är ett bättre sätt att dra av det här.
Allt vi behöver göra är att ta gränsen som vi gjorde genomskinliga och ställa in den till bakgrundsfärgen. Det som ensam tjänar som vår andra triangel och låter oss avskurna: efter sektionen helt.
Lev och lär folk, leva och lära. Alltid gå igenom och se till att din kod är så kortfattad som möjligt. Ibland gör du dumma misstag (jag gör det säkert). Bli inte avskräckt, istället ta det lugnt i det faktum att det nästan alltid är ett bättre sätt att göra något och varje gång du hittar en, gör du dig till en bättre kodare.
Var noga med att kolla in den uppdaterade Tinkerbin för att se den här nya och förbättrade versionen.
Slutsats
Tack för att du läste denna handledning om hur du skapar en sidoeffekt med CSS. Jag hoppas att du hittade informationen att vara användbar och är nu ganska bekväm att hantera båda CSS-trianglarna och: före och: efter pseudo-element.
Lämna en kommentar nedan och låt mig veta vad du tycker och var säker på att checka tillbaka snart för mer bra CSS-walkthroughs.