» Blogiarkisto » Tyylittelyä Niquelao Edistyneen CSS-kurssin parissa Tyylittelyä Edistyneen CSS-kurssin parissa 8. marraskuuta 2009, kirjoittaja Rumoroso Jokin aika sitten olin Zaragozassa pitämässä kurssia edistyneestä CSS:stä (sisältyy CTIC:n kurssiluetteloon). Luonnollisesti, ja erityisesti koska kyse oli tyylisivuista ja edistyneistä tekniikoista kertovasta kurssista, valmistelin esityksen rumoslide-työkaluilla (kuten 95 % käyttäjistä sitä kutsuu, niin lopulta se nimi jää käyttöön).

Juttu on niin, että aihepiirin laajuus (tai ajan rajallisuus) sai minut jäämään kaipaamaan mahdollisuutta kommentoida joitakin yksityiskohtia esityksessä käyttämistäni tyyleistä . Juuri siksi ryhdyin kirjoittamaan tätä artikkelia (no, ja myös palatakseni tapaan kirjoittaa säännöllisesti blogiin). Luonnollisesti alku on alku, joten tänään on vuorossa kansilehti : Kansilehdestä haluan kommentoida sitä, mitä tein esityksen otsikolle . Ajatukseni oli korostaa molempia sanoja ( CSS ja edistynyt ), yrittäen tehdä sen riittävällä yksilöllisellä painotuksella kummallekin, mutta huolehtien siitä, etteivät ne menettäisi yhteyttään.

Tätä varten muun muassa leikin fonttien koolla ja värillä (suuri ja vaalea vs. pienempi ja tumma) sekä niiden sijainnilla (osittainen päällekkäisyys). Ensimmäisenä käyttämäni HTML-koodi:

CSS Edistynyt

Ja seuraavaksi CSS ja sen selitys: 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; } Ajatuksena oli tyylitellä ensin otsikon CSS-kirjaimet. Koska muu teksti sisältyy span-elementtiin , voidaan h1:lle soveltaa yleistä tyyliä ja sitten kompensoida sen vaikutusta tähän.

Niinpä määrittelin riittävän näyttävän fonttikoon (7em), värin joka sopi hyvin yhteen muiden käytettyjen tyylien kanssa eikä ollut liian voimakas, rivikorkeuden ja kursiivityylin. Lisäksi asetin marginaalit ottaen huomioon, että halusin erottaa sen vasemmalta 20 % kokonaisleveydestä. Lopuksi lisäsin 3px:n alaviivan (väri periytyy typografiasta).

Näiden tyylien lisäksi, koska sanojen päällekkäisyyden sain aikaan absoluuttisella sijoittelulla (käsittelen sitä myöhemmin), turvauduin alustamaan otsikon jälkeläisten koordinaatit sijoittamalla sen relatiivisesti. Ylivuodon hallinnan (overflow: hidden) lisäsin jälkikäteen (koska näin tuloksen olevan tyylikäs) tyyliteltyäni otsikon muun osan.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Tällä saadaan aikaan, että sanan edistynyt alaosa peittää ylittäessään h1:n rajat. Seuraavaksi tyylittelin sanan edistynyt : 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); } Välttääkseni ylimääräisen merkinnän leikin valitsimilla. Termi edistynyt on h1:n ensimmäisessä jälkeläiselementissä, joten valinta tehdään :first-child-pseudoluokalla . Ensimmäisenä fontin ominaisuuksien muuttaminen (koon pienentäminen, värin vaihtaminen ja kursiivin poistaminen).

Päällekkäisyyden tein absoluuttisella sijoittelulla (koordinaatit otetaan h1:n sijainnin suhteen, koska sille on määritelty relatiivinen sijoittelu). Lopuksi annoin lisäsäväyksen leikkimällä sen läpinäkyvyydellä (turvauduin ominaisuuksiin, joissa on valmistajakohtaiset etuliitteet, jotka mahdollistavat sen näkymisen oikein uusimmissa selainversioissa).

Ja nyt kysymys: miten sain aikaan valkoisen liukuvärin efektin?. Vastaus on yksinkertainen ja perustuu seuraavaan koodiin: h1 span + span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(img/degrada.png) left bottom repeat-x; } Lisäämäni tyhjä span (joka varmasti jostakusta tuntui jo oudolta) vastaa tästä efektistä. Itse asiassa idea on yksinkertainen. Efektin voi saada aikaan asettamalla tekstin päälle png-kuvan, jossa on liukuväri valkoisesta läpinäkyvään (valkoinen johtuu sivun taustasta).

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

Tätä varten valitsin spanin kontekstuaalisella valitsimella (se on span, joka tulee toisen spanin jälkeen, eli span + span ), sijoitin sen absoluuttisesti ja tein siitä 100 % otsikon leveydestä ja korkeudesta (kun span sijoitetaan, se alkaa hyväksyä mittoja). Sitten lisäsin liukuvärikuvan taustaksi alaosaan tasattuna (koska se on kapea kuva, tein siitä toistuvan x-akselilla). Ja valmista… Muut kansilehteen sovelletut tyylit (alatunniste ja logo) pysyvät vakioina koko esityksen diojen ajan.

Yleisesti ottaen ne ovat melko yksinkertaisia, joten kommentoin niitä nopeasti (ehkä erittelen ne, kun käsittelen muiden osioiden tyylejä myöhemmissä artikkeleissa). Sanottakoon, että alatunniste on yleinen säiliö, joka sisältää listan (josta olen poistanut luettelomerkit). Asetin sille voimakkaan taustavärin lähellä CTIC:n oranssia ja kuvan (myös taustaksi) sijoitettuna oikealle.

Lisäksi sijoitin sen fixed-asemointiin näytön alaosaan, koska en halunnut sen liikkuvan pystysuuntaisen vierityksen mukana (tämä toimi esimerkkinä kurssin aikana). Logosta puheen ollen, se on svg, joka sisältyy object-elementtiin .

Tein niin, että sijoitin sen absoluuttisesti ylös ja pidin sen siellä koko esityksen ajan. Pian kommentoin joitakin muita tyyliesimerkkejä, joita sovelsin esityksen aikana, kuten esimerkiksi tapaa, jolla sain aikaan kaksivärisen taustan CSS-kirjaimilla, jne. Tyylittelyä Edistyneen CSS-kurssin parissa Kategoria: CSS —> 3 kommenttia Tyylittelyä Edistyneen CSS-kurssin parissa 8. marraskuuta 2009 […] Koko teksti Niquelaossa : Tyylittelyä Edistyneen CSS-kurssin parissa […] Niquelao » Blogiarkisto » Toinen tyylisäväys CSS-kurssilla 11. marraskuuta 2009 […] kuten tein edellisessä merkinnässä (tyylittelyä Edistyneen CSS-kurssin parissa), aion jatkaa joidenkin Zaragozan CSS-kurssiesityksessä käyttämieni tyylien kommentointia[…] Toinen tyylisäväys CSS-kurssilla 12. marraskuuta 2009 […] kuten tein edellisessä merkinnässä (tyylittelyä Edistyneen CSS-kurssin parissa), aion jatkaa joidenkin CSS-kurssiesityksessä käyttämieni tyylien kommentointia […] Voit seurata kommentteja RSS 2.0 -syötteen kautta .

Voit myös lähettää trackbackin sivustoltasi. Edellinen artikkeli: The best… made with CSS Seuraava artikkeli: Toinen tyylisäväys CSS-kurssilla —> —> —> Tämä teos on lisensoitu Creative Commons -lisenssillä .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.