--=REKLAMA=--

Tworzenie zaokrąglonych narożników

Z Joomla!WikiPL

wymaga przeglądu!!!!!!


Wprowadzenie

Stosując (X)HTML i CSS, łatwo umieścić prostokątne obramowanie wokół jakiejś części strony. Zwykle dokonujemy tego, umieszczając kod tej części strony w znacznikach <div>...</div> (lub podobnych), a w kodzie CSS ustalamy reguły dla własności border.

Niestety, niemożliwe jest stworzenie tylko za pomocą (X)HTML i CSS nieprostokątnej ramki. (Nieprostokątnym ramkom odpowiada w tym podręczniku termin zaokrąglone rogi [rounded corners]), po prostu dlatego, że to najpowszechniej spotykane rozwiązanie. Jednakże narożniki nie muszą być zaokrąglone, technikę tę można wykorzystać dla stworzenia przeróżnych kształtów i stylów obramowania.

Aby pokonać ograniczenia właściwości obramowania, możemy skorzystać z jednego lub większej ilości obrazków do nadania ramce kształtu (wyglądu). Jest to bardzo łatwe, gdy znasz rozmiar elementu <div> - po prostu tworzysz obrazek odpowiedniej wielkości, z takimi narożnikami, jakich potrzebujesz, i umieszczasz go jako to elementu <div>. Częściej jednak mamy do czynienia ze zmieniającymi swoje rozmiary elementami strony (szerokość, wysokość albo obie wartości). Dotyczy to szczególnie projektantów szablonów stosowanych w CMS takich jak Joomla!, w których nie wiemy, jaka treść zostanie umieszczona na stronie, a tym samym nie znamy i nie jesteśmy w stanie przewidzieć rozmiarów takich elementów. W tym poradniku skupimy się głównie na tworzeniu zaokrąglonych narożników określanych jako "płynne' ('fluid'), elastyczne, to jest takie, które zmieniają swoją wielkość, i mogą pomieścić różną zawartość.

Teoria

Żeby uniknąć opisywanych powyżej problemów, użyjemy odrębnych obrazków dla każdego z czterech rogów naszego niekanciastego pudełka. Aby zapewnić ciągłość obramowania, obrazki te muszą być wystarczająco duże, by wypełnić nasz pojemnik w maksymalnej możliwej wielkości. Aby mieć pewność, że pudełko będzie zawsze miało odpowiednią wielkość, układamy obrazki na czterech warstwach, przykrywajacych się wzajemnie, tworząc iluzję, że obramowanie naszego pudełka jest jednolite.

Animacja. Zaokrąglone narożniki
Proces jest zilustrowany przez animację pokazaną po prawej stronie. W każdej kolejnej scenie obrazek jest umieszczony na poprzednim.
  1. Po pierwsze, duży obrazek z lewą krawędzią, lewym górnym narożnikiem i górną krawędzią umieszczamy w górnym lewym narożniku naszego pojemnika <div> (na rysunku naszkicowany czerwonym kolorem dla przejrzystości). Obrazek jest większy niż potrzeba dla tego pojemnika, rozciąga się poza jego dolną i prawą granice, tak jak to jest uwidocznione na ilustracji za pomocą przezroczystości, ale co - oczywiście - nie jest widoczne w praktyce.
  2. Następnie wąski poziomy obrazek z dolną krawędzią i dolnym lewym narożnikiem umieszczamy na dole pojemnika <div>, nad pierwszym obrazkiem. Na ilustracji obrazek został wyróżniony ciemniejszą różową barwą. Znów można zauważyć, że obrazek rozciąga się poza prawą krawędź pojemnika.
  3. Po trzecie, wąski pionowy obrazek z prawą krawędzią oraz prawym górnym rogiem został umieszczony w prawy rogu pojemnika, nad drugim obrazkiem.
  4. Na koniec kwadratowy obrazek zawierający jedynie prawy dolny narożnik został umieszczony w prawym dolnym rogu pojemnika.

Przejdźmy do praktyki - tworzenie obrazków

Aby stworzyć potrzebne obrazki, użyjemy otwartego programu do grafiki wektorowej Inkscape. W przeciwieństwie do edytorów grafiki rastrowej (jak GIMP), które zajmują się indywidualnymi pikselami (punktami), programy wektorowe operują kształtami geometrycznymi. To czyni łatwym stworzenie kształtu z zaokrąglonymi rogami, dokładnie takimi, jak chcemy.

