listart cgi id=6




Helion dhtml site


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
[strona główna] [skrypty]

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 ;-)


© Wydawnictwo Helion


Wyszukiwarka

Podobne podstrony:
listart cgi id=3
listart cgi id=22
listart cgi id=25
listart cgi id=5
listart cgi id=24
listart cgi id=2
listart cgi id=16
listart cgi id=26
listart cgi id=15
listart cgi id=18
listart cgi id=4
listart cgi id=4
listart cgi id=20
listart cgi id=7
listart cgi id=21
listart cgi id=10
listart cgi id=11
listart cgi id=19
listart cgi id=28

więcej podobnych podstron