Witam serdecznie po dłuższej przerwie. Temat zapewne szeroko opisany w wielu miejscach w sieci… ale dlaczego nie miałbym się podzielić swoją wiedzą po swojemu? Zaokrąglone narożniki obszarów strony to żadna nowość. Wystarczyło ustalić rozmiar danego obszaru i z przygotowanego tła wyciąć programem graficznym narożniki według własnego uznania, następnie przypisać tak przygotowane tło dla danego obszaru który w rzeczywistości był.. kwadratowy.
Obecnie, wraz z rozwojem CSS i HTML nastąpiła w tym temacie poważna zmiana. Najprawdopodobniej większość użytkowników internetu zrezygnowała z cierpień jakie niosło ze sobą przeglądanie zasobów za pomocą przeglądarki Internet Explorer 6 i ma albo najnowszą wersję IE bądź też inną np. Firefox, Opera, Chrome.. czy inne. Praktycznie wszystkie aktualne wersje przeglądarek mają zaimplementowaną obsługę CSS3 czyli wersji CSS która pozwala na zaokrąglone rogi. Działa to lepiej lub gorzej, najważniejsze że już działa.
Przykład:
Jak zamienić taki obrazek:
w to:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in imperdiet risus. Fusce nunc libero, condimentum non ultrices eget, malesuada quis tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed neque ligula, ultricies lobortis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
bez zabawy z programami do graficznej edycji…
Kod html:
<div id="_mcePaste"><p id="paragraf">Lorem ipsum dolor sit (…)</p></div>
<div id="_mcePaste"></div></div>
<div>[/html]
Kod css:
#radius_corner {
display:block;
width:600px;
background: url(image.jpg) center;
-moz-border-radius:3em 0 3em 0;
border-radius:3em 0 3em 0;}
p#paragraf {
padding:3em;
text-align:justify;
font-family:verdana sans-serif;
color:white;
gdzie „border-radius” określający zaokrąglenia został użyty podwójnie dla Firefoxa (z przedrostkiem „-moz-” oraz Chrome. Paragraf obrzuciłem spadem „padding” 3em tak żeby nie wyjeżdżał poza obszar narożników.
Przypominam o zasadach wpisywania wartości:
-moz-border-radius-bottomleft ustawia zaokrąglenie dla dolnego lewego rogu.
-moz-border-radius-bottomright ustawia zaokrąglenie dla dolnego prawego rogu.
-moz-border-radius-topleft ustawia zaokrąglenie dla górnego lewego rogu.
-moz-border-radius-topright ustawia zaokrąglenie dla górnego prawego rogu.
Pozdrawiam!
Opublikowane w kategorii Bez kategorii