style kate mac

Wpisy otagowane „separator”

• środa, 03 sierpnia 2011

  • Rozdzielacze, dzielniki, separatory... wszystkie te ozdobniki w notce

    Na Smashingu kiedyś pojawił się wpis z galerią , chyba właśnie wtedy zaczęłam doceniać i wykorzystywać ten element. Trudno dyskutować mi o jego celowości. Wszystko zależy od tego jak istotny dla danego użytkownika jest separator bo w gruncie rzeczy cel w dużej mierze zależy od użytkownika.

    Zastosowanie hr

    HTML5 mówi o hr jako o rozdzielaczu treści. Nie należy go oczywiście wstawiać po każdym akapicie, nie każda myśl musi być oddzielona od drugiej tak dosłownie. Czasami jednak zmieniamy nie tylko myśl ale cały główny watek, w takiej sytuacji hr sprawdzi się świetnie. Gdyby blog był książką a każda notka rozdziałem hr można by wstawić przy zmianie narratora, scenerii, punktu widzenia...

    Nie dajemy natomiast hr nad nagłówkami h, one same w sobie sugerują nową myśl.

    Ja najczęściej hr używam w sytuacji gdy rzeczywiście chcę wstawić linię. Rozdzielam w ten sposób ilustracje prezentujące szablony szczególnie jeżeli jest ich więcej niż jeden w notce. Zazwyczaj dodaję pod grafiką link tekstowy i chcę aby było jasne, że link ten dotyczy ilustracji nad nim a nie tej pod. Dlatego w tym miejscu hr wydaje mi się użyteczne.

    Drugą sytuacją są przypisy. W zwyczaju jest gdy przypis jest na dole strony (w tym przypadku notki) nad nim umieścić poziomą linię. Przypisów w ścisłym tego słowa znaczeniu rzadko używam ale różne wyjaśnienia, dopowiedzenia, źródła, fragmenty nie na temat chętnie dodaję na koniec notki. Przed nimi umieszczam hr.

    Dodawanie rozdzielacza do notki

    Wszystko oczywiście zależy od wybranego edytora w którym piszesz notki. W prostym tekstowym należy wpisać  w wybranym miejscu. Zaawansowane mają do tego celu odpowiedni przycisk, który wygląda jak pozioma beleczka. Dokładniej i z ilustracjami (tak dla nawet bardzo zielonych) opisane jest to w notce Jak dodać rozdzielacz (poziomą linię) do notki?

    Wygląd hr

    Moje ulubione hr to aktualnie oczywiście to z bloga szablonykatemac.blox.pl, jest śliczne. Długo nie mogłam znaleźć takiego ornamentu, który byłby wystarczająco drobny aby nie narzucać się swoim wyglądem ale jednocześnie był czymś więcej niż kreseczką no i pasował do innych ozdobników na blogu. Jego opis w css wygląda dokładnie tak: 

    hr {
    color:#ede4d5;
    border:0;
    padding: 0px 0px 25px 0px;
    background: url(../resource/kate3_ipt.gif) no-repeat bottom center;
    }

    Pozioma linia a przeglądarka.

    Znacznik hr, jak wiele innych, może mieć automatyczny wygląd przypisywany mu przez przeglądarkę. Otwierając stronę przeglądarka czyta kod naszej strony, zagląda do stylów i jeżeli na blogu używasz hr a nie masz jego wyglądu opisanego w css to przypisze mu go sama wedle własnego uznania (wygląd w poszczególnych przeglądarkach i ich wersjach może się nieco różnić).

    Starsze wersje Internet Explorera hr określają kolorem (color) a nie kolorem tła (background-color) stąd też pewien problem z dokładnie takim samym jego opisaniem w tych starszych wersjach. Oczywiście jest na to stylowy sposób ale mówiąc szczerze nie zależy mi na dokładnie takim samym wyglądzie. W zupełności zadowoli mnie wyświetlanie w tychże starych wersjach poziomej linii w wybranym przeze mnie kolorze (color:#ede4d5;).

    Wygląd poziomej linii.

    Tutaj aktualnie stosuję poziomą, jedno-pikselową przerywaną linię w kolorze beżowym, ciemniejszym nieco od tła. Wyglądem pasuje doskonale do nieco dłuższej, również przerywanej linii nad początkiem każdej notki. Jej opis w arkuszu stylów wygląda dokładnie tak:

    hr {
    color:#8f857c;
    border:0;
    border-top:1px dashed #8f857c;
    }

    • color: #8f857c; - wpisałam dla starych IE
    • border: 0; - hr ma opisaną w przeglądarce całą ramkę, dookoła: top, right, bottom, left a mnie zależało na jedno-pikselowej linii;
    • border-top: 1px dashed #8f857c; - ważna jest kolejność, najpierw wpisuję, że nie chcę ramek a dopiero następnie, że górna jednak ma być i ma być przerywana

    Rysunek zamiast poziomej linii.

    Chcąc uzyskać bardziej nietypowy wygląd należy już sięgnąć po dodatki w postaci ilustracji. Jej tło powinno być albo przezroczyste (pliki png lub gif) albo dokładnie takie jak tło notek na blogu (jpg). Ja wolę transparentne, wydaje się wygodniejsze (przykładowo fragment tego samego pliku możemy wykorzystać jeszcze raz przy innej okazji nawet jeżeli ta okazja będzie miała inne tło). Proponuję taki kod css:

    hr {
    color: #ccc;
    border:0;
    padding: 0px 0px 25px 0px;
    background: url(../resource/hr_separator.png) no-repeat bottom center;
    }

    • color: #ccc; - wybrałam jasnoszary,* będzie wyglądał delikatnie na białym tle;
    • border:0; - nie chcemy aby nasz obrazek miał jakąkolwiek ramkę
    • height: 30px; - potrzebujemy miejsca na nasz obrazek; ja przygotowałam separator o wysokości 30 pikseli stąd też taka liczba w prezentowanym kodzie
    • background: url(../resource/hr_separator.png) no-repeat center; - w tle wstawiamy wywołanie naszego rysunkowego hr; ja dla przykładu przygotowałam specjalny rysunek: jest w kolorze szarym (#ccc) i każdy bez ograniczeń może sobie z niego skorzystać (wystarczy zapisać obrazek na swoim komputerze a następnie dodać go do zasobów własnego bloga)
      ważne jest aby obrazek nie był powtarzany (jeżeli tego oczywiście nie chcemy) i powinien być ustawiony na środku a więc wpisujemy center

    Możliwości jest oczywiście więcej. Jeżeli preferujesz prostotę to najodpowiedniejsza będzie delikatna linia jeżeli natomiast lubisz rzeczy ozdobne albo chcesz w roli linii wykorzystać coś zabawnego to najlepiej jeżeli zdecydujesz się na obrazek. Konkurs na Smashing Magazine zaowocował wieloma liniami więc może tam coś dla siebie znajdziesz.

    

    ---

    * Jeżeli ktoś nie chce jasnoszarego koloru ale nie wie jaki najlepiej będzie pasował do kolorystyki jego bloga proponuję takie rozwiązanie:

    1. wybierz dominujący kolor na blogu
    2. wpisz go w Color Schemer (albo wybierz jeden z zaprezentowanych tam w tabeli)
    3. kliknij 6-7 razy w guziczek Lighten Scheme aby uzyskać dużo jaśniejszy kolor ale nie całkiem biały
    4. gotowe, kolor znaleziony, teraz tylko trzeba go przetestować

    Szczegóły wpisu

    Komentarze:

    (7) Pokaż komentarze do wpisu „Rozdzielacze, dzielniki, separatory... wszystkie te ozdobniki w notce”

    Tagi:

    • css elementu
    • divider
    • element a przeglądarka
    • hr-css
    • pozioma linia
    • separator

    Kategoria:

    • kilka uwag o CSS

    Autor(ka):

    kate_mac

    Czas publikacji:

    środa, 03 sierpnia 2011 23:48

    Opcje

    • Przejdź do wpisu „Rozdzielacze, dzielniki, separatory... wszystkie te ozdobniki w notce”
    • Dodaj komentarz do wpisu „Rozdzielacze, dzielniki, separatory... wszystkie te ozdobniki w notce” i/lub któregoś z (7) komentarzy

• wtorek, 02 sierpnia 2011

  • Jak dodać rozdzielacz (poziomą linię) do notki?

    Pozioma linia to popularny kiedyś sposób rozdzielania treści. W nowoczesnym szablonie zdecydowanie zalecałabym użycie w celu rozdzielenia światła czyli pustej przestrzeni ale bawiąc się w staroświecki wygląd można zaszaleć i wybrać sobie jakąś ozdobną linię. Bez względu na to czy będzie to pusta przestrzeń czy zjadający kropki pac man, separator najlepiej dodawać korzystając ze znacznika hr. W HTML4 nie miał on zdefiniowanego celu ale już w opracowywanym właśnie HTML5 mówi się o nim jako o rozdzielaczu treści.

    Nawet jeżeli przeglądarka będzie tylko tekstowa, notka będzie wyświetlana w czytniku korzystającym z własnych stylów albo nawet będzie czytana przez syntezator mowy istota poziomej linii jako rozdzielacza zostanie zachowana gdy użyjemy odpowiedniego znacznika. Dodatkowo zmieniając styl szablonu można łatwo zmienić i wygląd tejże poziomej linii bo jej wygląd może być wtedy częścią opisu szablonu a nie każdej pojedynczej notki.

    ---

    Jeżeli chcesz się dowiedzieć jak wstawić separator to najpierw zdefiniuj jaki edytor notek używasz.

    1. prosty edytor tekstowy - wprowadzam tekst w znacznikach html
    2. TinyMCE - pasek narzędzi zaczyna się od pogrubienia i wygląda niebieskawo
    3. HTMLArea - pasek narzędzi zaczyna się od nazwy czcionki i wygląda czarnawo

    Znacznik hr (html)

    Hr czyli separator jest to element, który nie może posiadać treści. Można przypisać mu atrybuty ale raczej te z głównej grupy czyli dozwolone globalnie (global attributes - z góry przepraszam za tłumaczenie, jestem laikiem i moim nauczycielem jest internet więc proszę o wyrozumiałość). Atrybuty związane z wyglądem, które kiedyś przypisywało się hr, należy przenieść do arkusza stylów.

    1. Wstawianie znacznika hr (prosty edytor tekstowy)

    Aby w prostym edytorze dodać rozdzielacz (poziomą linię) należy wpisać znacznik <hr /> (nawias ostry otwierający - Hotel - Romeo - odstęp (spacja) - ukośnik (prawy, slash) - nawias ostry zamykający)

    Jest to znacznik, który nie ma osobnego zamknięcia, można wpisywać tylko samo hr w ostrych nawiasach (html) ale ponoć poprawniej będzie (xhtml) jeżeli doda się jeszcze odstęp i ukośnik, który jest właśnie rodzajem zamknięcia w przypadku tagów typu void element.

    Hr może mieć różne atrybuty ale jeżeli są związane z wyglądem to zaleca się ich opisanie w css. W zasadzie jeżeli konieczne okażą się atrybuty to najlepiej ograniczyć je do nazwy (id), klasy (class), tytułu (title) i ewentualnie stylu wewnętrznego (style). Najprościej jednak nic nie dodawać.

    2. Wstawianie poziomej linii (edytor TinyMCE)

    Aby w edytorze TinyMCE dodać poziomą linię należy kliknąć w przycisk wyglądający jak pozioma beleczka. Znajduje się on w drugim rzędzie po prawej stronie, pomiędzy zmianą koloru czcionki a dodawaniem indeksów.

    Po kliknięciu wyświetli się okienko z ustawieniami hr. Nie należy nic tam wpisywać tylko kliknąć potwierdzenie Wstaw.

    3. Wstawianie poziomej linii (edytor HTMLArea)

    Aby w edytorze HTMLArea dodać poziomą linię należy kliknąć w przycisk wyglądający jak pozioma kreska. Znajduje się on w drugim rzędzie tuż przed dodawaniem linku.

    Po kliknięcie od razu wstawia separator ale HTMLArea jest nieaktualizowanym (chyba) edytorem i niektóre jego działania mogą być przestarzałe. W przypadku hr dodaje on temu znacznikowi atrybuty związane z wyglądem, które powinny się znaleźć w css i w związku z tym, leżeli zdecydujemy się na jakiś oryginalny rozdzielacz opisany następnie w css to przy zmianie hr będziemy musieli to brać pod uwagę.

    Wygląd hr w notce

    O ile nie opiszemy wyglądu hr w arkuszu stylów to będzie się on wyświetlał w sposób automatyczny czyli jako pozioma dość cienka linia. W zależności od rodzaju przeglądarki i jej numeru może być jakby wgłębiona.

    Więcej o wyglądzie separatorów hr we wpisie: Rozdzielacze, dzielniki, separatory... wszystkie te ozdobniki w notce 

    Szczegóły wpisu

    Komentarze:

    (0)

    Tagi:

    • divider
    • hr-html
    • html elementu
    • pisanie notki
    • pozioma linia
    • separator

    Kategoria:

    • o bloksowaniu

    Autor(ka):

    kate_mac

    Czas publikacji:

    wtorek, 02 sierpnia 2011 19:35

    Opcje

    • Przejdź do wpisu „Jak dodać rozdzielacz (poziomą linię) do notki?”
    • Dodaj komentarz do wpisu „Jak dodać rozdzielacz (poziomą linię) do notki?”