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;}
Jednostkaem
równa się wysokości linii.
Zamiana tekstu na obrazek
Aby upiekszyć stronę, możemy zamienić jej nagłówki na przygotowany wcześniej obrazek
<html>
<head>
<style>
h1#top {
background: url('http://www.google.com/images/logo_sm.gif') no-repeat;
width: 150px;
height: 55px;
}
h1#top span {
display: none;
}
</style>
</head>
<body>
<h1 id="top"><span>
Naglowek Google</span></h1>
</body>
</html>
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
- Grubość krawędzi: wyrażana w pixelach, em, pt — border: 1px solid red;
- Rodzaje linii: solid (ciągła), dotted (kropkowana), (inne są beznadziejne ;) — border: 1px solid red;
- Kolor: wyrażany angielskimi nazwami, lub wartościami HEX — border: 1px solid red/#f00;
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;
.
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ć lub usunąć dział 3D
nie wiem jak zrobić hover w tym wiki
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 16.04.2007, 15:36