style kate mac

Blog o stylowaniu bloksowych szablonów, tych na nowym kodzie. Szablony udostępnione bez ograniczeń i za darmo, porady, instrukcje i trochę lania wody z innej beczki. Zapraszam.

Wpisy otagowane „separator”

  • środa, 03 sierpnia 2011
    • Rozdzielacze, dzielniki, separatory... wszystkie te ozdobniki w notce

      <hr />Na Smashingu kiedyś pojawił się wpis z galerią <hr />, 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ć <hr /> 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

      przykład <hr /> z bloga szablonykatemac.blox.plMoje 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.

      przykład <hr /> z bloga stylekatemac.blox.plTutaj 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; hr separator przygotowany do prezentacji przykładu w notceja 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.

      The <hr>-Contest Results – Download your fresh <hr>-line now!


      guziczek Lighten Scheme na Color Schemer online* 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:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      środa, 03 sierpnia 2011 23:48
  • wtorek, 02 sierpnia 2011
    • Jak dodać rozdzielacz (poziomą linię) do notki?

      <hr /> i przycisk z TinyMCEPozioma 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)

      TinyMCE - jak dodać rozdzielacz hrpozioma linia (hr) w TinyMCEAby 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)

      HTMLArea - jak dodać rozdzielacz hrpozioma linia (hr) w HTMLAreaAby 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:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      wtorek, 02 sierpnia 2011 19:35

Wyszukiwarka

Zakładki

Kanał informacyjny

Opcje Bloxa