X
ďťż

listart.cgi

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









  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • teen-mushing.xlx.pl
  • Wątki
    Powered by wordpress | Theme: simpletex | © Lemur zaprasza

    Drogi uzytkowniku!

    W trosce o komfort korzystania z naszego serwisu chcemy dostarczac Ci coraz lepsze uslugi. By moc to robic prosimy, abys wyrazil zgode na dopasowanie tresci marketingowych do Twoich zachowan w serwisie. Zgoda ta pozwoli nam czesciowo finansowac rozwoj swiadczonych uslug.

    Pamietaj, ze dbamy o Twoja prywatnosc. Nie zwiekszamy zakresu naszych uprawnien bez Twojej zgody. Zadbamy rowniez o bezpieczenstwo Twoich danych. Wyrazona zgode mozesz cofnac w kazdej chwili.

     Tak, zgadzam sie na nadanie mi "cookie" i korzystanie z danych przez Administratora Serwisu i jego partnerow w celu dopasowania tresci do moich potrzeb. Przeczytalem(am) Polityke prywatnosci. Rozumiem ja i akceptuje.

     Tak, zgadzam sie na przetwarzanie moich danych osobowych przez Administratora Serwisu i jego partnerow w celu personalizowania wyswietlanych mi reklam i dostosowania do mnie prezentowanych tresci marketingowych. Przeczytalem(am) Polityke prywatnosci. Rozumiem ja i akceptuje.

    Wyrazenie powyzszych zgod jest dobrowolne i mozesz je w dowolnym momencie wycofac poprzez opcje: "Twoje zgody", dostepnej w prawym, dolnym rogu strony lub poprzez usuniecie "cookies" w swojej przegladarce dla powyzej strony, z tym, ze wycofanie zgody nie bedzie mialo wplywu na zgodnosc z prawem przetwarzania na podstawie zgody, przed jej wycofaniem.