Ausma_CSS Classes - SELF LEARNING  GROUP

[ Apvalūs kampai ] [ Apvalūs kampai su paveikslais ]

HTML dizainas su apvaliais kampais, naudojant pakopinius stilius ir paveikslėlius.

Pažengusiems, lygis CSS1

 Antras variantas - panaudosime  paveikslėlus, kurie padarys apatinius blokelio kampus. Visi kodai.

HTML kodai:


 <div class="bl">Lorem ipsum dolor sit amet consectetur adipisicing elit</div>
 

class="bl" padarys apatinius kampus. Su pakopiniais stiliais galima tik vieną paveikslą panaudoti fonui  <Div> gairėje.

Šis paveiksliukas padarys apatinį kairįjį kampą, tam parašysime tokius CSS kodus

 .bl {background: url(images/1bl.gif) 0 100% no-repeat; width: 20em}
 

 CSS kodai fonui susideda iš trijų sekcijų: paveikslėlio adreso, jo vietos, ir komandos "no-repeat" (nekartoti). Kad blokelis neišsidėstytų per visą plotį, parašome plotį. Štai ką reiškia tos trys fono komandos:

1. Paveikslėlis yra iškviečiamas CSS kodais, ne HTML gairėmis. Jis yra direktorijoje, kuri vadinasi "images".
    

2. Nurodyti paveikslėlio vietą panaudojame  CSS komandas 0 100%. Pirmasis skaičius 0 nurodo atstumą nuo kairiojo krašto po gaire <div>. Antrasis skaitmuo santykinis, nurodo atstumą nuo viršaus,  galima naudoti ir skaitmenines reikšmes, išreikštas em ar px. Jei ši komanda būtų praleista, naršyklės paprastai suprastų kaip 0 ir paveikslėlis matytųsi kairiajame viršutiniame kampe.
    

3. Mes įrašėme komandą "no-repeat", nes norime, kad paveikslėlis būtų rodomas vieną kartą. Kitos komandos repeat-x kartoja horizontaliai, o repeat-y - vertikaliai, repeat to repeat - ir horizontaliai, ir vertikaliai. Neužrašius nieko  būtų suprasta "repeat".
    

Mūsų blokelis dabar atrodo taip:   Kol kas matote, kad tekstas užeina ant paveikslėlio, tai sutvarkysime vėliau.

Aprašysime dešinįjį apatinį kampelį. Kadangi su pakopiniais stiliais galima tik vieną paveikslą panaudoti fonui  <Div> gairėje, rašysime vėl <Div> ir nurodysime dešiniojo apatinio paveikslėlio klasę.

HTML kodus papildysime <div class="br">:

 
 <div class="bl"><div class="br"> Lorem ipsum dolor sit amet consectetur adipisicing elit</div></div>
 

O CSS kodus papildysime tokia eilute:

 
 .br {background:url(images/1br.gif) 100% 100% no-repeat}
 

Mūsų paveikslėlis dabar turi du apatinius kampus

Pridėsime du viršutinius kampelius. Jiems CSS kodai bus papildomi tokiomis eilutėmis:


 .tl {background: url(tl.gif) 0 0 no-repeat}
 .tr {background: url(tr.gif) 100% 0 no-repeat}
 

HTML kodus vėl papildysime <Div> gairėmis ir naujomis klasėmis:

 <div class="bl"><div class="br"><div class="tl"><div class="tr">
 Lorem ipsum dolor sit amet consectetur adipisicing elit
 </div></div></div></div>
 

Dabar paveikslėlis turi keturis kampus ir atrodys taip:.

Fono spalva

Belieka įdėti mūsų blokeliui foną. Fono spalva CSS koduose visada turi būti pirmoji CSS taisyklė. Mes visus paveikslėlius dėjome sluoksniais, tik to nesimatė, nes jie neužlipo vienas ant kito. Paprastai fono spalva apima visą <Div> ir turi būti aukščiau visų kitų kodų, taigi pirmiausiai ir užrašome mūsų paveiksliukų spalvą

Papildome CSS kodus #2cae93;  ir sukuriame naują klasę bl3, išcentruojame.

 .bl3 {background:url(images/1bl.gif) 0 100% no-repeat #2cae93; width:20em; text-align:center}
 

Dabar jau mūsų blokelis užsipildo spalva visas.

Kraštinės (Padding).

Kad tekstas neužliptų ant paveikslėlių, reikia pridėti kraštines 10px x 10 px. Svarbu prie kurios <Div> gairės pridėti, prie kurios nepridėtumėme, visoi elementai viduje paklausys tos taisyklės.  Pirmiausia išcentruojame ir pridedame padding:

 
 .bl {background: url(images/1bl.gif) 0 100% no-repeat; width:20em; text-align:center}
  .tr {background: url(images/1tr.gif) 100% 0 no-repeat; padding:10px}

Kad būtų teisinga, reikia pridėti prie paskutinio <div>, <div class="bl">

 
 .tr2 {background:url(images/1tr.gif) 100% 0 no-repeat; padding:10px}
 

Štai mūsų blokelis.

Visi kodai bus tokie (CSS ir HTML).

Naršyklių nesuderinamumai.

 Mes pradėjome dirbti nuo apatinių kampų, o ne nuo viršutinių. Jei būtume pradėję nuo viršutinių, būtų paveikslėliai pasislinkę ne taip kaip mums reikia. Be to IE naršyklėje fono spalva kartais užlipa ant elemento. Tada galima įstatyti tokį laikiklį


 <div class="clear">&nbsp;</div>
 

ir CSS kodus:


 .clear {font-size: 1px; height: 1px}