CSS3 Cookbook 7 Super Easy CSS Recept att kopiera och klistra in

Nu har du nog sett tillräckligt med långa CSS3-tutorials för att vara en livstid. Du börjar förmodligen bli bekant med vad CSS3 har att erbjuda och är redo att röra sig över grundläggande teori och se några praktiska designexemplar som du kan kopiera och klistra in direkt i din kod utan att du inte släpper igenom massor av kommentarer.

Tja, du har tur eftersom det är precis vad vi har för dig idag! Nedan hittar du sju roliga och attraktiva CSS-trick som du kan ta tag i och lägga in direkt i dina egna projekt och anpassa efter eget tycke. Tänk på att eftersom dessa saker fortfarande är spetsiga, kommer äldre webbläsare inte att stödja det mesta. Jag har försökt att säkerställa graciös försämring där det är möjligt så att du kan ge en arbetserfarenhet till alla användare och en bättre upplevelse för dem som använder webkit.

Boktryck

Det är ganska enkelt att infoga text i CSS. För att uppnå det behöver du tre färger: en bakgrundsfärg, en ljusare nyans av bakgrundsfärgen och en mörkare nyans av bakgrundsfärgen.

För att börja, fyll i din text med den mörkare nyansen av din bakgrundsfärg. Använd sedan enkelt en CSS3-textskugga som är en ljusare nyans och det har till syfte att skapa ett präglat utseende.

HTML

<p>nedtryckt</p>

CSS

