[home]
techniki internetowe[home] 18/X
[top]

When I am working on a problem, I never think about beauty. I think only of how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong.

R Buckminster Fuller

Obrazki tła, stylizacja odsyłaczy

Podstawy

Obrazek [wzorek] umieszczamy w tle strony w taki sposób:

body { background: url("/images/pattern.png"); }

Teraz na topie są wypełnienia gradientowe. Jeśli ten obrazek [dwell] umieścimy w tle elementu h1

h1 { background: #FF1C27 url("/images/dwell.png") repeat-x; color: white; height: 64px; padding: 10px 0 0 20px; } body { background-color: #FF1C27; }

to otrzymamy taki oto efekt

Powyższy obrazek został wygenerowany w następujący sposób:

convert -size 1x64 gradient:'#172234'-'#FF1C27' dwell.png

Zdecydowanie najczęściej będziemy potrzebować prostokątnych obrazków w jednym kolorze:

albo w dwóch kolorach:

Pierwszy obrazek możemy utworzyć w taki sposób:

convert -size 256x32 xc:'#15001A' 1color.png

A drugi obrazek — w taki sposób:

convert -size 32x192 xc:'#15001A' -size 32x64 xc:'#FFF600' -append tmp.png
convert -rotate 90 tmp.png 2color.png
rm tmp.png

Program convert pochodzi z pakietu ImageMagick.

Na stronach WWW widzimy też obrazki umieszczane w taki oto sposób:

h1 { height: 60px; padding-left: 90px; background: url("/images/listek.png") no-repeat left center; }

Wymiar obrazka w pixelach otrzymamy wykonując polecenie:

identify listek.png

Wiele fajnych obrazków znajdziemy w fontach. Na przykład po wczytaniu fontu webdings.ttf do programu fontforge (locate webdings.ttf) zobaczymy, że taki oto znaczek [tools] jest umieszczony na pozycji znaku @ (U+0040)).

Jeśli znamy kod znaczka, to powyższy obrazek można wygenerować w taki oto sposób:

printf '\x40' | convert -font /usr/share/fonts/msttcorefonts/webdings.ttf \
         -pointsize 64 label:@- tools.png

Listę fontów zainstalowanych w systemie otrzymamy wykonując polecenie:

convert -list type

A wygenerowany obrazek możemy obejrzeć wykonując polecenie:

display tools.png

Niestety wygenerowany obrazek nie nadaje się do umieszczenia w tle ponieważ sam ma białe tło i tła jest za dużo. Pozbywamy się zbędnego tła oraz zamieniamy pozostały biały kolor na kolor(?) przezroczysty

convert tools.png -trim tmp.png
convert tmp.png -transparent white tools.png
rm tmp.png

Jeszcze nie wszystko jest tak jak trzeba [tools2] ponieważ zostało nieco białego koloru (tutaj tego nie widać ponieważ tło tego akapitu też jest białe). Niestety trzeba go ręcznie usunąć (na przykład korzystając z programu gimp).

Położenie tła: wartości procentowe

Bok każdego z większych kwadratów ma 300px, a bok każdego mniejszego kwadratu umieszczonego w tle ma 200px. Górny lewy narożnik mniejszego szarego kwadratu jest przesunięty o 50px w lewo i w dół względem narożnika większego białego kwadratu. O ile pixeli jest przesunięty narożnik mniejszego białego kwadratu względem lewego górnego narożnika większego szarego kwadratu?

div.white { width: 300px; height: 300px; background: url(/images/a.png) no-repeat 50px 50px; background-color: #F3F1F1; /* wet toilet paper */ } div.grey { width: 300px; height: 300px; background: url(/images/b.png) no-repeat 25% 25%; background-color: #1B1B1B; /* nobody's home */ }

Stylizacja odsyłaczy: selektory pseudoklas

Wyróżnianie różnych typów odsyłaczy. Na przykład odsyłacze prowadzące do zewnętrznych stron możemy wyróżnić umieszczając w tle na przykład taki symbol [external link] (podobny do znaczka na stronach Wikipedii)

a[href^="http:"] { background: url(/images/link.png) no-repeat right top; padding-right: 11px; }

Analogicznie można wyróżnić odsyłacze prowadzące do plików PDF, DOC etc. Uwaga: powyższy kod korzysta z selektorów CSS 3.

Pseudoklasy opisują stan elementu. W wypadku odsyłaczy mamy następujące selektory pseudoklas:

Zazwyczaj używamy tych selektorów aby wyłączyć podkreślenie odsyłaczy i właczyć je kiedy są kliknięte bądź hovered:

a:link, a:visited { text-decoration: none; } a:hover, a:active { text-decoration: underline; }

Uwaga: kolejność selektorów jest istotna. Jeśli przestawimy selektory, to selektory :active i :hover nie będą działać (kaskada)

Tak naprawdę, to podkreślenia zamieniamy na ramki, ponieważ podkreślenia brzydko wyglądają, a na dodatek w menu odsyłacze stylizujemy na przyciski (przykład).

Materiały w sieci

Optimize Images

Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:

pngcrush image.png -rem alla -reduce -brute result.png

Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize and remove comments and other useless information (such as EXIF information) from your images.

jpegtran -copy none -optimize src.jpg > dest.jpg

Cytat za Best Practices for Speeding Up Your Web Site.

[top]