Web 2.0 przyniosło portale społecznościowe, a tłumy dostały narzędzia by wyrazić siebie w Internecie. Z mojego punktu widzenia web 2.0 przyniosło te cholerne zaokrąglone rogi ;-) Oto jeden ze sposobów jak się z nimi uporać.

Tworzymy w Photoshopie piękną ramkę, korzystając z wektorowego prostokąta i opcji mieszania (obrys, ewentualnie cień). Gotowy obraz musimy pociąć, tak żeby otrzymać osiem maleńkich obrazów – 4 rogi ramki i 4 przekroje boków.

Ramka z zaokrąglonymi rogami wykonana w Photoshopie

Gdy mamy gotowy zbiór, pozostaje nam skorzystać z kodu:

HTML


<div id="frame">
		<div class="top-left">
			<div class="top-right">
				<div class="bottom-left">
					<div class="bottom-right">
						<div class="top">&nbsp;</div>
						<div class="left">
							<div class="right">
								<div class="inner" style="font-size: 130%;">
								Zawartosc jaka tylko zechcesz.<br /><br />Automatycznie dopasowuje się do zawartości.
								</div>
							</div>
						</div>
						<div class="bottom">&nbsp;</div>
					</div>
				</div>
			</div>
		</div>
	</div>

CSS:


/* lewy gorny rog */
div#frame div.top-left{
	background: url(images/img/top_left.png) top left no-repeat;
}

/* prawy gorny rog */
div#frame div.top-right{
	background: url(images/img/top_right.png) top right no-repeat;
}

/* lewy dolny rog */
div#frame div.bottom-left{
	background: url(images/img/bottom_left.png) bottom left no-repeat;
}

/* prawy dolny rog */
div#frame div.bottom-right{
	background: url(images/img/bottom_right.png) bottom right no-repeat;
}

div#frame div.top{
	height: 7px; /* wysokosc gornej krawedzi */
	margin-right: 14px; /* szerokosc prawej krawedzi */
	margin-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/top.png) top left repeat-x;
}

div#frame div.left{
	padding-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/left.png) top left repeat-y;
}

div#frame div.right{
	padding-right: 14px; /* szerokosc prawej krawedzi */
	background: url(images/img/right.png) top right repeat-y;
}

div#frame div.inner{
	background: #F4FF98;
	padding: 1em;
}

div#frame div.bottom{
	height: 15px; /* wysokosc dolnej krawedzi */
	margin-right: 14px; /* szerokosc prawej krawedzi */
	margin-left: 8px; /* szerokosc lewej krawedzi */
	background: url(images/img/bottom.png) bottom left repeat-x;
}

Oto i wynik:

Zawartosc jaka tylko zechcesz.

Dostosowuje swoją wysokość do zawartości.

Szerokość ograniczona elementem #frame

 

4 komentarzy do “Zaokrąglone rogi – jak to zrobić?”

  1. 06/05/2010, PiotrekNo Gravatar

    A ja jestem zwolennikiem takiej metody (oczywiście dla IE trzeba zrobić wyjątek)

    HTML:

    Tekst…

    CSS:
    #box {
    border: 5px solid #000;
    background: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    Oczywiście wartość zaokrąglenia można dopasować do własnych upodobań.

    Powiedzcie, co o tym sądzicie
    Pozdrawiam

     
  2. 06/05/2010, PiotrekNo Gravatar

    kurde, htmla mi zjadlo

    HTML

    Tekst…..

     
  3. 07/05/2010, Artur PolkowskiNo Gravatar

    Witam na blogu!
    Twoja metoda jest jak najbardziej ok, z tym, że… dla IE i tak trzeba znaleźć coś innego. To podwójna praca. Może jednak lepiej zastosować jedno rozwiązanie cross-browser?

    Nie twierdzę, że mój sposób jest najlepszy. Wręcz przeciwnie! Wymaga dużej ilości obrazów – nawet pakując „rogi” do jednego (potem przesuwać za pomocą backgroud top/left), potrzeba ich 5. Za to jednak dostajemy ramkę, która jest całkowicie niezależna od rozmiarów zawartości.

    HTML-a „zjada” w obronie przed niechcianym kodem ze strony użytkowników. Nie chciałbym, żeby w komentarzu ktoś mi posiał iframe’a albo script :] Zawsze jednak możesz zostawić link do źródła.

    Pozdrawiam!

     
  4. 05/12/2011, Skrypty PHPNo Gravatar

    No niestety trzeba się na pocić, aby łaskawie IE zaokrągliło rogi na naszej stronie, w ramce.
    Świetny poradnik przyda się. Pozdrawiam

     

Zostaw odpowiedź

*
Efektowna przezroczystość
Warunkowe programowanie pod IE - I'm lovin'it!