Praca z kodami HTML - efekt cienia na prezentacji

W jednym z postów pokazywałam na czym polega budowa kodów HTML. Korzystając z tego postu lub od razu z gotowych kodów możemy ozdobić prezentację dodatkowymi efektami pokazanymi TU.

Od razu na wstępie zaznaczę że pracujemy tylko na fragmencie dotyczącym tekstu. Tak więc mając kod na 1 ramkę:

<div style="background-image:url(wklejamy adres url grafiki); width: {szerokość obrazka}px;  height: {wysokość obrazka}px; color: rgb(0, 0, 0); overflow: auto; margin-top: 0px; margin-left: 0px;">

<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div></div>

Pracować będziemy na tym fragmencie:

<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki">Tekst</font></font></div></div>

Potrzebny nam kod "ozdobienia", który chcemy zastosować. W moim przypadku jest to kod na cień (który po odpowiednim zmodyfikowaniu jest neonem).

<span style="text-shadow: ♥px ♠px ♣px kolor z palety rgb;">Tekst</span>

 (oznaczenia: Podstawiając liczby za ♥ i ♠ otrzymamy położenie cienia. Gdy wartości te wynoszą 0 tworzy nam się tzw. neon. ♣ odpowiada za grubość cienia.)

Gdzie go wstawiamy:

<div style="margin-left: {odległość ramki od lewej krawędzi obrazka}px; width: {szerokość ramki}px; height: {wysokość ramki}px; overflow: auto; ; margin-top: {odległość od górnej krawędzi obrazka}px;"><font color="kod koloru z palety RGB"><font size="1"><font face="nazwa czcionki"><span style="text-shadow: ♥px ♠px ♣px kolor z palety rgb;">Tekst</span></font></font></div></div>

Wstawiony fragment zaznaczyłam na zielono. Po podstawieniu wartości u mnie wygląda to tak:

Czcionki można oczywiście zmieniać według swojego uznania. Ważne jest tylko to aby zachować odpowiednią wielkość liter przy wpisywaniu nazwy.

Jeśli komuś potrzebny jest kod to proszę się częstować:

<div style="background-image: url(http://oi60.tinypic.com/zwiwpg.jpg); width: 500px; height: 500px; overflow: auto; margin-top: 0px; margin-left: 0px;">

<div style="margin-left: 30px; width: 443px; height: 443px; overflow: auto; margin-top: 30px;"><font><font size="6"><font face="Frosting for breakfast "><font color="#ffffff"><span style="text-shadow: 3px 4px 5px #330033;">Tak wygląda tekst napisany czcionką Frosting for breakfast posiadający cień 3px 4px 5px #330033</span></font><br><br><br>
<span style="text-shadow: 0px 0px 15px #ffff00;"><font color="#00d7ff">
A tak tekst napisany czcionką Frosting for breakfast  posiadający cień 0px 0px 15px #ffff00 czyli neon :)</font><br></span></font></font></font></div></div>

Oczywiście kod możecie sprawdzić w Testerze HTML :)

No i to by było na tyle.

mugi-chan