10 otroliga CSS-trick för att förvandla dina webblayouter

Alla som har erfarenhet av webbdesign, oavsett om du har använt DIY-webbplatsbyggare eller skapat en webbplats från grunden, har troligen hört talas om CSS tidigare. Detta otroligt kraftfulla verktyg kan användas för att transformera dina webblayouter, vilket ger dig kraften att ta kontroll över din webbplats och uppnå din kreativa vision. Men hur kan du använda överlappande stilmallar för att låsa upp potentialen för din nästa webbplats?

Den här guiden kommer bara att beskriva en rad CSS-egenskaper som alla har använts för att skapa rubriken som du kan se i bilden ovan. Du hittar detta projekt här CodePen, vilket ger dig chansen att prova själv.

CSS-bildmanipulation

Det första steget vi måste ta för att bygga vår rubriksektion är att lägga till bilder på sidan. Du kan använda en rad olika metoder för att uppnå detta mål, så vi har täckt de mest populära, tillsammans med ett par knep som hjälper dig att manipulera dina bilder.

1. CSS-bakgrundsbild

Vi vill ha en helskärmsbakgrundsbild för vår rubrik, och CSS-egenskapen bakgrundsbild är idealisk. Först måste vi skapa en behållare för vår bild (och resten av elementen i rubriken).

Vi började med att lägga till en div-tagg med "header" som klass, följt av att ställa in dess höjd till 100vh och dess bredd till 100vw; detta ger oss en låda som är exakt lika stor som visningsporten. Vi har också lagt till en CSS-regel för sidans brödtext, med dess bräddavlopp inställt på dold och dess marginaler inställda på 0px.

Med behållaren på plats kan vi lägga till en bakgrundsbild, och det finns tre olika CSS-regler vi behöver för att uppnå detta mål. Den första, bakgrundsbilden, behöver en URL för att fungera som bakgrundsbildens källa, och vi har använt den praktiska Unsplash-katalogen för detta. Vi måste också ställa in bakgrundsstorlek för att täcka och den bakgrundsposition till botten, men du kanske vill experimentera med dessa för bästa resultat.

2. CSS-bakgrundsblandningsläge

CSS-blandningslägen gör det möjligt att blanda bilder och text, ungefär som blandningsfunktionen i programvara som Adobe Photoshop. För att få blandningslägen att fungera med vår bakgrundsbild ställer vi in bakgrundsfärg till halvtransparent vit innan vi lade till blandningsläget vi ville använda.

Efter detta, bakgrundsblandningsläge var inställt på mjukt ljus, vilket gör att vi kan mjuka upp bilden.

3. CSS Clip-Path

För vårt nästa trick kommer vi att använda en regel som heter clip-path. När du använder img HTML-taggar kan du ställa in en sökväg som döljer delar av bilderna som du arbetar med. Du kan välja att använda allmänna former för detta, men du kan också använda en SVG-genererande app för att skapa en mer invecklad design.

Vi lade till en div-tagg med "flex_image_box" för att fungera som en behållare för tre bilder, med hjälp av egenskapen display CSS för att förvandla den till en flexbox (vi ska prata om detta senare). Tre img-taggar lades till inuti div-taggen, med ID: n som "img1", "img2" och "img3". Ställa in bredd på varje bild till 600px, vi är kapabla att lämna höjdegenskapen tom utan att ändra bildförhållandet; nu är det dags att lägga till vår klippbana!

För att skapa våra tre trianglar använde vi samma polygonklippbana för img1 och img3, med en inverterad version på plats för img2. Vi fick också leka med placeringen av vår flex-box-container för att se till att bilderna sitter i rätt position på skärmen. Våra klippvägsregler kan ses nedan.

4. CSS Opacitet

Opacitet anger nivån på transparens för alla HTML-element. Vi ställer in opacitet för våra bilder till 90 %, vilket gör dem något ogenomskinliga så att de smälter in fint med bakgrunden.

CSS responsiv text och bilder

Vi har redan utforskat konsten att skapa fantastiska responsiva webbplatser med HTML, CSS och JavaScript tidigare, men vi kan bygga på de principer du redan förstår och ge en djupare insikt i de färdigheter du behöver för att bemästra din webbplatslayout.

1. CSS Responsiva/Relativa enheter

CSS-enheter som px, pt och cm är absoluta enheter, och det betyder att en webbläsare renderar dem i samma storlek oavsett bredd och höjd på fönstret de upptar. Relativa enheter är olika och ger höjder och längder som är relativa till andra mått, som webbläsarfönstret eller ett överordnat element. De relativa enheterna nedan är vanliga och viktiga för responsiv webbdesign.

