Internetiniai puslapiai be CSS atrodo lygiai taip pat kaip medžiai be lapų. Žinai kad tai tikriausia gražus medis, bet kažko nesižiūri, kažko trūksta. Šiame CSS pradžiamokslyje nerasite kaip užauginti gražų medį, bet rasite kaip nulipdyti gražų internetinį „lapą“.

Pradžiai norim parodyti vieną išskirtinį pavyzdį, kuris deja nepateko į šį pradžiamokslį. Kodėl? Nes rašant šią knygą ypatingas dėmesys buvo skirtas praktiniams pavyzdžiams ir jų kokybei, tačiau Misrosoft Internet Explorer nesugebėjo teisingai atvaizduoti visų šio įmantraus meniu elementų…

Nesudėtingas ir gana originalus būdas sukurti meniu pasinaudojant CSS3 text-shadow savybe. Veikia Opera, FireFox, Chrome, neveikia IE. Savybė text-shadow leidžia atvaizduoti teksto šešėlį šiek tiek patrauktą nuo teksto ir išblukusį. Jinai turi keturis parametrus: kiek patraukti šešėlį nuo teksto X ašimi, kiek patraukti šešėlį nuo teksto Y kryptimi, koks šešėlio išblukimo stiprumas (nulis yra nieko) ir šešėlio spalva. .menu:hover li nustato, kad užėjus pelyte ant meniu klase pažymėto objekto jis būtų pakeltas 100px į viršų, kas šiuo atveju gaunasi už naršyklės atvaizdavimo ribos. O trečioji eilutė nurodo, kad teksto šešėlis, būtų pavaizduotas 100px žemiau originalaus teksto. Taigi užėję ant meniu klase pažymėto objekto turėtume matyti tik jo šešėlį, nes pats tekstas yra kilstelėtas į viršų. .menu:hover li:hover yra tikslesnis kelias (Apie taisyklių tikslumą daugiau skaitykite knygoje „Praktiškas CSS pradžiamokslis“) vienam konkrečiam menių elementui. Jis nurodo, kad objektas nebūtų nė kiek pakeltas, o jo šešėlis būtų atvaizduojamas iš karto po pačiu tekstu (0,0).

Įmantraus meniu CSS kodas:

*{
background-color: #000;
margin: 0;
padding: 0;
list-style-type: none;
color: #fff;
text-decoration: none;
}
.menu:hover li {
margin-top: -100px;
padding-bottom: 100px;
text-shadow: 0 100px 3px #fff;
}
.menu:hover li:hover {
text-shadow: 0 0 1px #fff;
margin-top: 0px;
padding-bottom: 0px;
}
.menu li {
float: left;
padding-right:20px;
}
HTML kodas:
<ul class="menu">
<li><a href="http://www.nepo.lt/">Pirmas</a></li>
<li><a href="http://www.nepo.lt/">Antras</a></li>
<li><a href="http://www.nepo.lt/">Trečias</a></li>
<li><a href="http://www.nepo.lt/">Ketvirtas</a></li>
</ul>

Rezultatas(be šešėlio ir su):

Kas dar jūsų laukia knygoje „Praktiškas CSS pradžiamokslis“?

Knyga prasideda supažindinant su pagrindinėmis CSS kalbos savybėmis ir žingsnis po žingsnio einama vis prie sudėtingesnių. Tačiau supažindinus su CSS pagrindais nepalieka jūsų ant ledo ir pateikia praktiškai pritaikomus pavyzdžius kaip sukurti gražią formą, lentelę, menių ir t.t.

Knygoje rasite atsakymus į tokius klausimus:

  • Kokios taisyklės ir kodėl turi aukštesnį prioritetą kitų atžvilgiu?
  • Kuo skiriasi paraštės nuo atitraukimų?
  • Kas yra susiskleidžiančios paraštės?
  • Kaip panaudoti įmantrų šriftą teksto antraštėje?
  • Ko tikėtis ateityje iš CSS?
  • Kas yra CSS karkasai ir kodėl juos (ne)verta naudoti?
  • Ką daryti, jog dizainas atrodytų gerai Internet Explorer?
  • Kaip išcentruoti puslapį?
  • Koks geriausias būdas sukurti trijų skilčių puslapį?
  • Kaip sukurti iškrintantį menių?
  • Kaip sukurti puslapį suapvalintais kampais?
  • Kas yra CSS Sprite?

Visą knygos turinį galite rasti čia http://www.slknygos.lt/out/fck_files/Turinys/Praktiskas%20CSS%20pradziamokslis.pdf

Knygą pavartyti galite čia http://www.slknygos.lt/vartymui/978-9955-707-83-7/978-9955-707-83-7.html

Knygą nusipirkti galite čia http://www.patogupirkti.lt/book/book.asp?isbn=9789955707837 Arba ieškokite artimiausiame didelio knygyno IT knygų skyriuje.

Post Navigation