kropp {bakgrund: # 222222; färg: # 131313; fontstorlek: 200px; } #container p {text-align: center; text-transform: stor bokstav; textskugga: # 2c2c2c 3px 3px 5px; }

Små bokstäver

Småkapseffekten är när alla bokstäver i en rubrik är huvudstad, men de ursprungliga bokstäverna i varje ord är större än resten. Det är en fin och enkel effekt som du inte ofta ser på webben (inte riktigt CSS3 men fortfarande cool!).

Ett enkelt sätt att göra detta är helt enkelt att infoga?små? taggar in i din HTML och sedan utforma de taggarna med en något mindre teckenstorlek än resten av rubriken. Några kommenterare informerade mig om att det faktiskt finns ett enklare sätt att uppnå detta! Använd bara? Font-variant: småkapslar ;? och du är bra att gå!

Jag använde också? text-trasform bara för skojs skull. Detta kommer automatiskt att ta lite text och omvandla det, vilket gör det enkelt att gå tillbaka och ändra din HTML samtidigt som du ser samma utseende, även om du inte kommer ihåg att skriva in alla kepsar.

HTML

<p>Små bokstäver</p>

CSS

kropp {bakgrund: # 2c2b2b; färg: # 131313; fontstorlek: 200px; } #container p {text-align: center; text-transform: stor bokstav; text-skugga: # 363535 3px 3px 5px; typsnitt variant: småkapslar; }

CSS-kupong

Den här är till hjälp för de online-återförsäljare som vill erbjuda kampanjer, försäljning, online kuponger etc. Den typiska gränshanteringen som du ser på de flesta webbplatser är bara en solid linje, men du kan alternativt äppla streckade eller prickade linjer till en gräns.

Kombinera detta med några CSS3 rundade hörn och en boxskugga och du har själv en fin liten CSS-kupong grafik!

HTML

<h2>$ 10 Off</h2>

CSS

kropp {bakgrund: # 21303b; färg: # 000; } h2 {font-size: 80px; linjehöjd: 70px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; text-transform: stor bokstav; } #container {bakgrundsfärg: vit; höjd: 200px; bredd: 400px; marginal: 100px auto; gränsen: 3px streckad # 21303b; / * skugga * / -webkit-box-skugga: 10px 10px 10px # 000; -moz-box-skugga: 10px 10px 10px # 000; boxskugga: 10px 10px 10px # 000; / * rundade hörn * / -webkit-gräns-radie: 20px; -moz-gränsen-radien: 20px; gränsstråle: 20px; }

sydd

Medan vi är föremål för streckade gränsbehandlingar, här är ett alternativt trick du kan använda för att ge en låda en subtil sys-on-illusion.

Den här gången istället för en gräns använder vi en översikt. En kontur kan enkelt införas med ett negativt värde på kommandot kontur-offset.

HTML

<h2>sydd</h2>

CSS

kropp {bakgrund: # 21303b; färg: #fff; } h2 {font-size: 70px; linjehöjd: 190px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; } #container {/ * stitching * / disposition: 1px dashed # 98abb9; konturförskjutning: -5px; bakgrundsfärg: # 556068; höjd: 200px; bredd: 400px; marginal: 100px auto; / * skugga * / -webkit-box-skugga: 2px 2px 2px # 000; -moz-box-skugga: 2px 2px 2px # 000; boxskugga: 2px 2px 2px # 000; }

Glans

Den här populära och kanske överanvändda web 2.0-effekten brukade kräva minst en bild att dra av. Nu använder du CSS3 och en liten bakgrundsgradient hur du kan återskapa den skina med bara kod.

Komplexa CSS-gradienter kan vara svåra att bygga så jag rekommenderar att du använder Ultimate CSS Gradient Generator eller något som liknar att hjälpa till att automatisera processen.

HTML

<h2>Glans</h2>

CSS

kropp {bakgrund: # 21303b; färg: #fff; } h2 {font-size: 120px; linjehöjd: 190px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; textskugga: rgba (0, 0, 0, .3) 5px 5px 5px; } #container {/ * gradient * / background: # 666666; / * gamla webbläsare * / bakgrund: -moz-linjär gradient (topp, # 666666 4%, # 545454 50%, # 3A3A3A 51%, # 131313 100%); / * firefox * / bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (4%, # 666666), färgstopp (50%, # 545454), färgstopp (51% 3A3A3A), färgstopp (100%, # 131313)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 666666", endColorstr = "# 131313", GradientType = 0); / * dvs * / / * rutformar * / höjd: 200px; bredd: 400px; marginal: 100px auto; / * skugga * / -webkit-box-skugga: 5px 5px 5px rgba (0, 0, 0, .3); -moz-box-skugga: 5px 5px 5px rgba (0, 0, 0, .3); boxskugga: 5px 5px 5px rgba (0, 0, 0, .3); / * hörn * / -webkit-gräns-radie: 50px; -moz-gräns-radie: 50px; gränsstråle: 50px; }

Stroked Text & @ font-face

I det här exemplet får du två knep i ett! Du får se syntaxen för att lägga till textstreck i webkit plus det för att lägga till anpassade teckensnitt i alla moderna webbläsare med @ font-face.

Den typsnitt som jag använde i exemplet nedan kallas Jungle Fever och kan laddas ner som ett font font-ansikte från Font Ekorre.

HTML

<h2>jura-</h2>

CSS

/ * Teckensnitt * / @ font-face {font-family: 'JungleFeverRegular'; src: url ('JungleFever-webfont.eot'); src: local ('?'), url ('JungleFever-webfont.woff') format ("woff"), url ('JungleFever-webfont.ttf') format ('truetype'), url ('JungleFever-webfont. svg # webfontBlD2f3Gz ') format (' svg '); typsnitt: normal; typsnittstyp: normal; } kropp {bakgrund: # 222; färg: # 111; } h2 {font-size: 150px; linjehöjd: 200px; font-family: "JungleFeverRegular", Helvetica, sans-serif; font-weight: bold; text-align: center; textskugga: rgba (0, 0, 0, .2) 3px 3px 3px; / * text stroke * / -webkit-text-stroke: 2px # fff473; }

Dubbelsträckad text

Jag upptäckte detta tips helt av misstag medan du byggde lite streckad text för det föregående exemplet. Det visar sig om du använder RGBa på streckad text och tar bort opaciteten lite, du kan uppnå en fantastisk dubbel slagning! Jag är inte helt säker på varför det fungerar (något att göra med blöda av stroke?) Men det gör det!

HTML

<h2>Hummer</h2>

CSS

/ * Teckensnitt * / @ font-face {font-family: 'Lobster13Regular'; src: url ('Lobster_1.3-webfont.eot'); src: local ('?'), url ('Lobster_1.3-webfont.woff') format ("woff"), url ('Lobster_1.3-webfont.ttf') format ('truetype'), url Lobster_1.3-webfont.svg # webfontcOtP3oQb ') format (' svg '); typsnitt: normal; typsnittstyp: normal; } kropp {bakgrund: # 731e1e; färg: #fff; } h2 {fontstorlek: 220px; linjehöjd: 220px; font-family: 'Lobster13Regular', Helvetica, sans-serif; font-weight: bold; text-align: center; textskugga: rgba (0, 0, 0, .2) 3px 3px 3px; / * text stroke * / -webkit-text-stroke: 4px rgba (0, 0, 0, .6); }

Slutsats

Som jag sa i de inledande uttalandena, gärna kopiera och använda exemplen ovan, men du önskar. Lämna en kommentar nedan om du har några idéer för att förbättra några av dessa knep, oavsett om det gör dem snyggare eller mer webbläsarvänliga. De är långt ifrån perfekta och jag vill se dig göra dem bättre!