Małgorzata Jaskłowska

Modnym i fajnym elementem na stronach www są zaokrąglone rogi. Metod wykonania jest kilka. Jednym ze sposobów jest wykorzystanie grafiki.

Ważne jest jednak aby stworzyć box o zaokrąglonych rogach, który będzie się rozszerzał w szerz i wzdłuż w miarę dodawania tekstu. W tym przypadku nie wystarczy grafika wstawiona jako tło.

Metoda 1

Obejrzyj demo z opisem. W tym przykladzie wykorzystano 1 grafikę o zaokrąglonych rogach. Box można rozszerzać dowolnie w dół, zaś szerokość można regulować tylko tak aby szerokość boksu nie przekroczyła szerokości grafiki. Czyli dla bardzo szerokiego boksu trzeba powiększyć grafikę. (http://www.schillmania.com/content/projects/even-more-rounded-corners/)

Inny sposób to używanie 4 rogów lub 2 grafik dolnej i górnej, lub lewej i prawej. Dość łatwo to zrobić ale wadą jest ograniczenie rozsuwania albo w dół albo na boki.

Metoda 2

Polega na zastosowaniu border-radius. Metoda ta nie zadziała w Internet explorerze, dlatego jeśli nie zależy nam na dokładnie takim samym efekcie we wszystkich przeglądarkach, możemy tę metodę zastosować.

<div id="box"> </div>

#box {
	width: 100px;
	height: 100px;
	background: red;
}

.okragle-wszystkie-rogi {
	-webkit-border-radius: 20px; /* Safari, Chrome */
	-khtml-border-radius: 20px;	/* Konqueror */
	-moz-border-radius: 20px; /* Firefox */
	border-radius: 20px;
}

dwa zaokrąglone rogi:

<div id="box"> </div>

#box {
	width: 100px;
	height: 100px;
	background: red;
}

.okragle-dwa-rogi {
	-webkit-border-top-right-radius: 20px; /* prawy górny */
	-webkit-border-bottom-left-radius: 20px; /* lewy dolny */
	-khtml-border-radius-topright: 20px;
	-khtml-border-radius-bottomleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
}

wiecej http://www.kminek.pl/okragle-rogi-tylko-za-pomoca-css/

Incoming search terms:

• zaokrąglone rogi css
• css zaokrąglone rogi
• div zaokrąglone rogi
• css3 zaokrąglone krawędzie
• css zaokrąglone rogi div
• zaokrąglone rogi
• css3 zaokrąglone rogi
• div zaokrąglony
• okrągłe rogi css
• css okrągłe narożniki

Brak podobnych wpisów.