Ausma_CSS Classes - SELF LEARNING  GROUP

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

HTML dizainas su apvaliais kampais, naudojant pakopinius stilius.

Pažengusiems, lygis CSS1. Visi kodai

Yra daug būdų  puslapio dizaine gauti apvalius kampus, ne tik su paveikslais. Apvalūs kampai suteikia dizainui švelnumo. Vieną iš tokių būdų, kaip tai padaryti pakopinių stilių pagalba, čia ir panagrinėsime.

Tai sukursime klasių (class) ir HTML <b> gairės pagalba.

Pakopiniams stiliams panaudosime tokius kodus:

 
 .b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
 .b1 {height:1px; background:#fff; margin:0 5px;}
 .b2 {height:1px; background:#85a385; border-right:2px solid #fff; border-left:2px solid #fff; margin:0 3px;}
 .b3 {height:1px; background:#85a385; border-right:1px solid #fff; border-left:1px solid #fff; margin:0 2px;}
 .b4 {height:2px; background:#85a385; border-right:1px solid #fff; border-left:1px solid #fff; margin:0 1px;}
 .content {background: #85a385; border-right:1px solid #fff;  border-left:1px solid #fff; margin:0 1px;}
 .content div {margin-left: 5px; color: #FFF;}
 

Mano pasirinktos spalvos: visas puslapio fonas #c9e7c9; - jį paduodu iš išorinio css failo. Visiems kraštams, apačiai ir viršūnėlėi - #85a385, jų apvadams - balta spalva - #fff;

Štai šitas spalvas ir pakeisite pagal savo reikmes. HTML kodai neformuojant puslapio būtų tokie:

 
  <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
  <div class="content">
  <div>content here</div>
  </div>
  <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
 

matysime taip:

Puslapio suformavimas

Paprasčiausia ir lengviausia suformuoti bus lentelėmis. Įsistatome 3 eilučių 5 kolonėlių lentelę. Pirmoje eilutėje ir trečioje eilutėje visas ląsteles suliejame i vieną plotą puslapio viršūnei (1) ir puslapio apačiai (7).

 Visas lentelės plotis  95%. 2 ir 6 ląstelės bus šoniniams paneliams po 20 %, 4 kolonėlė - pagrindinis tekstas. 3 ir 4 kolonėlės nustatomos tik po 1 px, jos tarnaus teksto atitraukimui.. Turėdami tokį karkasą statysime į jį kodų blokelius.

O dabar įterpkime dar dvi eilutes žemiau pirmos eilutės, į vieną įdėsime kodų blokelį, kitą paliksime tuščią atskyrimui.