box-shadow und border-radius

[uliS]

Hallo,

ich bekomme im Safari Browser einfach keine Schatten angezeigt, owohl er das eigentlich können müsste und obwohl ich im stylesheet die entsprechenden Voranstellungen (-moz, usw.) verwende.

Ein anderes Problem sind die runden Ecken - zwar werden die in fast allen Browsern angezeigt solang das die gesamte box betrifft, wenn ich aber nur zwei abrunde (topleft, topright), dann versagen ausser Firefox alle gängigen Browser - Chrome, Opera, Safari, IE sowieso....

Gibt es da noch einen besonderen Trick, oder eine Einstellung, die man im Browser selbst vornehmen muss? Soweit das css angeht, hab ich glaub alles durch, was das Netz so an Informationen anbietet. Zu Safari findet sich leider nicht viel.


Grüsse Uli

[hero-master]

Hi Uli,
ohne den Code-Schnipsel wird es sehr schwer dir auf die Sprünge zu helfen

[uliS]

Hallo Nico,


{background-color: #4A4942; moz-border-radius: 5px; -khtml-border-radius: 5px;-moz-box-shadow: inset 0px 0px 25px black; -webkit-box-shadow: inset 0px 0px 25px black; box-shadow: inset 0px 0px 25px black;}

{background-color: #4a4942; -moz-border-radius-topright: 5px; -khtml-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; -khtml-border-radius-topleft: 5px;}


Wie gesagt - keinerlei Schatten in Safari, komplette box mit runden Ecken kein Problem, zwei Ecken werden nur im Firefox angezeigt.


Grüsse Uli

[sejuma]

Schatten und runde Ecken sind noch kein offizieller CSS-Standard und werden nicht von allen Browsern unterstützt.
Bis dahin helfen nur einige Tricks mit angefertigten Grafiken:
Schatteneffekt
Abgerundete Ecken

[hero-master]

Bis dahin helfen nur einige Tricks mit angefertigten Grafiken:

Oder mit jQuery

Safari kann bereits box-shadow und abgerundete Ecken, da musst du mit dem Präfix "-webkit" arbeiten. Schau dich mal auf meiner Umbau-Seite um, dort bejutze ich auch runde Ecken an nur zwei Seiten: http://www.nicogutmann.de

[uliS]

Hallo zusammen,

erstmal Danke für eure Antworten. Wie Nico schon sagt, Safari kann durchaus Schatten und runde Ecken darstellen, aber bei mir tut er`s einfach nicht. Ich hab schon alles durchprobiert aber auch mit "webkit" funktionierts nicht. Deshalb meine Vermutung ob vielleicht im Browser selbst irgendeine Einstellung gemacht werden muss, damit er das darstellt?

Ein Problemchen dass ich im Chrome Browser noch hab krieg auch nicht in den Griff - und zwar nimmt da die Box die Rundungen an, aber nicht der Schatten. Dunkler Schatten auf Dunklen Hintergrund fällt zwar nicht so sehr auf, aber ärgerlich ist es schon, dass da so kleine Spitzen über die Rundungen ragen.

Es handelt sich um eine gekaufte Shopsoftware, die ich lediglich css-technisch umgestalte. Ich weiss nicht, ob ich da einfach mal eben jquery integrieren kann, aber ich werd mich mal schlau machen.


Grüsse Uli

[th2409]

Die Notationen in Mozilla und Webkit sind unterschiedlich, auch wenn sie dereinst in CSS3 wohl gleich sein werden (sollen).

-x-border-radius ist OK, aber die einzelnen Ecken-Beschreibungen haben unterschiedliche Syntax. Bsp. -moz-border-radius-topright und -webkit-border-top-right-radius.

Mal hier gucken.

[uliS]

Hallo Thomas,

Danke für den Hinweis, das ist mir gestern auch schon aufgefallen, als ich mir Nicos Quelltext angeschaut habe. Das mit den runden Ecken klappt jetzt auch, aber in puncto Schatten tut sich leider immer noch nichts....


Grüsse Uli

[hero-master]

Zeig uns doch einfach mal ein Stückchen Code damit wir uns ein Bild davon machen können

[uliS]

Hallo Nico,

dachte du meintest mit Codeschnipsel einen Auszug aus dem Stylesheet.
Das Ganze ist PHP- und tabellenbasiert, nicht gerade das Modernste. Hab hier mal das login-template kopiert, hoffe dass Du damit jetzt was anfangen kannst?

------------------------------------------------------------------------------------------------------------

<?
if ( !defined('INCLUDED') ) { die("Access Denied"); }
?>

<?=$header_registration_message;?>
<br>
<?=$invalid_login_message;?>

</table>
<table width="80%" height="185" border="0" align="left" cellpadding="5" cellspacing="5" class="contentfont">
<tr valign="top">
<td width="50%" align="center" class="border c2"><p><b>
<?=MSG_NEW_TO;?>
<?=$setts['sitename'];?>
?</b><br />
<br />
<?=MSG_REGISTRATION_MSG;?>
</p>
<form action="register.php" method="post">
<input name="submit" type="submit" class="buttons" value="<?=MSG_REGISTER_FOR_ACCOUNT;?>" />
</form>
<p></p></td>
<td width="50%" align="center" class="border c2"><b>
<?=MSG_ALREADY_A;?>
<?=MSG_USER?>
<?=$setts['sitename'];?>
? </b><br />
<form action="<?=($setts['enable_enhanced_ssl']) ? $setts['site_path_ssl'] : SITE_PATH;?>login.php" method="post">
<input type="hidden" name="operation" value="submit" />
<input type="hidden" name="redirect" value="<?=$redirect;?>" />
<table width="100%" border="0" cellpadding="2" cellspacing="2" align="center">
<tr>
<td align="right"><?=MSG_USERNAMENEW?></td>
<td><input name="username" type="text" id="username" /></td>
</tr>
<tr>
<td align="right"><?=MSG_PASSWORD?></td>
<td><input name="password" type="password" id="password" /></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="checkbox" name="remember_username" value="1" />
<?=MSG_REMEMBER_ME;?></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="form_login_proceed" type="submit" id="form_login_proceed" value="<?=MSG_LOGIN_TO_MEMBERS_AREA;?>" /></td>
</tr>
</table>
</form>
<a href="<?=SITE_PATH;?>retrieve_password.php">
<?=MSG_LOST_PASSWORD;?>
</a></td>
</tr>

<tr valign="top">
<td colspan="2" align="center"><img src="images/.jpg" width="868" height="100" /></td>
</tr>
</table>

---------------------------------------------------------------------------------------------------------------



Grüsse Uli

[hero-master]

Aso, stimmt ja...hattest ja schon gepostet
Und jetzt sehe ich erst, dass du den Schatten nach innen haben willst. Das funktioniert glaube ich weder in Chrome, noch in Safari bisher. Also hast du nichts falsch gemacht, sondern die Software ist noch nicht in der Lage das darzustellen

[uliS]

Hatte mich schon gefragt was Du aus dem Code rauslesen wolltest, aber ich lern ja gern immer was dazu....

Also, soweit ich das in Erfahrung gebracht hab kann Safari durchaus Schatten darstellen und zwar schon ab der Version 3.x. Worauf ich aber noch keine Antwort gefunden habe ist, ob der vielleicht die "inset shadows" noch nicht darstellen kann. Muss mal eine Testseite basteln und das ausprobieren. Chrome kann das auf jeden Fall, aber da übernimmt der Schatten nicht Rundungen. Hab die Grafik zur verdeutlichung mal etwas heller gemacht....




Grüsse Uli

[hero-master]

Das hatte ich ja geschrieben: Safari kann mit "inset" noch nichts anfangen. Mit Schatten nach außen hat Safari kein Problem, das stimmt
Aber da würde ich mich jetzt nicht darauf fixieren, dass alles in jedem Browser gleich aussieht, Stichwort "Progressive Enhancement". Wobei ich generell innere Schattenwürfe vom gestalterischen Gesichtspunkt her selten für gut befinde, aber das steht wieder auf einem anderem Stück Papier

[uliS]

Ja, ist Geschmacksache, aber die Shopsoftware lässt da nicht so viel Spielraum. Wird ein Bikershop und sieht in dem Fall in Gänze und mit den richtigen Farben betrachtet meiner Meinung nach relativ ansprechend aus.
Bis ich damit online gehe vergehen sicher noch ein paar Monate, werd das Apple und Google mal mitteilen. Vielleicht tut sich ja bis dahin noch was bei den Browsern. Allen Browsern kann man`s eh nicht recht machen, IE versagt da ja noch völlig.....

Jedenfalls besten Dank für die Mühe..


Ciao Uli