» Arkiv för webloggen » Att styla kursen i Avancerad CSS Niquelao Att styla kursen i Avancerad CSS 8 november 2009, av Rumoroso För några dagar sedan höll jag en kurs i avancerad CSS i Zaragoza (inkluderad i CTIC:s kurskatalog). Som sig bör, och särskilt med tanke på att det rörde sig om en kurs i stilmallar och avancerade tekniker, förberedde jag presentationen i rumoslide (eftersom 95 % av användarna kallar det så, kommer namnet troligen att stanna).

Problemet var att det omfattande kursinnehållet (eller den begränsade tiden) gjorde att jag inte fick möjlighet att gå igenom vissa detaljer kring de stilar jag använde i presentationen. Just därför har jag skrivit denna artikel (och även för att återuppta vanan att skriva regelbundet på bloggen). Som sig bör börjar vi med början, så idag är det dags för omslaget: Det jag vill kommentera gällande omslaget är hur jag hanterade presentationens titel. Min idé var att framhäva båda orden (CSS och avancerad), med tillräcklig individuell betoning för vardera, men samtidigt säkerställa att deras samband bevarades.

För att uppnå detta lekte jag bland annat med teckenstorlek och färg (stor och ljus kontra mindre och mörk) samt med deras placering (delvis överlappning). Först, den HTML-kod jag använde:

CSS Avancerad

Och därefter CSS:n med förklaring: h1 { font-size: 7em; color: #ffc8a3; line-height: .8; font-style: italic; margin: .5em 0 .2em 20%; border-bottom: 3px solid; position: relative; overflow: hidden; } Idén var att först styla bokstäverna CSS i rubriken. Eftersom resten av texten finns inuti ett span-element kan en generell stil tillämpas på h1 för att sedan kompensera effekten på detta.

Jag angav därför en tillräckligt iögonfallande teckenstorlek (7em), en färg som passade väl med övriga använda stilar utan att vara för intensiv, samt radhöjd och kursiv stil. Dessutom lade jag till marginaler, med tanke på att jag ville ha ett avstånd från vänsterkanten motsvarande 20 % av den totala bredden. Slutligen lade jag till en undre linje på 3 px (färgen ärvs från typsnittet).

Tillsammans med dessa stilar, eftersom överlappningen av orden åstadkoms med absolut positionering (vilket jag kommer att beskriva närmare längre fram), initierade jag koordinaterna för h1-underelementen genom att positionera h1 relativt. Kontrollen över vad som flödar ut (overflow: hidden) lade jag till i efterhand (eftersom jag tyckte att resultatet blev elegant) efter att ha stylat resten av rubriken.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Detta gör att den nedre delen av ordet avancerad döljs när det sträcker sig utanför h1-elementets gränser. Därefter stylade jag ordet avancerad: h1 :first-child { font-size: .5em; font-style: normal; color: #222; position: absolute; top: 60%; left: 15%; opacity: 0.75; -moz-opacity: 0.75; -ms-filter: alpha(opacity=75); } För att undvika extra markup lekte jag med selektorer. Ordet avancerad finns i det första underelementet till h1, varför valet görs med pseudoklassen :first-child. Först ändrade jag typsnittsegenskaperna (minskade storleken, bytte färg och tog bort kursiveringen). Överlappningen åstadkom jag med absolut positionering (koordinaterna relateras till h1-positionen eftersom denna deklarerats som relativt positionerad).

Slutligen gav jag en extra touch genom att leka med opaciteten (jag använde egenskaper med specifika prefix för att säkerställa korrekt visning i nyare webbläsarversioner). Och nu frågan: hur åstadkom jag effekten med den vita tonövergången?

Svaret är enkelt och baseras på följande kod: h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } Det tomma span-elementet jag lade till (som säkert redan verkat märkligt för vissa) är det som står för denna effekt. Idén är egentligen enkel. Effekten kan åstadkommas genom att lägga en PNG-bild med en färgtonövergång från vitt till transparent ovanpå texten (vitt används eftersom det matchar sidans bakgrund).

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

För detta valde jag span-elementet via en kontextuell selektor (det är span som följer efter ett annat span, alltså span + span), positionerade det absolut och lät det täcka 100 % av rubrikens bredd och höjd (när span positioneras börjar det acceptera dimensioner). Därefter lade jag till tonövergångsbilden som bakgrund, justerad till underst (eftersom bilden är smal lät jag den upprepas längs x-axeln). Och klart… Övriga stilar som tillämpats på omslaget (sidfot och logotyp) förblir oförändrade genom hela presentationens bildspel.

De är generellt sett ganska enkla, så jag går snabbt igenom dem (kanske fördjupar jag mig när jag nämner stilar för andra sektioner i senare artiklar). Sidfoten är en generisk behållare som innehåller en lista (där jag tagit bort punktmarkeringarna). Jag gav den en intensiv bakgrundsfärg nära CTIC:s orange nyans och en bild (också som bakgrund) placerad till höger.

Dessutom positionerade jag den fixed längst ner på skärmen eftersom jag inte ville att den skulle förflytta sig vid vertikal scrollning (detta använde jag som exempel under kursen). Vad gäller logotypen är det en SVG-fil inkluderad i object-elementet.

Jag positionerade den absolut där uppe och behöll den så genom hela presentationen. Snart kommer jag att kommentera några andra stilexempel som jag tillämpade genom presentationen, till exempel hur jag åstadkom den tvåfärgade bakgrunden med bokstäverna CSS, etc. Att styla kursen i Avancerad CSS Kategori: CSS —> 3 kommentarer Att styla kursen i Avancerad CSS 8 november 2009 […] Fullständig text på Niquelao: Att styla kursen i Avancerad CSS […] Niquelao » Arkiv för webloggen » Ytterligare en stilistisk touch i kursen i CSS 11 november 2009 […] som jag redan gjorde i det tidigare inlägget (att styla kursen i Avancerad CSS), fortsätter jag att kommentera några av de stilar jag använde i presentationen för CSS-kursen i Zaragoza[…] Ytterligare en stilistisk touch i kursen i CSS 12 november 2009 […] som jag redan gjorde i det tidigare inlägget (att styla kursen i Avancerad CSS), fortsätter jag att kommentera några av de stilar jag använde i presentationen för CSS-kursen […] Du kan följa kommentarerna via RSS 2.0-flödet.

Du kan också skicka en trackback från din webbplats. Föregående artikel: The best… made with CSS Nästa artikel: Ytterligare en stilistisk touch i kursen i CSS —> —> —> Detta verk är licensierat under en Creative Commons-licens.

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.