nicht angemeldet
schatten für <div> tags
hallo,
der ie erlaubt es einem ja mit filtern, dass eine schrift schatten wirft. ist das auch für <div> tags möglich? oder wie könnte man das am einfachsten realisieren?
ultros
-
Hallo ultros,
der ie erlaubt es einem ja mit filtern, dass eine schrift schatten wirft.
Ja. Aber auch nur der (auf diese Art und Weise). Daher würde ich es _nicht_ empfehlen.
ist das auch für <div> tags möglich?
ja. Prinzipiell auf alles. Selbst auf den <body> oder sowas.
Kleine Frage: Wieso hast du es nicht einfach ausprobiert? Dann würdest du ja sehen, ob es geht oder nicht.
oder wie könnte man das am einfachsten realisieren?
so wie du es sonst eben auch machst, z.B.
<div style="width:100%; font-size:64pt; color:blue; filter:DropShadow(color=#C0C0C0, offx=3, offy=3)">
Text mit Schattenwurf</div>oder eben
<div style="width:100%; font-size:48pt; color:magenta; filter:Shadow(color=#000000, direction=45)">
Text mit Schatten</div>Siehe SelfHTML:
- http://selfhtml.teamone.de/css/eigenschaften/filter.htm#drop_shadow
- http://selfhtml.teamone.de/css/eigenschaften/filter.htm#shadowMeine beiden kleinen beispielchen sind daraus ;-).
Beachte: Microsoft's Filter funktionieren nur, wenn du dem zu filternden Element eine width und/oder height-Angabe machst.
WauWau
--
ss:) zu:) ls:& fo:) de:] va:) ch:° n4:( rl:( br:^ js:| ie:% fl:{ mo:|
E-Mail WauWau: [mailto:der-wauwau@gmx.de]-
neinein, das ist leider mißverstanden worden.
ich möchte nicht text haben, der einen schatten wirft, sondern der layer (<div>-tag) selbst soll einen schatten werfen.
ultros
-
Hallo ultros,
ich möchte nicht text haben, der einen schatten wirft, sondern der layer (<div>-tag) selbst soll einen schatten werfen.
Das <div> müsste dann eigentlich einen Schatten werfen, wenn du ihm z.B. einen Rahmen, "border: 1px solid black", verpasst.
Ansonsten probier' es doch mal, in dem du einem übergeordnetem Element den Schatten zuweist:
<div style="filter:DropShadow(color=#C0C0C0, offx=5, offy=5)">
<div style="border: 2px solid black;">und der Text</div>
</div>Oder was meinst du?
WauWau
--
ss:) zu:) ls:& fo:) de:] va:) ch:° n4:( rl:( br:^ js:| ie:% fl:{ mo:|
Self ist der WauWau-
also, ich weiss nicht, was bei mir nicht stimmt. den text-schatten sehe ich wunderbar, aber bei deinem beispiel ist einfach nur eine rechteckige box (layer) da, in der text steht. nichts wirft schatten :(
und zu dem anderen beispiel:
div.schatten {
border-bottom: 1px solid black;
borcer-right: 1px solid black;
}wie füge ich denn einem div-tag die eigenschaft schatten zu? das ist doch keine klasse, oder?
-
Moin!
wie füge ich denn einem div-tag die eigenschaft schatten zu? das ist doch keine klasse, oder?
natürlich ist das eine klasse.
<div class="schatten">....</div>
ani--
Wer mit sich selber
in Frieden lebt,
kommt nicht in Versuchung,
anderen den Krieg zu erklären.
-
-
-
-
-
Hallo.
der ie erlaubt es einem ja mit filtern, dass eine schrift schatten wirft. ist das auch für <div> tags möglich? oder wie könnte man das am einfachsten realisieren?
Das hängt davon ab, wie dein div aussieht.
Am einfachsten ist es wohl ein zweites div mit gleichen ausmaßen zu basteln, um ein paar Pixel zu verschieben und es mit z-index unter das erste zu legen.
So toll sieht das natürlich nicht aus, wirklich gute Methoden sind da schon etwas schwerer.
Ein schönes Beispiel gibt's auf: http://www.alistapart.com/articles/cssdrop2/MfG _Siro.
-
Hi,
div.schatten {
border-bottom: 1px solid black;
borcer-right: 1px solid black;
}Die einfachste Lösung, die in allen (aktuellen, grafischen) Browsern funktioniert.
E7
-
Hallo, ultros,
Hier ein Beispiel für eine Bannerumrandung mit Schatten ...
Grüße,
Sebastian
<style>
.inset{
border-bottom: #999999 1px solid;
border-right: #999999 1px solid;
border-left: #777777 1px solid;
border-top: #777777 1px solid;
background: #CCCCCC;
}.outset{
color: #F5F5F5;
border-bottom: #777777 1px solid;
border-right: #777777 1px solid;
border-left: #999999 1px solid;
border-top: #999999 1px solid;
background: #999999;
filter: progid:DXImageTransform.Microsoft.Shadow(color=666666, Direction=135, Strength=4);
}
</style><div align="right">
<table class="outset" cellspacing="0" cellpadding="2" border="0">
<tr>
<td>
<table width="470" height="62" class="inset" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a hidefocus href="link.htm"><img src="img/banner.gif" width="468" height="60" border="0" alt="Banner" title="title"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>