Skocz do zawartości


Zdjęcie

Niewidoczne na stronie style CSS , przeglądarka nie interpretuję ?


  • Zaloguj się, aby dodać odpowiedź
2 odpowiedzi w tym temacie

#1 Kpuc

Kpuc

    Rozgrzewam się

  • Użytkownik
  • 69 postów

Napisano 2012.09.14, 10:08

Witam po długiej nieobecności, mam pewien problem z wbudowanymi stylami na stronie, chciałbym zrobić przyciski z gradientem i cieniem, ... Sęk w tym że w FF14, Opera12, IE9, nie wyświetlają się te dodatki graficzne.

Kod:

<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Grafikipl</title>
<meta name="description" content="Moja strona">
<meta name="keywords" content="Grafika, Komputer, Gimp, 3D">
<meta name="author" content="Krzysztof Jezierski">
<meta name="categories" content="Grafika">
<meta name="generator" content="Ked">
<link rel="shortcut icon" href="images/ikonka.ico">
<style type="text/css">
div#container
{
width: 1250px;
height: 720px;
margin-top: 0px;
margin-left: 0px;
text-align: left;
}
body
{
background-color: #282828;
background-image: url(images/tlo.png);
background-attachment: fixed;
background-position: center center;
color: #FFFFFF;
}
a
{
color: #C8D7EB;
outline: none;
text-decoration: none;
}
a:visited
{
color: #00FF00;
}
a:active
{
color: #FFFF00;
}
a:hover
{
color: #FF0000;
text-decoration: underline;
}
#CssMenuDolne a
{
display: block;
float: left;
margin: 0px 20px 0px 0px;
color: #376BAD;
border: 0px #376BAD none;
background-color: #FFFF80;
background: -moz-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: -webkit-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: -o-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: -ms-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
font-family: "Comic Sans MS";
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
padding: 15px 40px 15px 40px;
text-align: center;
-moz-box-shadow: 2px 2px 2px #000000;
-webkit-box-shadow: 2px 2px 2px #000000;
box-shadow: 2px 2px 2px #000000;
}
#CssMenuDolne a:hover, #CssMenuDolne .active
{
color: #376BAD;
background-color: #002840;
background: -moz-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: -webkit-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: -o-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: -ms-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
border: 0px #376BAD none;
}
#CssMenuLewe a
{
display: block;
margin: 0px 0px 10px 0px;
color: #376BAD;
border: 0px #376BAD none;
background-color: #FFFF80;
background: -moz-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: -webkit-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: -o-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: -ms-linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
background: linear-gradient(top,#FFFF7F 0%,#FFFF7F 50%,#FFFF7F 50%,#FFFF7F 100%);
font-family: "Comic Sans MS";
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 150px;
height: 20px;
vertical-align: middle;
line-height: 20px;
text-align: center;
-moz-box-shadow: 2px 2px 2px #000000;
-webkit-box-shadow: 2px 2px 2px #000000;
box-shadow: 2px 2px 2px #000000;
}
#CssMenuLewe a:hover, #CssMenuLewe .active
{
color: #376BAD;
background-color: #002840;
background: -moz-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: -webkit-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: -o-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: -ms-linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
background: linear-gradient(top,#00273F 0%,#00273F 50%,#00273F 50%,#00273F 100%);
border: 0px #376BAD none;
}
</style>
</head>
<body>
<div id="container">
<img src="images/img0001.png" id="Objekt1" alt="" title="" style="position:absolute;left:158px;top:194px;width:679px;height:380px;border-width:0;z-index:0">
</a>
<img src="images/img0002.png" id="Objekt2" alt="" title="" style="position:absolute;left:158px;top:294px;width:164px;height:180px;border-width:0;z-index:1">
</a>
<div id="CssMenuDolne" style="position:absolute;left:389px;top:520px;width:500px;height:58px;text-align:center;z-index:2;padding:0;">
<a href="">Pracę&nbsp;2012</a>
<a href="">Kalendarze&nbsp;2012</a>
</div>
<div id="CssMenuLewe" style="position:absolute;left:164px;top:300px;width:150px;height:210px;text-align:center;z-index:3;padding:0;">
<a href="">Forum</a>
<a href="">Forum</a>
<a href="">Hosting</a>
<a href="">Gry Flash</a>
<a href="">Tapety</a>
<a href="">Polecane Strony</a>
</div>
</div>
</body>
</html>

Proszę o spojrzenie :-)

Użytkownik Kpuc edytował ten post 2012.09.14, 10:09


#2 vBz

vBz

    Expert

  • Dekorator
  • 828 postów

Napisano 2012.09.14, 14:43

Do gradientu przycisków nie używaj background tylko box-shadow. Zobacz sobię na przykładzie skórki forum w klasie .post_block h3 jak to działa.
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 0 15px rgba(255, 255, 255, 0.2) inset, 0 5px 10px rgba(255, 255, 255, 0.4) inset, 0 -15px 30px rgba(0, 0, 0, 0.3) inset;

  • Kpuc lubi to

#3 Kpuc

Kpuc

    Rozgrzewam się

  • Użytkownik
  • 69 postów

Napisano 2012.09.15, 22:47

Dzięki za radę, przyda się. Tak czy inaczej podprowadziłem z innej strony taki kod:

background: -moz-linear-gradient(center top , rgb(52, 43, 44) 0%, rgb(43, 36, 36) 25%, rgb(38, 25, 25) 50%, rgb(44, 17, 17) 75%, rgb(71, 18, 18) 100%) repeat scroll 0% 0% rgb(57, 17, 17);

Który sobie przerobiłem pod własne potrzeby :)

Użytkownik Kpuc edytował ten post 2012.09.15, 22:47





Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych