Colțuri rotunjite cu CSS

Deoarece primesc întrebări de la persoane ce nu știu cum se realizează colțurile buclucașe, am zis să fac un mic tutorial și despre asta. În acest tutorial îți voi arăta cum să faci un box cu div-uri rotunjite expandabil la orice dimensiune pe ambele axe. Singurul dezavantaj al acestei metode este folosirea unui cod suplimentar în structura HTML. De asemenea, trebuie să ai puțină grijă ca primul sau ultimul element din box să nu aibe margine verticală, în caz contrar apare un spațiu inestetic (se poate rezolva cu un   plasat la începutul și la sfârșitul div-ului roundInner).

Vom folosi trei imagini (sus, conținut și jos) de lățime mare: dacă site-ul are lățime de 980px, imaginile trebuiesc să aibe minim 1000px pentru a evita box-uri prea late cu border întrerupt. Desigur, pentru maniacii optimizării se poate folosi un sprite pentru imaginea de sus și cea de jos.

Codul HTML arată așa:

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Folosesc două div-uri în interior deoarece box-ul are un border cu un efect ce nu poate fi obținut din css.

Codul CSS:

.rounded .roundtop,
.rounded .roundtop span,
.rounded .roundbtm,
.rounded .roundbtm span {
	font-size:.1em;
	background:url(images/top.png) no-repeat left top;
	height:10px;
}
.rounded .roundbtm,
.rounded .roundbtm span {
	background-image:url(images/bottom.png)
}
.rounded .roundtop span,
.rounded .roundbtm span {
	background-position:right top;
	float:right;
	width:10px;
}

Cum funcționează?

Atât partea de sus (.roundtop) cât și partea de jos (.roundbtm) au aceeleași proprietăți, singura diferență fiind imaginea. Setăm dimensiunea fontului la .1em pentru a elimina eventualele probleme oferite cu generozitate de Internet Explorer.
span-urile sunt pentru colțul din dreapta. Deoarece folosim aceeași imagine și pentru colțul din stânga și pentru cel din dreapta, diferența dintre ele este poziția imaginii.

Dar conținutul?

Folosim aceeași tehnică și pentru conținut:

.roundContent,
.roundInner {
	background:url(images/bg.png) repeat-y left top;
	padding-left:10px;
}
.roundInner {
	background-position:right top;
	padding:0 10px 0 0
}

Desigur, aici nu mai setăm dimensiunea fontului foarte mică deoarece avem nevoie de text lizibil.

Acestea fiind spuse, avem colțuri rotunjite disponibile pentru orice box. Simplu, nu? :)

Demo

IMPORTANT!

M-ar ajuta foarte mult dacă primesc feedback de la începători. Vreau să știu dacă explic bine și pe înțelesul tuturor, deoarece, având o oarecare experiență îmi este destul de greu să-mi dau seama cât de accesibil este începătorilor.

13 Comentarii

Daniel a scris

poate sunt prea … incepator, dar lateralele nu mi-au iesit.
probabil nu am creat bg.png corect.

am copiat poza ta si am decupat, de pe latura stanga, 10×20 pixelix (de pe la mijloc).
nu inteleg cum o pozitionezi acelasi bg.png si in dreapta , pt ca ar tb inversat (cu degradeul catre interior).

deh, am doar 2 zile de .css (ce pretentii poti avea).

multumesc

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter