Technikos apvalintų kampų elementams kurti
Naršydami įvairiuose tinklalapiuose tikriausiai pastebėjote, kad vis dažniau yra naudojami užapvalinti kampai (angl. rounded corners): juos galima pamatyti tinklalapio komentarų blokuose, viršutinėse/apatinėse (header/footer), turinio (content) blokuose bei kitose struktūros dalyse.
Apvalintų kampų elementus sukurti galima ne vienu, o keletu būdų. Elementų kampams apvalinti kartais naudojama JavaScript kalba, tačiau rimčiausia priežastis, kodėl šis būdas nelabai populiarus, — išjungtas JavaScript palaikymas kai kurių lankytojų naršyklėje. Taip pat galime sukurti apvalintus elementus panaudoję pakopinių stilių (CSS) savybes ir paveikslėlius. Dar kitas būdas — kuris yra ateities sprendimas — CSS3. Tai nauja pakopinių stilių specifikacija, kuri dar nėra užbaigta, tačiau kai kurios naršyklės jau palaiko keletą naujosios specifikacijos savybių.
Taigi, panagrinėsime dažniausiai taikomus sprendimus elementų kampų apvalinimui: pavyzdžius, pliusus ir minusus; palyginsime aptariamus sprendimus.
Kampų apvalinimas panaudojus keturis paveikslėlius
Pirmiausia reikia su grafikos programa (pavyzdžiui, Adobe Photoshop) sukurti stačiakampį ar kvadratą ir jam suapvalinti kampus.
Internet Explorer 6 (IE6) problema. Kadangi iškirptus kampus saugosiu su permatomu fonu .png formatu, bus problemų su IE6, nes ši naršyklė, kaip žinome, nepalaiko permatomo fono be papildomų „hack'ų“. Todėl, jei derinate IE6 naršyklei, tai parinkti atitinkamą foną arba saugoti .gif formatu, arba naudoti papildomą technologiją .png permatomumui palaikyti.
Pavyzdyje pateiktas stačiakampis su pavadinimais: .tl, .tr, .gl, .bl, .br, .body. Šie pavadinimai atitinka CSS klasių pavadinimus. Sutrumpinimus atitinkankčius klasių pavadinimus galite peržiūrėti žemiau pateiktame paveikslėlyje.
Pateikiu sąrašą su klasių pavadinimais ir paaiškinimais:
- .tl - top-left (viršus - kairė);
- .tr - top-right (viršus - dešinė);
- .gl - green-line (žalia linija);
- .bl - bottom-left (apačia - kairė);
- .br - bottom-right (apačia - dešinė);
- .body - bloko turinys.
Iš anksčiau pateikto pavyzdinio paveikslėlio matome, kad mums reikia išsikirpti .tl, .tr, .bl ir .br dalis. Kirpimo variantai yra du: kerpame visus paveiksliukus atskirai arba iškerpame vieną dalį, pavyzdžiui, viršutinį kampą kairėje (.tl), o vėliau, atsidarę eksportuotą paveikslėlį, jį apverčiame atitinkamai pagal tai, kurio kampo paveikslėlį norime padaryti. Taigi, jeigu eksportavote viršutinį kairįjį kampą, tai, norėdami su Adobe Photoshop programa sukurti viršutiniojo dešiniojo kampo paveikslėlį, turite jį apversti horizontaliai: Edit » Transform » Flip Horizontal.
Jeigu dirbate su kitu grafikos redaktoriumi, panašią funkciją apvertimui turėtumėte rasti. Kaip atlikti šį veiksmą su kita grafikos programa neparodysiu, kadangi šiame straipsnyje labiau orientuojamės ne į darbo eigą, o į galimus variantus apvalintų kampų elementams sukurti.
Toliau CSS dokumente sukurkime keletą aprašų. Kaip jau minėjau anksčiau, kiekvienam kampui naudosime atskirą paveiksliuką, todėl kiekvienai kampo klasei nurodykime atitinkamą paveikslėlį.
.tl, .tr, .bl, .br { width: 11px; height: 11px; float: left; background-repeat: none; }
.tl { background-image: url(tl.png); }
.tr { background-image: url(tr.png); }
.bl { background-image: url(bl.png); }
.br { background-image: url(br.png); }
Kampo klases jau turime, tačiau mums reikia dar kelių klasių, kad tekstas, esantis apvalintų kampų elemente būtų atvaizduojamas tinkamai.
.gl { width: 590px; background-color: #B2D748; height: 11px; float: left; }
.body { min-height: 100px; background-color: #B2D748; width: 592px; padding: 0px 10px; }
.clear { clear: both; }
Reikia atkreipti dėmesį, kad klasei .gl turime nurodyti tokį pat aukštį (angl. height) kaip ir kampų klasėms (.tl, .tr, .bl, .br), t. y. 11px (pikselių — angl. pixels), kad apvalintų kampų blokas atrodytų vientisas, neiškraipytas. Klasei .gl galite nurodyti jums tinkamą ilgį (angl. width).
Iš anksčiau pateikto CSS kodo pavyzdžio matote, kad nurodytos dvi papildomos klasės: .body, .clear. Pastarajai priskirta savybė clear su savybe both, su kuria išvalome float reikšmes. Apie tai buvo užsiminta anksesniame straipsnyje „Meniu kūrimas, naudojant vieną paveikslėlį“ straipsnyje, „Sukurto paveikslėlio taikymas CSS aprašuose“ dalyje. Klasę .body naudosime apvalintų kampų elemento tekstinei daliai stilizuoti. Šiai klasei priskiriame tą pačią fono spalvą, kokia yra ir .gl klasėje. Čia pati teksto spalva nėra nurodyta, todėl naršyklė naudos numatytąją juodą spalvą, tačiau ją galite lengvai pakeisti pridėję color savybę ir nurodę norimą spalvą.
Galiausiai surašome žymes į HTML dokumentą ir joms priskiriame atitinkamas klases.
<div class="tl"></div> <div class="gl"></div> <div class="tr"></div> <div class="clear"></div> <div class="body"> <p>Čia vieta tekstui, paveiksliukams.</p> </div> <div class="bl"></div> <div class="gl"></div> <div class="br"></div> <div class="clear"></div>
Iš HTML kodo matome, kad naudojami blokiniai elementai div, kuriems priskirtos atitinkamos klasės. Pirmiausia priskiriame viršutinio kairiojo kampo klasę, tada žaliosios linijos klasę, toliau — viršutinio dešiniojo kampo klasę. Vėliau būtina priskirti papildomą div elementą su clear klase, kad būtų panaikintos float reikšmės. Ir pagaliau prieiname pagrindinį bloką su klase body, kuriame talpinamas tekstas. Po teksto dalies reikia nepamiršti priskirti blokus su atitinkamomis klasėmis apatinei užapvalintų kampų elemento daliai ir, žinoma, išvalyti float reikšmes.
Kampų apvalinimas panaudojus vieną paveikslėlį
Pirmas variantas
Vieną variantą siūlo autoriaus Kyle Schaeffer: http://www.kyleschaeffer.com/?p=31.
Šiuo atveju yra naudojamas vienas paveiksliukas, t. y. apskritimas. Pasinaudoję background-position savybe kiekvienai kraštinės klasei priskiriame skirtingą foninio paveiksliuko poziciją. Plačiau apie foninių paveiksliukų pozicijas buvo aptarta straipsnyje „Meniu kūrimas, naudojant vieną paveikslėlį“.
<div class="cornerBox">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="cornerBoxInner">
<p>Čia apvalintų kampų elemento turinys.</p>
</div>
</div>
Šiame HTML kodo pavyzdyje atkreipkite dėmesį, kad kai kurioms žymėms priskirta ne viena klasė, o dvi; jos atskirtos tarpu.
.cornerBox { position: relative; background: #cfcfcf; width: 100%; }
.corner
{
position: absolute;
width: 10px;
height: 10px;
background: url('corners.gif') no-repeat;
font-size: 0%;
}
.cornerBoxInner { padding: 10px; }
.TL { top: 0; left: 0; background-position: 0 0; }
.TR { top: 0; right: 0; background-position: -10px 0; }
.BL { bottom: 0; left: 0; background-position: 0 -10px; }
.BR { bottom: 0; right: 0; background-position: -10px -10px; }
Klasė .cornerBox yra skirta stilizuoti visam apvalintų kampų elementui. Toliau matome klasę .corner, kuri bus naudojama visiems kampams; joje nurodome fono paveikslėlį. Klasė .cornerBoxInner skirta blokui, kuriame bus tekstas, stilizuoti. Galiausiai nurodytos kiekvieną kampą atitinkančios klasės, o jose nustatytos reikiamos foninio paveiksliuko pozicijos.
Kitus pavyzdžius galite peržiūrėti čia: http://www.kyleschaeffer.com/karatecorners/.
Antras variantas
Kitą variantą siūlo Schillmania: http://www.schillmania.com/projects/dialog2/.
Šis variantas skiriasi nuo ankstesniojo tuo, kad čia naudojamas vienas didelis fono paveikslėlis visam elementui, o anksčiau pateiktame variante — vienas mažas paveikslėlis, skirtas tik kampams. Schillmania varianto pagrindiniai pranašumai: turite daugiau laisvės sukurti gražesnį apvalintų kampų elementą (galite nesunkiai pridėti šešėlius, įdomesnius rėmelius ir pan.), paprasčiausia struktūra reikalauja nedaug HTML kodo (pavyzdys pateiktas žemiau). Tiesa, gali gasdinti kiek didokas CSS kodo kiekis — parsisiuntę pavyzdinius failus ir atsidarę dialog.css pamatysite, kad CSS failą sudaro apie 90 eilučių kodo.
Elementariausias HTML kodo pavyzdys pateiktas apačioje.
<div class="dialog">
<div class="content">
<!-- Antraštė -->
<div class="t"></div>
Turinys
</div>
<div class="b"><div></div></div>
</div>
Taigi, dar kartą apibrėžkime šios technikos privalumus:
- technikai naudojamas tik CSS kodas, jokio JavaScript;
- „plastiškas“ išdėstymas — apvalintų kampų elemento aukštį ir plotį riboja tik fono paveikslėlio matmenys;
- naudojamas tik vienas fono paveikslėlis;
- palyginus nesudėtinga HTML kodo struktūra.
Pavyzdžiai:
Kampų apvalinimas su dviejais paveiksliukais: komentarų blokas
Tarkime, kad turite tinklalapį, o jame — straipsnių skyrių. Kiekvienas straipsnis gali būti komentuojamas ir jūs norite, kad komentarai būtų rodomi apvalintų kampų elementuose/blokuose.
Iš pateikto paveiksliuko galime numanyti, kad šiam variantui reikės triejų CSS klasių (.head, .body ir .foot). Panašų vaizdą galite susikurti grafiniame redaktoriuje ir iškirpti (eksportuoti) du paveikslėlius: comment_head.png ir comment_foot.png.
Vidurinei apvalintų kampų elemento daliai paveikslėlio nereikės, kadangi klasėje .body nurodysime color savybę ir įrašysime paveikslėlyje atitinkančią spalvą (HEX spalvos vertę).
<div class="head"></div>
<div class="body">
<p>Komentaro tekstas</p>
</div>
<div class="foot"></div>
Kaip matote, HTML kodą sudaro tik trys div elementai (<p><p/> žymės nėra būtinos). Pateiktam HTML kodui sukurkime atitinkamus CSS aprašus.
.head
{
background-image: url(comment_head.png);
height: 14px;
width: 303px;
background-repeat: no-repeat;
}
.body
{
width: 283px;
min-height: 50px;
background-color: #B2D748;
padding: 0 10px;
}
.foot
{
background-image: url(comment_foot.png);
height: 37px;
width: 303px;
background-repeat: no-repeat;
}
Atkreipę dėmesį pamatysite, kad visoms klasėms galutinės pločio (width) reikšmės bus vienodos: .head ir .foot klasių width reikšmės yra po 303px (pikselius); .body klasės width reikšmė yra 283px, tačiau prie šios reikšmės dar prisideda padding savybės reikšmės. Kadangi padding nurodyta iš dešinės ir kairės pusės po 10px, galutinė klasės width reikšmė bus 283 + 10 + 10 = 303px.
Komentaro bloko išvaizdą galime patobulinti pridėdami ikoną ir šalia — komentatoriaus vardą.
Pirmiausia pridėkime papildomo HTML kodo.
<div class="author">
<img src="author.png" alt="Infactor" /> Infactor
</div>
Galutinis HTML kodas turėtų atrodyti taip, kaip parodyta žemiau pateiktame pavyzdyje.
<div class="head"></div>
<div class="body">
<p>Komentaro tekstas</p>
</div>
<div class="foot"></div>
<div class="author">
<img src="author.png" alt="Infactor" /> Infactor
</div>
CSS faile pridėkime papildomą klasę .author ir nurodykimte porą savybių.
.author { margin-left: 45px; font-size: 14px; }
Šios technikos privalumai:
- nedidelė HTML kodo apimtis;
- nesudėtingas CSS kodas;
- platus naršyklių palaikymas.
Trūkumai:
- fono paveiksliukai gali daug „sverti“;
- apvalintų kampų bloko plotis priklauso nuo paveiksliukų matmenų;
- del anksčiau paminėto trūkumo gali būti sunku suderinti tokius blokus su dizainu, kuriame elementų pločiui nustatyti naudojami nefiksuoti matavimo vienetai (pavyzdžiui, procentai).
Kampų apvalinimas be paveiksliukų
Metodą siūlo CSSPlay: http://www.cssplay.co.uk/boxes/snazzy.html. Pirmiausia apžvelkime HTML kodą.
<div id="xsnazzy">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2"></b>
<b class="xb3"></b>
<b class="xb4"></b>
</b>
<div class="xboxcontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div>
<b class="xbottom">
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</b>
</div>
Matote, kad, lyginant su kitais kampų apvalinimo metodais, šiam reikia nemažai HTML kodo. Taip pat pažiūrėkime į CSS kodą.
#xsnazzy
{
background: transparent; margin-bottom: 40px; width: 400px;
}
#xsnazzy p { padding: 10px; }
.xtop, .xbottom { display: block; background: transparent; font-size: 1px; }
.xb1, .xb2, .xb3, .xb4 { display: block; overflow: hidden; }
.xb1, .xb2, .xb3 { height: 1px; }
.xb2, .xb3, .xb4
{
background: #B2D748;
border-left: 1px solid black;
border-right: 1px solid black;
}
.xb1 { margin: 0 5px; background: black; }
.xb2 { margin: 0 3px; border-width: 0 2px; }
.xb3 { margin: 0 2px; }
.xb4 { height: 2px; margin: 0 1px; }
.xboxcontent
{
display: block;
background: #B2D748;
border: 0 solid black;
border-width: 0 1px;
}
Technikos privalumai:
- nenaudojami fono paveikslėliai;
- galimybė nurodyti norimą apvalintų kampų bloko plotį fiksuotais arba nefiksuotais matavimo vienetais.
Trūkumai:
- paini HTML struktūra;
- daug HTML kodo;
- sudėtingesnis CSS kodas lyginant su kitais kampų apvalinimo metodais;
- kampų užlenkimas gana „grublėtas“, ne visai lygus;
- ribotos stilizavimo galimybės;
Kampų apvalinimas taikant JavaScript
Yra nemažai JavaScript priedų, kurių pagalba galima visai nesudėtingai sukurti apvalius blokus.
jQuery Corners
Pirmas būdas, patekęs į peržiūrą, - jQuery Corners. jQuery Corners 0.3 užima 20.67 KB. Aišku, kad skriptas veiktų, reikia naudoti jQuery biblioteką.
Naudojimas.
Reikia susikurti div'ą, kuriame būtina nurodyti klasės pavadinimą bei stiliaus parametrus (foną, kraštines ir pan.).
<div style="background-color: #B2D748; padding:10px; border: 1px solid black; width: 400px;" class="jquery_rounded">
Bloko turinys.
</div>
JavaScript funkcijoje reikia nurodyti klasės pavadinimą, kuriai taikysime apvalinimą su JS.
<script type="text/javascript">
$(document).ready( function(){
$('.jquery_rounded').corners();
});
</script>
Galime nurodyti savo lenkimo kampus (x ir y dydžius):
$('.rounded').corners("30px 10px");
arba
$('.rounded').corners("4px");
Taip pat skriptas turi galimybę užapvalinti ir mygtukų (submit, button) kampus. Deja, taikant šį metodą gali dingti galimybė suteikti elementui border savybę. Pavyzdžiui, žiūrint per Internet Explorer naršyklę border savybė neveiks.
Parsisiųsti galima iš čia: http://plugins.jquery.com/project/corners.
Dokumentacija ir pavyzdžiai: http://www.atblabs.com/jquery.corners.html.
Rounded corners
Kitas paprastas priedas užimantis tik 6 KB ir nereikalaujantis papildomų bibliotekų leidžia nesudėtingai sukurti apvalius kampus.
Naudojimo principas panašus kaip ir ankstesniame pavyzdyje. Reikia susikurti div'ą, kuriame būtina nurodyti klasės pavadinimą ir jo parametrus.
<div class="rounded" style="width: 400px; background-color: #B2D748; ">
Lorem ipsum dolor sit amet...
</div>
Vienas pastebėjimas — nenurodinėkite padding savybės tame pačiame div'e. Reikia sukurti naują div'ą:
<div class="rounded" style="width: 400px; background-color: #B2D748; ">
<div style="padding: 10px;">
Lorem ipsum dolor sit amet
</div>
</div>
Taip pat negalima nurodyti border savybės. Taigi, po sukurto div'o reikia įdėti JavaScript kodą.
<script type="text/javascript">
Rounded('rounded', 6, 6);
</script>
Peržiūrėti ir parsisiųsti priedą galite iš šios svetainės: http://www.editsite.net/blog/rounded_corners.html.
Kampų apvalinimas su CSS3
Pagaliau nebereikės tiek vargti, kad suapvalintume kampus. Border-radius savybė leis nesudėtingai nustatyti kampų lenkimo reikšmes. Taip pat bus galima kiekvienam kampui atskirai nustatyti lenkimo reikšmę: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius.
Firefox ir Safari naršyklių naudotojai jau dabar gali išbandyti naują savybę.
.css3_corners
{
background-color: #42AEC2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;
color: white;
width: 400px;
}
Atkreipkite dėmesį, kad savybė -moz-border-radius taikoma Mozilla Firefox naršyklei, o -webkit-border-radius — Safari.
Apibendrinimas
Per pastaruosius porą metų apvalintų kampų elementai labai paplito (bumas, jeigu neklystu, prasidėjo 2007 metais, o gal net kiek anksčiau), todėl nenuostabu, kad internetinių svetainių kūrėjai sugalvojo įdomių sprendimų šiam tikslui įgyvendinti. Iš gausybės technikų sunku pasirinkti labiausiai tinkamą, o tuo labiau surūšiuoti, kurie sprendimai yra geri, o kurie — ne. Todėl vertėtų išbandyti kuo daugiau technikų, kadangi taip ne tik įgausite naujų žinių, patirties, tačiau galėsite savo nuožiūra nuspręsti, kurį metodą pasirinkti ir naudoti.
2009-06-17 18:34:05
Gairės:
roki60