›

How-to

• How-to
• poradniki
• Porady dla webmasterów
• Technologie/Informatyka
• tourtale

› [css] [html] zaokrąglenia

Prosta i ciekawa funkcjonalność, która z pewnością poprawi walory Twojej strony internetowej czy bloga.

Do obsługi zaokrągleń w CSS służy parametr “border-radius“, którego wartością jest rozmiar promienia krzywizny zaokrąglenia (lub dwa promienie w przypadku zokrągleń eliptycznych). Jako, że parametr jest składnikiem CSS3, musimy dodać “zamienniki” (-webkit-border-radius oraz -moz-border-radius), które będą zrozumiałe dla przeglądarek nie obsługujących w pełni polecań CSS3.

Przykład:

Tekst z zaokrąglonymi bokami o promieniu 10px

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Tekst z eliptycznym zaokrągleniem o promieniu 10px i 15px

Należy pamiętać, że między rozmiarami promieni powinien stać znak “/” zamiast spacji!

-webkit-border-radius: 10px/15px;
-moz-border-radius: 10px/15px;
border-radius: 10px/15px;

 
Możemy modyfikować także poszczególne krawędzie elementu:

Tekst z zaokrągloną prawą dolną krawędzią (promień 10px)

-webkit-border-bottom-right-radius: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
border-borrom-right-radius: 10px;

Tekst z zaokrągloną lewą górną krawędzią (promień 10px)

-webkit-border-top-left-radius: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

 
Przydatne klasy CSS (co to są klasy CSS i jak ich używać):

Małe zaokrąglenie wszystkich krawędzi:

.m_oval{
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px; 
  -moz-border-radius: 3px; 
   border-radius: 3px;
}

Zaokrąglenie górnych krawędzi (górna prawa, górna lewa):

.oval_top {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-radius-topleft: 5px;
  -webkit-border-radius-topright: 5px;
  -khtml-border-radius-topleft: 5px; 
  -khtml-border-radius-topright: 5px; 
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

Zaokrąglenia dolnych krawędzi (dolna lewa, dolna prawa):

.oval_bottom {
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-radius-bottomleft: 5px;
  -webkit-border-radius-bottomright: 5px;
  -khtml-border-radius-bottomleft: 5px; 
  -khtml-border-radius-bottomright: 5px; 
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}