Cień Pod Obrazkiem

mystery · 4 Sierpnia 2005

mam problem ze zrobieniem cienia pod obrazkiem korzystajac ze specyfikacji html/css. poprostu nie wychodzi mi to. czytałem poradniki online, ale często nic nie było na ten temat, a jak już znalazłem to nie bardzo rozumiałem intencji autora. wiec proszę teraz was o pomoc. podajcie przykład, kod, cokolwiek, będę bardzo wdzieczny.

z tego co wiem, efekt ten będzie widoczny tylko w ie 4.0 i nowszym, a inne przegladarki będa miały problem, więc teraz stawiam drugie pytanie, czy można to zrobic za pomoca php, albo java script, aby efekt był widoczny w większosci popularnych przegladarek (opera, firefox, netscape, etc)

pozdrawiam

mystery

czara · 4 Sierpnia 2005

w java script chyba da rade to zrobic

ale nie latwiej zrobic ten cien w programie graficznym ??

i wtedy nie bedzie zadnych problemow z kompatybilnoscia w przegladarkach :]

thebruno · 4 Sierpnia 2005

Zawsze możesz otworzyć worda, wkleić obrazek, z paska obrazek dodać cień, zapisać jako HTML i już. Trzeba sobie jakoś w życiu radzić:)

Pozdr

mystery · 5 Sierpnia 2005

taaa, a potem dokumemt bedzie kilka mega waazył :P

na co mi te tysiac niepotrzebnych znacznikow...

chyba zorbie cien w programie graficznym, ale jak pomyśle że do zrobienia mam tak przerobić około 200 zdjęć to tylko :mur:

słyszałem też że w photoshopie można zrobić jakiś chyba algortym ktory automatycznie mniejszy rozmiar, doda cień i takie tam bajery :P

m4r · 9 Sierpnia 2005

poszukaj w Sieci magicznych słów "batch conversion", albo (PL) "konwersja wsadowa"- to ci załatwi sprawę cieniowania każdego obrazka osobno.

Poza tym, możesz zrobić w css, przez manipulację na warstwach- pierwsza warstwa- obrazek w divie, druga- pusty div o rozmiarach takich samych jak obrazek, z ciemnym wypełnieniem, albo z tym samym obrazkiem przyciemnionym przez filtry (mogą nie działać w operze. FF sobie radzi. NS- nie wiem, IE- od niego się zaczęło), albo z takich samych rozmiarów obrazkiem cienia.

Przyklad CSS:

<html>

<head>
<title>test cienia</title>
<style type="text/css">
#tlo{
position:relative;
top: 100px;
left: 85px;
}

#obrazek{
position:relative;
top: 5px;
left: 80px;
}
</style>
</head>

<body>
<div>
<div id="tlo"><img src="obrazekmenu.png"></div>
<!--tutaj akurat ten sam obrazek, ale to bylo tylko testowanie czy dzialaja warstwy-->
<div id="obrazek"><img src="obrazekmenu.png"></div>
</div>

</body>

Mając dostęp do php możesz napisać skrypt który umieści ci obrazek w tabelce, której kod html będzie wyglądał mniej-więcej tak:

<table>
<!-- rząd pierwszy -->
<tr>
<td class="lewy_gora">
</td>
<td class="gora">
</td>
<td class="prawy_gora">
</td>
</tr>
<!-- rząd drugi -->
<tr>
<td class="lewy">
</td>
<td><img src="adres obrazka" />
</td>
<td class="prawy">
</td>
<!-- rząd pierwszy -->
<tr>
<td class="lewy_dol">
</td>
<td class="dol">
</td>
<td class="prawy_dol">
</td>
</tr>
</table>

do tej tabelki potrzebujesz jeszcze arkusza css (jeżeli chcesz zrobić kod bardziej czytelny):

