Autor |
Nachricht |
Benutzer 84934
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 06.09.2010 16:32
Titel IE Text mit Schatten |
|
|
http://udo-schmitz.de/test7
Läuft nun auf den aktuellen Versionen von FF,Opera,Safari und iOS. Nur der IE unterstützt kein "text-shadow" im CSS.
Also versuche ich
Code: | text-shadow: rgba(0,0,0,0.3) 3px 3px 5px; |
hiermit einigermaßen nachzuahmen:
Code: | filter:
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=4)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=4); |
Auf weiß sähe das ja einigermaßen erträglich aus, aber auf dem Holz fehlt eindeutig die Transparenz. Jetzt erinnere ich mich dunkel, dass man bei diesen Filtern Transparenz bestimmen kann ... Stimmt das und wenn ja, wie? Google sagt mir grad noch nix ...
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
Benutzer 84934
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 06.09.2010 18:55
Titel
|
|
|
Ah, cool. Das sieht ja vielversprechend aus. Äh ... und wo sage ich dem IE jetzt, dass er das benutzen soll?
Im oben genannten Link steht als Beispiel:
bzw.:
Code: | $(elem).textShadow({
color: "#000",
xoffset: "5px",
yoffset: "5px",
radius: "5px",
opacity: "50"
}); |
Muss ich jetzt 'ne Klasse definieren? Oder wieder als style mit cc ins HTML?
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 06.09.2010 19:20
Titel
|
|
|
Code: |
<!-- if gte IE8 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="yourpath/jquery.textshadow.js"></script>
<script>
$(div.deinshadowtextelement).textShadow({
color: "#000",
xoffset: "5px",
yoffset: "5px",
radius: "5px",
opacity: "50"
});
</script>
<!-- -->
|
Zuletzt bearbeitet von Smooth-Graphics am Mo 06.09.2010 19:20, insgesamt 1-mal bearbeitet
|
|
|
|
|
Benutzer 84934
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 06.09.2010 19:35
Titel
|
|
|
Das macht aber ein anderes Script kaputt, denn meine Seite benutzt ja schon jQuery ...
Gibt einen Konflikt mit Code: | <script type="text/javascript" src="js/script.js"></script> |
Damit werden die Polaroids gedreht und random verteilt.
Zuletzt bearbeitet von am Mo 06.09.2010 19:37, insgesamt 1-mal bearbeitet
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 06.09.2010 19:39
Titel
|
|
|
Du bindest aber nicht zweimal jQuery ein, oder? Sonst müsstest du gucken, ob dein andres Script schon eine Funktion namens "textShadow" benutzt.
|
|
|
|
|
Benutzer 84934
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 06.09.2010 19:40
Titel
|
|
|
Also, um das mal aufzudröseln:
Code: | <script type="text/javascript" src="http://www.google.com/jsapi"></script> |
Code: | <script type="text/javascript" src="js/script.js"></script> |
Hiermit werden die Polaroids in fast allen Brausern random gedreht und verteilt.
Code: | <script type="text/javascript" src="js/jquery.transform-0.8.0.min.js"></script> |
Hier wird das auch dem IE klar gemacht.
Code: | <script type="text/javascript" src="js/jquery.iphoneui.js"></script> |
Hier wird der iOS UI gesagt, das ein touch nicht scrollt, sondern die Polaroids bewegt.
|
|
|
|
|
Benutzer 84934
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mo 06.09.2010 19:45
Titel
|
|
|
Smooth-Graphics hat geschrieben: | Du bindest aber nicht zweimal jQuery ein, oder? |
Ich fürchte es. Mit Deinem Code sieht der script-teil meines Headers jetzt so aus:
Code: | <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.iphoneui.js"></script>
<!--[if gte IE8]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.textshadow.js"></script>
<script>
$(h1).textShadow({
color: "#000",
xoffset: "5px",
yoffset: "5px",
radius: "5px",
opacity: "50"
});
</script>
<![endif]--> |
Da schwirrt mir schon der Kopf
Zuletzt bearbeitet von am Mo 06.09.2010 19:48, insgesamt 2-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Box mit Schatten
Schatten
schatten mit css?!
[CSS] Schatten
Schatten in Slideshow
Schatten im .gif format?
|
|