• em: Denna enhet används vanligtvis med text. Det är relativt teckensnittsstorleken för det aktuella elementet, vilket gör 4em fyra gånger så stor som teckenstorleken som är inställd.
• rem: Liksom em är rem relativt till teckenstorleken för ett element; rotelementet i en hierarki används för att definiera utdatastorleken.
• vw/vh: Fastställande av bredd och höjd baserat på storleken på visningsporten, 2vw är lika med 2% av webbläsarens bredd medan 2vh är lika med 2% av webbläsarens höjd.
• %: %-enheten beräknar dimensioner baserat på storleken på ett elements överordnade.
• vmin/vmax: Dessa enheter producerar dimensioner i förhållande till 1 % av visningsportens minsta eller största dimensioner, vilket ger element möjlighet att svara direkt på storleken på ett webbläsarfönster.

2. CSS-teckensnittsstorlek

Den här egenskapen kan ställas in med standardvärden som är fördefinierade av antingen webbplatsens huvudformatmall eller användarens webbläsare. Dessa värden inkluderar medium, xx-small, x-small, small, large, x-large och xx-large, med medium som standard för all text som saknar en CSS-tagg i teckensnittsstorlek. Alternativt kan relativa värden användas när du använder CSS-egenskapen font-size, och detta är metod som vi har använt för att säkerställa att texten i vår rubriksektion har en lämplig storlek för alla utsiktsplats.

Vi lade till två rubriktaggar i vår HTML, vilket gjorde det möjligt för oss att lägga till text i projektet. Den ena är en stor huvudrubrik, medan den andra är en underrubrik, och båda använder relativa enheter.

Relaterad: Hur man ändrar HTML-teckensnittsstorlek i CSS

3. CSS Bredd & Höjd

Alla HTML-element kommer med höjd- och breddmått, oavsett om de är div, img, a eller någon annan typ av tagg. Dessa dimensioner kan ställas in automatiskt till standardvärden, men de kan också dikteras av webbdesigners som använder rätt regler; vi har använt båda dessa metoder för den här rubriken.

Responsiva enheter har använts för bakgrundsbilden, med höjden inställd på 100vh och bredden inställd på 100vw, men vi har även använt absoluta enheter för våra tre bilder. Det är värt att utforska och experimentera med CSS-bredd- och höjdenheter, med alternativ som "ärva" innebär att anta dimensionerna för ett överordnat element, och det finns massor av andra trick som detta som du kan använda.

4. CSS Mix-Blend-läge

CSS mix-blend-läge är mycket likt bakgrundsblandningsläge, bara det kan appliceras på vilket element som helst, snarare än att vara uteslutande för bakgrunder. Vi har använt den här egenskapen på vår H1-rubrik för att lägga till textur och göra projektet mer intressant. Vi började med att ställa in vår textfärg till svartföljt av att ställa in mix-blend-läge för att överlägga.

Det är väl värt att utforska de olika blandningsalternativen du har när du hanterar text, eftersom bakgrunder med unika färgprofiler kommer att reagera olika på de inställningar du använder.

5. CSS Text-Transform

CSS text-transform är en smart egenskap som gör det möjligt för designers att ändra fallet för texten på sina webbplatser utan att påverka hur sökmotorerna läser den. Det har vi till exempel ställ in text-transform till versaler på vår H1-rubrik, vilket gör varje bokstav till versal oavsett hur vi matar in den i vår HTML.

CSS Overflow-egenskaper

HTML kan ofta verka som ett stel ramverk som sätter strikta gränser för innehållet på dina webbplatser, men detta är inte fallet när överflödesegenskaper används.

CSS Overflow & Text-Overflow

Overflow och text-overflow är mycket lika CSS-egenskaper. Overflow kan appliceras på alla element, vilket ger dig kontroll över innehållet som kan fly dess gränser. Textspill är liknande, även om det bara gäller text, och ger dig möjlighet att lägga till ytterligare parametrar till dina regler. Vi har bara använt overflow för det här projektet (vi använde det för att begränsa storleken på vår sidas kropp), men du kan läsa om text-overflow på W3Schools hemsida.

Använda CSS för dina webblayouter

CSS är ett otroligt kraftfullt verktyg som gör det möjligt för webbdesigners och utvecklare att skapa fantastiska webbplatser med hjälp av kod. Vi uppmuntrar dig att ta en titt på CodePen som vi tillhandahöll i början av artikeln, eftersom detta kommer att ge dig en ännu djupare inblick i hur alla dessa verktyg fungerar. Dessutom kan du spela med headern vi har gjort för att lägga till din egen pricken över i: et.

8 viktiga CSS-tips och tricks som alla utvecklare bör känna till

Använder du dessa viktiga CSS-metoder för ett snabbt arbetsflöde och en vacker webbdesign?

Läs Nästa

Om författaren