<style type="text/css">
.lewy_gora{
background: url("adres obrazka z lewym górnym rogiem");
width: szerokość obrazka z rogiem cienia;
height: wysokość     ----  | | -----;
}
.gora{
background: url("adres obrazka z "górą" cienia");
}
.prawy_gora{
background: url("adres obrazka z prawym górnym rogiem");
}
.lewy_gora{
background: url("adres obrazka z lewym górnym rogiem");
}
.lewy{
background: url("adres obrazka z lewą stroną cienia);
}
.prawy{
background: url("adres obrazka z prawą stroną cienia");
}
.lewy_dol{
background: url("adres obrazka z lewym dolnym rogiem");
}
.dol{
background: url("adres obrazka ze spodem cienia");
}
.prawy_dol{
background: url("adres obrazka z prawym dolnym rogiem");
width: szerokość obrazka z tym rogiem cienia;
height: wysokość     ----  | | -----;
}
</style>

Jeszcze tylko musisz pamiętać, żeby ustawić border dla tej tabelki na zero, marginesy wewnątrz komórek na zero, spacing i padding na zero. Efekt będziesz miał taki jak tutaj.

Skryptu php nie będę pisał, bo jest prosty jak konstrukcja cepa- chodzi mniej więcej o to, żeby pobrać z katalogu nazwę obrazka, jego rozmiary, i wstawić je w odpowiednie pola html- nazwę w linku do obrazka, a rozmiary jako jego parametry.

to tylko kilka metod cieniowania obrazków. Możesz jeszcze oblać obrazek cieniowany samymi cieniami (bez tabelki), ale wtedy musisz mieć dokładnie podane rozmiary wszystkich obrazków. Takie coś jest Np. na www.megatokyo.com

Edytowane 9 Sierpnia 2005 przez MareCeK

mystery · 11 Sierpnia 2005

wielkie dzięki, ale widze w cholere z tym roboty, wiec cien juz zrobilem w programie graficznym.

widze ze znasz się na tym dobrze, bo mam teraz mały problem ze styalmi css, a wlasciwie problem stanowi rozna interpretacja stylów przez przegladarki.

wiecej napisze ci na priva :)

pozdrawiam

mystery

mystery · 29 Sierpnia 2005

witam ponownie, nie zakładałem nowego tematu, bo rzecz dotyczy poniekad wątku wcześniejszego. chodzi o interpretacje stylów przez przegldarki, a szczególnie przez wciąż (chyba) najpopularniejszy ie.

mam taki skrypt

<script language="JavaScript"><!--MSFPhover =   (((navigator.appName == "Netscape") &&   (parseInt(navigator.appVersion) >= 3 )) ||   ((navigator.appName == "Microsoft Internet Explorer") &&   (parseInt(navigator.appVersion) >= 4 ))); function MSFPpreload(img) {  var a=new Image(); a.src=img; return a; }// --></script>

oraz

<script language="JavaScript"><!--if(MSFPhover) { MSFPnav1n=MSFPpreload("images/firma.gif"); MSFPnav1h=MSFPpreload("images/firma1.gif"); }// --></script><a href="#" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1h.src" onmouseout="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1n.src"><img src="images/firma.gif"  alt="O firmie" name="MSFPnav1"></a>

jak widać jest to skrypt, który po najechaniu myszką na obrazek (w tym wypadku element menu) zmienia go na inny.

i wszystko byłoby super gdyby nie ten %@!#$%@#% ie.

otóż gdy menu takie umieszczone jest w tabelce to nie wiem dlaczego ale zmienia ustawienie komórki, jakby dodając jej parametr

valign="top"

inne przegldarki interpretują skrypt tak jak należy, czyli nic się nie przesuwa, wszystko jest na swoim miejscu.

bym sie zbytnio nie przeją tym, gdyby ie był podrzędna, mało używaną porzegladarką, ale niestety tak nie jest

czy da się to zrobić tak zeby było dobrze?

a może zastosować inny skrypt, ale dający taki sam efekt co ten?

jednym słowem help

ps. !#$%!@#, !#$%!#$, !#$^!, @%$!^~!, !#^% ie...

mystery · 29 Sierpnia 2005

patrze że nikt nie zdążył mi odpowiedzieć. no cóż sam znalazłem odpowiedź

a więc ludzie nie uzywajcie tego głupiego skryptu który wcześniej napisałem, bo zajmuje on duzo miejscą i jeszcze ie go źle intyerpretuje.

tak, znalazłem lepszy, któtszy i tak samo działający skrypt

w sekcje head wrzucamy to:

<script language="JavaScript">         a2=new Image(96,32)	a2.src="images/projekt211_02.gif"	a3=new Image(96,32)	a3.src="images/projekt212_02.gif"	function filter(imagename,objectsrc){	if (document.images)	document.images[imagename].src=evaluate(objectsrc+".src")	}</script>

no a potem gdzieś gdzie ma być link to:

<a href="#"    onmouseover="filter('a1','a3')" onmouseout="filter('a1','a2')"><img    src="images/projekt211_02.gif" width="96" height="32" border="0" name="a1"    alt=""></a>

działa dobrze :mrgreen:

jak to dobrze chodzic po stronach i grzebać w źródłach...

btw to w ten sposób bardzo dużo się nauczyłem: html+css a teraz skrypty javy :P

pozdrawiam

mystery

Zaloguj się

Cień Pod Obrazkiem

Rekomendowane odpowiedzi

mystery

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

czara

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

thebruno

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

mystery

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

m4r

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

mystery

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

mystery

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

mystery

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Dołącz do dyskusji

Przeglądaj

Cała aktywność