Skorzystamy z Inkscape, aby stworzyć prostokąt z zaokrąglonymi rogami, z różowym pierwszym planem oraz białym tłem i cieniem rzucanym w prawym dolnym rogu. To ten sam kształt, który pokazany jest na animacji powyżej.


  1. Tworzenie nowego obrazka w Inkscape
    Aby rozpocząć, musimy zdecydować się na jakiś maksymalny rozmiar naszego pudełka. Rozmiar ten wyznaczy wielkość obrazka. Im większy obraz, tym większy będzie plik, i tym wolniej będzie wczytywana strona internetowa. Nie ma więc najmniejszego powodu, by tworzyć obraz większy niż trzeba. Dla celów naszego przykładu użyjemy rozmiaru maksymalnego szerokości 800px oraz wysokości 600px. Dlatego tworzymy w Inkscape nowy dokument z takimi wymiarami. Aby ustalić wymiary dokumentu wybierz z menu opcje Plik - > Właściwości dokumentu [File > Document properties] i wpisz w oknie dialogowym poprawne wartości. Zmień również nazwą domyślną warstwy (przejdź do Warstwy > Zmień nazwę warstwy [Layer > Rename layer...] na "Zaokrąglony prostokąt".
  2. Rysowanie prostokąta z zaokrąglonymi narożami
    Zostawimy 5px marginesu wokół obrazka. Dodatkowo będziemy nam potrzebne 5px szerokości na cień za prawą i dolną krawędzią zaokrąglonego prostokąta. Dlatego rysujemy prostokąt z zaokrąglonymi narożami szeroki na 785px i wysoki na 585px. Dla naroży ustalimy 5px promienia. Aby to zrobić, wybieramy z przybornika po lewej stronie narzędzie Prostokąt, naciśnij lewy przycisk myszy i przeciągając po skosie obszaru roboczego narysuj prostokąt. Wielkość rysowanego prostokąta nie ma znaczenia. Następnie przejdź do górnego paska narzędzi i wpisz w polach tekstowych wymiary: Szer: 783.00px, Wys: 583.00px, Rx: 5.000px, Ry: 5.000px. Skąd różnica w wielkościach. Te wymiary nie obejmują obramowania. Gdy dodamy obramowanie grubości 1px szerokość i wysokość zwiększy się o 2 px.
  3. Ustalenie koloru wypełnienia
    Ustalenie szerokości obramowania
    Następnie musimy ustalić grubość obramowania i ustalić kolor naszego prostokąta. Zaznacz prostokąt, jeśli nie jest zaznaczony. Wybierz z menu polecenie Obiekt > Wypełnienie i kontur [Object > Fill and Stroke] albo naciśnij klawisze Shift + Ctrl + F, aby wywołać okno dialogowe Wypełnienie i kontur [Fill and Stroke]. Na karcie Wypełnienie [Fill] wybierz kolor tła. Będziemy używali szesnastkowego koloru #ffd7eb, więc w polu tekstowym RGBA wpisz 'ffd7ebff' (końcowa wartość ff ustawia stopień przezroczystości alfa - w naszym przypadku nieprzezroczyste). Na karcie Kontur [Stroke paint] ustalimy kolor obramowania. W naszym przypadku chcemy czarne nieprzezroczyste krawędzie, więc wpiszmy w polu tekstowym RGBA '000000ff'. Na karcie Styl konturu ustalimy grubość krawędzi - wpisz w polu Szerokość 2px.
  4. Ustalenie położenia prostokąta
    W kolejnym kroku korygujemy położenie naszego prostokąta. Miarka Inkscape umieszcza prostokąt w dolnym lewym roku, zatem musimy ustalić jego współrzędne na x = 5 i y = 10. Wybierz z przybornika po lewej stronie narzędzie Wskaźnik, kliknij gdziekolwiek na prostokąt, a następnie w polach tekstowych pod górnym paskiem narzędziowym wpisz odpowiednie wartości.
  5. Ukrycie aktywnej warstwy
    Stworzenie nowej warstwy
    Następnie potrzebujemy stworzyć nową warstwę, na której znajdzie się cień rzucany przez prostokąt. Najpierw ukryjemy bieżącą warstwę ("Zaokrąglony prostokąt"), klikając na ikonę oka na dolnej krawędzi obszaru roboczego (Przełącz widzialność aktywnej warstwy). Następnie wybierz z górnego menu opcję Warstwa > Nowa warstwa [Layer > Add Layer...] i utwórz nową warstwę nazwaną "Cień" poniżej aktywnej warstwy. Teraz możemy stworzyć na tej warstwie nowy zaokrąglony prostokąt. Stwórz go, nadając mu 785px szerokości, 585px wysokości, z promieniami naroży wielkości 5px. Ustal współrzędne x = 10 i y = 5. W oknie dialogowym Wypełnienie i kontur ustal kolor wypełnienia w polu RGBA na '00000081' oraz rozmycie na '0,6'. Na karcie Kontur zaznacz ikonę Brak koloru [no paint]. W wyniku tych ustawień otrzymamy szary prostokąt z zaokrąglonymi narożami, częściowo przezroczystymi i nieznacznie rozmazanymi brzegami.
  6. Skończony obrazek!
    Na końcu odkryj warstwę "Zaokrąglony prostokąt", wybierając ją z listy rozwijanej na dole ekranu i klikając lewym przyciskiem ikonę oczka (Przełącz widzialność aktywnej warstwy). Gratulacje - możesz zobaczyć, jak wygląda twoje zaokrąglone pudełko. Możesz zapisać w tym momencie swój obraz w formacie Inkscape jako plik .svg, aby go później łatwo modyfikować.
  7. Teraz musimy stworzyć potrzebne nam cztery odrębne obrazki i zapisać je w formacie sieciowym. W Inkscape jest to bardzo łatwe - po prostu wybierz w menu pozycję Plik > Eksportuj jako bitmapę [File > Export Bitmap...] i naciśnij w oknie dialogowym przycisk Rozmiar użytkownika [Custom]. Możemy wyeksportować stosowne części naszego obrazka przez wprowadzenie współrzędnych w polach x0/y0 oraz x1/y1. Pamiętaj, że wszystkie współrzędne są mierzone od lewego dolnego narożnika dokumentu. Najlepszym miejscem do przecięcia obrazka są linie tuż przed krzywą zaokrąglonych naroży na dolnym i prawym brzegu. Przykładowo, by stworzyć:
    • duży górny obrazek z lewym narożnikiem i górną krawędzią, wpisz x0=0, y0=15, x1=785, y1=600.
    • wąski poziomy obrazek z dolną krawędzią i dolnym lewym narożnikiem, wpisz x0=0, y0=0, x1=785, y1=15
    • wąski pionowy obrazek z prawą krawędzią oraz prawym górnym rogiem, wpisz x0=785, y0=0, x1=800, y1=600
    • kwadratowy obrazek zawierający prawy dolny narożnik, wpisz x0=785, y0=0, x1=800, y1=15

Przejdźmy do praktyki - Edycja twojego szablonu

Aby zaimplementować zaokrąglone naroża w module, skorzystamy z ramki modułu 'rounded', włączając go do instrukcji <jdoc />:

<jdoc:include type="modules" name="POSITION" style="rounded" />

W efekcie tej instrukcji w dokumencie HTML strony otrzymamy następujący kod:

<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Menu witryny</h3>
        <ul class="menu">
          <li><!-- różne pozycje menu --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Cztery zagnieżdżone elementy <div> tworzą warstwy potrzebne dla naszych czterech obrazków. Możemy użyć nazwy klasy zewnętrznego elementu <div>, aby zagwarantować, że zajmujemy się właściwym elementem <div>, a następnie skorzystać z selektorów kontekstowych, by umieścić na każdej warstwie odpowiedni obraz.

Najlepiej uczynić to korzystając z zewnętrznego arkusza stylów, w którym umieszc zamy poniższe reguły:

div.module_menu {
  background: url(../images/rounded_topleft.png) 0 0 no-repeat;
  padding: 0;
}
 
div.module_menu div {
  background: url(../images/rounded_bottomleft.png) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
 
div.module_menu div div{
  background: url(../images/rounded_topright.png) 100% 0 no-repeat;
}
 
div.module_menu div div div {
  background: url(../images/rounded_bottomright.png) 100% 100% no-repeat;
}

Dopełnienie, marginesy i obramowanie są niezbędne, by zapewnić, że każdy element <div> dokładnie wypełnia powyższe. URL obrazka jest określone odpowiednio do położenia pliku css.

Jest tylko drobniejszy problem, by być świadomy z (There is just one more slight problem to be aware of): CSS rules are not exhausted, they are only overridden. W efekcie, jeśli treść modułu zawierać będzie element <div>, to powyższe reguły odnosić się będą również do tego elementu <div> (ponieważ znajduje się on wewnątrz elementu <div> wewnątrz elementu <div class="module_menu"> - bez względu na fakt there was an intervening <div>). Aby rozwiązać ten problem, potrzebujemy bardziej szczegółowej reguły:

div.module_menu div div div div{
  background: none;
}

I to jest to - radość kodowania!

Zobacz też

Roger Johannson: Zaokrąglone rogi z wykorzystaniem JavaScript

Dziękujemy za wkład

» Stefan Wajda [zwiastun],