Lemur zaprasza
P.bottom{ color : Gray; font : bold 15pt/15pt Verdana; text-indent : 0; } P.top{ margin-top : -22px; margin-left : -2 px; color : red; font : bold 15pt/15pt Verdana; text-indent : 0; } P.bottom1{ color : white; background : gray; font : bold 15pt/15pt Verdana; text-indent : 0; } P.top1{ margin-top : -22px; margin-left : -2 px; color : red; font : bold 15pt/15pt Verdana; text-indent : 0; } P.bottom2{ color : Gray; font : bold 30pt/0pt serif; text-indent : 0; } P.top2{ margin-top : -1%; margin-left : 5%; color : red; font : bold 15pt/15pt Verdana; text-indent : 0; } H1{ font : bold 3ex/3ex Arial, sans-serif; } H2{ font : bold 2.5ex/2ex Arial, sans-serif; } P.ex{ font : 1.7 ex/12 pt courier,monospace; text-indent : 0px; } P.sign{ font : normal 2ex/0 pt monospace; text-indent : 0px; } P.copy{ font : normal 1.4ex/1 em tahoma, sans-serif; text-indent : 0; } P.copy > B{ font : bold 0.7em/0.7 em tahoma, sans-serif; } Dodawanie cieniaPiotrX Każdy na pewno chciałby, aby jego strona wyglądała atrakcyjnie, lecz wraz z wzrostem "atrakcyjności" wzrasta ilość ściąganych bajtów. Jednym słowem - albo strona będzie ładnie wyglądać, albo będzie się szybko ładować, na szczęcie ten stan rzeczy można zmienić - stosując CSS. Dzięki CSS możemy posłużyć się zwykłym tekstem w miejscach, gdzie dotąd grafika wydawała się niezastąpiona. Aby nie być gołosłownym zaprezentuje pewien "sztandarowy" wręcz przykład, czyli: Cień elementu, czyli precz z grafiką Na początek przedstawię "zamysł koncepcyjny", czyli przykład: <html> <head> <title>Shadow</title> <style type="text/css"> P.bottom{ color : Gray; font : bold 15pt/15pt Verdana; } P.top{ margin-top : -22px; margin-left : -2 px; color : red; font : bold 15pt/15pt Verdana; } </style> </head> <body> <P class="bottom">To jest zwykly tekst - ale z cieniem <P class="top">To jest zwykly tekst - ale z cieniem </body> </html> Nasz przykład da następujący efekt: To jest zwykly tekst - ale z cieniem To jest zwykly tekst - ale z cieniem Istnieją jak widać pewne niedogodności - "cieniowany" tekst musimy pisać dwa razy, ale efekt na pewno jest tego wart :-). Nie omieszkam oczywiście wyjaśnić w czym rzecz, otóż w naszym cieniu wykorzystaliśmy jak widać arkusz stylów, w którym zdefiniowaliśmy dwie klasy: "top", i "bottom". Nasze klasy wykorzystaliśmy w najzwyklejszych paragrafach przez co uzyskaliśmy dużą elastyczność naszego "cienia", elastyczność owa ujawnia się również w tym, że nasz "cień" można zastosować do wszystkich innych elementów - od <A>, do <TABLE>. Oczywiście wygląd naszego cienia nie jest ostateczny, cały czas możemy nim sterować. Sterowanie cieniem polega na zmianach wartości "margin" dla klasy "top", poprzez modyfikacje wartości "margin-top" sterujemy naszym cieniem w pionie, a "margin-left" w poziomie. Kilka innych - ciekawszych sposobów przedstawię w następnym rozdziale. Wariacje na temat, czyli 101 sposobów na cień Cień jaki jest - każdy widzi. Czas go trochę "podrasować", jak sądzę zmiana czcionki, czy koloru nie będzie dla was problemem, więc zajmiemy się czymś ciekawszym. Autorom, którzy lubią jednolite kolory tła, na pewno przypadnie do gustu taki efekt: To jest zwykly tekst - ale z cieniem To jest zwykly tekst - ale z cieniem Uzyskuje się go poprzez dodanie właściwości "background-color", do klasy "bottom", oczywiście wartością naszej właściwości będzie "red", ale możliwości są nieograniczone... ot choćby zamiana kolorów - z czarnego na biały, i na odwrót. Następny efekt jest także godzien uwagi: To jest zwykly tekst - ale z cieniem To jest zwykly tekst - ale z cieniem Jak widać zmieniliśmy, i powiększyliśmy czcionkę, nie wygląda to dobrze, ale od czego wasza inwencja - czcionkę można zmniejszyć, zmienić kolor itp. Aby całość jako tako wyglądała, do właściwości "margin" można zastosować wartości procentowe, czy inne relatywne. Z braku pomysłów nie wyczerpałem tematu, a jak widać - jest co wyczerpać :-) Na czym rzecz polega, czyli ekshibicjonizm Cały efekt polega - jak łatwo zauważyć - na właściwościach "margin". Dzięki zastosowaniu wartości ujemnych jesteśmy w stanie ustawiać "element na elemencie", nie czyniąc żadnej "szkody" elementom które znajdują się nad, i pod naszym "efektem". Oczywiście do tego samego celu można użyć właściwości "top" i "left", ale przeglądarki różnią się trochę w ich interpretacji, a niektóre w ogóle tych właściwości nie obsługują. W temacie obsługi tego efektu, to wygląda on prawie dokładnie tak samo w Explorerze, i Navigatorze, niestety w przeglądarkach tekstowych, i nie obsługujących CSS, całość wygląda trochę dziwnie, ale takich przeglądarek nie zostało już zbyt wiele ;-) |