Rumoroso For nogle dage siden var jeg i Zaragoza for at undervise i et kursus om avanceret CSS (som er en del af CTIC’s kursuskatalog). Som det er naturligt, og især fordi det drejede sig om et kursus om stylesheets og avancerede teknikker, udarbejdede jeg præsentationen i rumoslide (da 95 % af brugerne kalder det sådan, endte det med at få dette navn).

Det forhold, at pensum var så omfattende (eller at tiden var så begrænset), betød desværre, at jeg ikke fik mulighed for at kommentere nærmere på de styles, jeg brugte i præsentationen. Netop derfor har jeg skrevet denne artikel (og også for at genoptage vanen med at skrive regelmæssigt på bloggen). Som det er naturligt, starter vi begyndelsen, så i dag er det forsiden, der står for tur: Vedrørende forsiden vil jeg gerne kommentere, hvad jeg gjorde med præsentationens titel. Min idé var at fremhæve begge ord (CSS og avanceret) med tilstrækkelig individuel vægtning for hvert enkelt, men samtidig sikre, at deres sammenhæng ikke gik tabt.

Til dette formål legede jeg blandt andet med skriftstørrelse og farve (stor og lys kontra mindre og mørk) samt med deres placering (delvis overlapning). Først og fremmest her den HTML-kode, jeg brugte:

CSS Avanceret

Og herefter følger CSS-koden med forklaring: 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; } Ideen var først at style bogstaverne CSS i overskriften.

Da resten af teksten er indeholdt i et span-element, kan man anvende en generel style til h1 og derefter kompensere for effekten på dette. Derfor definerede jeg en tilstrækkelig iøjnefaldende skriftstørrelse (7em), en farve, der passede godt til de øvrige anvendte styles uden at være for intens, linjehøjden og kursiv stil. Derudover tilføjede jeg margener, idet jeg ønskede at adskille elementet fra venstre kant med 20 % af den samlede bredde.

Endelig tilføjede jeg en understregning på 3 px (farven arves fra typografien). Sammen med disse styles, da jeg opnåede overlappingen af ordene ved hjælp af absolut positionering (mere om det senere), initialiserede jeg koordinaterne for h1-elementets underordnede ved at positionere det relativt.

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

Kontrollen af det, der strømmer ud (overflow: hidden), tilføjede jeg efterfølgende (fordi jeg syntes, resultatet blev elegant), efter at resten af overskriften var styled. Dette sikrer, at den nederste del af ordet “avanceret” skjules, når det rækker ud over h1-elementets grænser. Derefter styllede jeg ordet “avanceret”: 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); } For at undgå yderligere markup legede jeg med selektorer.

Ordet “avanceret” findes i det første underordnede element til h1, hvorfor udvælgelsen sker via pseudoklassen :first-child. Først ændrede jeg skriftegenskaberne (reducerede størrelsen, ændrede farven og fjernede kursiven).

Overlapningen opnåede jeg gennem absolut positionering (koordinaterne tages i forhold til h1-elementets position, da dette er deklareret som relativt positioneret). Endelig gav jeg det et ekstra touch ved at lege med dets gennemsigtighed (jeg benyttede egenskaber med specifikke præfikser, så det vises korrekt i de nyeste browserversioner). Og nu spørgsmålet: Hvordan opnåede jeg effekten med det hvide gradient? Svaret er enkelt og baserer sig på følgende kode: h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } Det tomme span-element, jeg tilføjede (og som sikkert allerede forekom mærkeligt for nogen), er ansvarligt for denne effekt.

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

Faktisk er idéen simpel. Man kan opnå effekten ved at placere et PNG-billede med en farvegradient fra hvid til gennemsigtig oven på teksten (den hvide farve skyldes sidens baggrund). Til dette formål udvalgte jeg span-elementet via en kontekstuel selektor (det er det span, der kommer efter et andet span, altså span + span), positionerede det absolut og sørgede for, at det dækkede 100 % af overskriftens bredde og højde (når span positioneres, accepterer det dimensioner).

Derefter tilføjede jeg gradientbilledet som baggrund placeret i bunden (da billedet er smalt, gentages det langs x-aksen). Og så er det gjort… De øvrige styles, der er anvendt på forsiden (sidefod og logo), forbliver konstante gennem hele præsentationens slides.

Generelt er de ret enkle, så jeg vil kun kort omtale dem (måske uddyber jeg dem senere, når jeg nævner styles fra andre sektioner i fremtidige artikler). Sidefoden er en generisk container, der indeholder en liste (hvor jeg har fjernet punkttegnene).

Jeg gav den en intens baggrundsfarve tæt på CTIC’s orange farve samt et baggrundsbillede placeret til højre. Derudover positionerede jeg den fast (fixed) i bunden af skærmen, fordi jeg ikke ønskede, at den skulle flytte sig ved lodret scrolling (dette brugte jeg som eksempel under kurset). Hvad angår logoet, er det et SVG-billede indlejret i et object-element. Jeg positionerede det absolut øverst og beholdt det sådan gennem hele præsentationen.

Snart vil jeg kommentere nogle andre eksempler på styles, jeg anvendte gennem præsentationen, såsom metoden til at opnå den tofarvede baggrund med CSS-bogstaverne osv. Stilistisk tilgang til kurset i avanceret CSS Kategori: CSS —> 3 kommentarer Stilistisk tilgang til kurset i avanceret CSS 8. november 2009 […] Hele teksten på Niquelao: Stilistisk tilgang til kurset i avanceret CSS […] Niquelao » Arkiv over webloggen » Et ekstra stilistisk touch til CSS-kurset 11. november 2009 […] Som jeg allerede gjorde i det foregående indlæg (stilistisk tilgang til kurset i avanceret CSS), vil jeg fortsætte med at kommentere nogle af de styles, jeg brugte i præsentationen af CSS-kurset i Zaragoza[…] Et ekstra stilistisk touch til CSS-kurset 12. november 2009 […] Som jeg allerede gjorde i det foregående indlæg (stilistisk tilgang til kurset i avanceret CSS), vil jeg fortsætte med at kommentere nogle af de styles, jeg brugte i præsentationen af CSS-kurset […] Du kan følge med i kommentarerne takket være RSS 2.0-feedet.

Du kan også sende et trackback fra dit eget websted. Forrige artikel: The best… made with CSS Næste artikel: Et ekstra stilistisk touch til CSS-kurset —> —> —> Dette værk er licenseret 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.