Nadajemy wygląd tekstowi

Na stronach WWW nie da się precyzyjnie kontrolować tekstu i byłoby to nawet niewskazane — użytkownik powinien mieć możliwość powiększenia tekstu w razie potrzeby, różne systemy mogą rysować tekst z różną jakością, niektóre przeglądarki obsługują dzielenie wyrazów, a niektóre nie?. Dlatego należy projektować stronę tak, aby nie „rozsypała się”, jeśli wymiary tekstu będą różnić się od ideału.

Kroje pisma

Obecnie wybór kroju pisma jest ograniczony do zbioru fontów, które użytkownik ma zainstalowane w swoim systemie operacyjnym.

W praktyce jedynym wspólnym zbiorem fontów jest Microsoft Core Fonts, który jest rozprowadzany z Windows, Mac OS X i jest dostępny dla Linuksa.

Ponadto są godne uwagi fonty w Mac OS X, np. rodzina Lucida lub Zapfino.

Dla Linuksa de facto standardem jest rodzina Bitstream Vera.

Windows Vista będzie miał zbiór dodatkowych fontów.

Zastosowanie krojów

Na ekranie komputera najłatwiej czyta się kroje bezszeryfowe (sans-serif), takie jak Verdana, Arial. Do tekstu nadaje się również szeryfowa Georgia. Times New Roman najlepiej pozostawić dla wersji do druku.

Krój Tahoma został zaprojektowany do użycia na przyciskach i w menu, dlatego gorzej sprawuje się przy większej ilości tekstu.

Impact nadaje się wyłącznie do dużych nagłówków, a Comic Sans MS trudno gdziekolwiek użyć, żeby nie wyglądał głupio i nieczytelnie.

Trebuchet MS bezszeryfowy krój zaprojektowany przez Microsoft z myślą o używaniu go wyłącznie na stronach WWW. Najlepiej nadaje się do stron z nowoczesnym wyglądem i krótkimi tekstami.

Czytelność tekstu

Optymalną szerokością kolumny tekstu jest między 40, a 60 znaków (zależnie od wielkości pisma), dlatego warto ograniczyć szerokość kolumny tak, aby jej szerokość nie odbiegała daleko od tego niezależnie od użytej rozdzielczości monitora i ew. powiększenia pisma. Można to uzyskać jednostką em:

  #text {min-width: 30em; max-width: 50em;}
  em jest bezpośrednio związane z wysokością, a nie szerokością tekstu, dlatego optymalne wartości trzeba dobrać „na oko”

Inicjały

Inicjał robi sie za pomocą float, selektora first-letter oraz różnych stylów tekstu.

 p:first-letter {float:left; font-size:3em;}
 Jednostka em równa się wysokości linii.

Zamiana tekstu na gradient

Aby upiekszyć stronę, możemy zamienić jej nagłówki na gradient przygotowany w CSS 3.
Możesz wygenerować kod gradientu na css3please.com

Stylizacja

Krawędzie (border) to niezwykle przydatny element CSS. Służą one głównie do „zakończania” paragrafów, list i innych „boxowych” elementów, jednak na tym ich zadanie się nie kończy.

Podstawowe właściwości

Efekt podkreślania

Jednym z najciekawszych zastosowań krawędzi jest zamiana zwykłego podkreślania linku text-decoration: underline na o wiele ładniejszy i ciekawszy text-decoration: none; border-bottom: 1px dotted #a00;.

link z border

Efekt „Gazety Wyborczej”

Jest to dość ciekawa praktyka stylizacji nagłówków.

h1 { border-bottom: 1px solid #ccc; border-left: 10px solid red; padding-left: 5px; }

Gazeta Wyborcza

Kombinacje 3D a'la MTV

Wypróbuj sam różne kombinacje kolorystyczne i wielkościowe. Przy odpowiednim doborze parametrów możesz stworzyć efekt 3D.

div { border-right: 10px; border-left: 2px; border-bottom: 10px; border-top: 2px; }

ulepszyć dział 3D

nie wiem jak zrobić hover w tym wiki


Zmodyfikowano: 30.08.2011, 00:38
submit