html - Runde hjørner/blending og skygger med html/css - Udvikleren.dk

Tags: html css

<< < 1 2 > >>

Bruger #4414 @ 04.03.06 18:33

113

først lidt kode:

index.htm:

Kode

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <table>
      <tr>
        <td colspan="3" class="top"><center>hej</center></td>
      </tr>
      <tr>
        <td class="left"><center>med</center></td>
        <td class="middle"><center>dig</center></td>
        <td class="right"><center>dit</center></td>
      </tr>
      <tr>
        <td colspan="3" class="bottom"><center>kvaj</center></td>
      </tr>
    </table>
  </body>
</html>

style.css:

Kode

body {
  overflow:auto;
}
table {
  width:100%;
}
td {
  border: 1px solid #000000;
  background-color:#cccccc;
}
td.top, td.bottom {
  width:100%;
}
td.left, td.right {
  width:20%;
}
td.middle {
  width:60%;
}

Dette er jo utrolig simpelt, og det behøver faktisk ikke at være meget anderledes, men der er et par ting som jeg godt kunne tænkte mig lidt hjælp til.

1) Runde hjørner på "kasserne"
Jeg har set flere eksempler på javascripth løsninger, det har ingen interesse.
Grafiske løsninger kan også bruges, men jeg foretrækker ren html/css.

2) Blending
Disse kasser skulle gerne have en hvis grad af "gennemsigtighed". Dette kan godt komme i kambolage med de runde hjørner.
Igen er ren html/css at foretrække da IE absolut ikke bryder sig om png filer med alpha blending.

3) Skygger på kasserne
Ovenstående feature kunne også godt tænkes, men jeg har ingen idé om hvordan det skal gøres.

Alle værdier, størrelse på hjørner, blending og hvad der måtte være af justerbare værdier for skyggen, skal kunne justeres. Det dur ikke hvis man skal til at lave ny grafik og den slags hver gang man skal lave en smule om på designet.

Derudover skal koden naturligvis være kombatibel med de mest populære browsere:
IE, moz, opera, firefox, netscape, ect.

[Redigeret d. 04/03-06 18:45:52 af Felix Nielsen]

11 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #8934 @ 10.03.06 07:59

du må meget unskylde, men er en forklaring mulig?
Enten kigger jeg ikke på det rigtige kode, eller også fatter jeg ikke en brik.

Jo, ser du, når du sætter opacity på en DIV tag, så vil ALT inden i DIV tagen få samme opacity.

Så for at undgå opacity på din tekst, må du placere din tekst efter DIV tagen og så flytte den op til den gennemsigtige DIV tag. Derfor bruges position:absolute; sammen med top:20px; left:200px;.

Du kunne også bruge position:relative; på din tekst og ingen position-style på din DIV tag.

Bruger #4575 @ 04.03.06 19:51

218

først lidt kode:

index.htm:
Kode
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <table>
      <tr>
        <td colspan="3" class="top"><center>hej</center></td>
      </tr>
      <tr>
        <td class="left"><center>med</center></td>
        <td class="middle"><center>dig</center></td>
        <td class="right"><center>dit</center></td>
      </tr>
      <tr>
        <td colspan="3" class="bottom"><center>kvaj</center></td>
      </tr>
    </table>
  </body>
</html>
style.css:
Kode
body {
  overflow:auto;
}
table {
  width:100%;
}
td {
  border: 1px solid #000000;
  background-color:#cccccc;
}
td.top, td.bottom {
  width:100%;
}
td.left, td.right {
  width:20%;
}
td.middle {
  width:60%;
}
Dette er jo utrolig simpelt, og det behøver faktisk ikke at være meget anderledes, men der er et par ting som jeg godt kunne tænkte mig lidt hjælp til.

1) Runde hjørner på "kasserne"
Jeg har set flere eksempler på javascripth løsninger, det har ingen interesse.
Grafiske løsninger kan også bruges, men jeg foretrækker ren html/css.

2) Blending
Disse kasser skulle gerne have en hvis grad af "gennemsigtighed". Dette kan godt komme i kambolage med de runde hjørner.
Igen er ren html/css at foretrække da IE absolut ikke bryder sig om png filer med alpha blending.

3) Skygger på kasserne
Ovenstående feature kunne også godt tænkes, men jeg har ingen idé om hvordan det skal gøres.

Alle værdier, størrelse på hjørner, blending og hvad der måtte være af justerbare værdier for skyggen, skal kunne justeres. Det dur ikke hvis man skal til at lave ny grafik og den slags hver gang man skal lave en smule om på designet.

Derudover skal koden naturligvis være kombatibel med de mest populære browsere:
IE, moz, opera, firefox, netscape, ect.

[Redigeret d. 04/03-06 18:45:52 af Felix Nielsen]

Runde hjørner og skygger må du lave grafisk, hvis de skal fungere på tværs af browserne. Ang. blending kan du forsøge dig med flg. kombination:

Kode

filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;

Det bør virke i IE, mozilla og firefox, ved ikke med de andre browsere.

- Mads

Bruger #8934 @ 05.03.06 01:05

Runde hjørner:
http://webdesign101.dk/showcase/roundcorners/nifty.html
http://webdesign101.dk/css/roundcorners/

Brug af PNG med alpha-værdier i IE:
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp

Bruger #4414 @ 05.03.06 18:28

113

næsten ved vejs ende, men har stadig et problem eller to.

test:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<style type="text/css">
#container {
  background:transparent;
}
.b1, .b2, .b3, .b4 {
  display:block;
  overflow:hidden;
  height:1px;
}
.b1 {
  background-color:#000000;
  margin:0 5px;
  filter: alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity: 0.5;
}
.b2, .b3, .b4 {
  border-style:solid;
  border-color:#000000;
  background-color:#cccccc;
}
.b2 {
  margin:0 3px;
  border-width:0 2px;
  filter: alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity: 0.5;
}
.b3 {
  margin:0 2px;
  border-width:0 1px;
filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;

}
.b4 {
  margin:0 1px;
  border-width:0 1px;
  filter: alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity: 0.5;
}
.boxcontent {
  display:block;
  border-width:0 1px;
  border-style:solid;
  border-color:#000000;
  background-color:#cccccc;
  filter: alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity: 0.5;
}
</style>
</head>
<body>
<div id="container">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b4"></b>
<div class="boxcontent">
hej
</div>
<b class="b4"></b>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</div>
</body>
</html>

Som det ses, hvis man prøver testen, så virker de runde hjørner fint, ligeledes virker alphablendinger på .b1/b2/b3 og b4, men ikke på .boxcontent, hvordan kan det være?
Derudover kommer browseren med en irriterende blokering, men jeg går udfra at det er fordi at det kører lokalt.

Til sidst så har jeg stadig ikke fundet en løsning på skyggerne, det er nu heller ikke særlig vigtigt, men hvis nogen har en løsning på det, lytter jeg også gerne til den.

Bruger #4414 @ 07.03.06 00:29

113

kom nu, bare lige det sidste skub, så skal jeg nok klare resten selv ;-)

Bruger #8934 @ 08.03.06 20:52

boxcontent skal have en bredde, f.eks.: width:100%

Bruger #4414 @ 09.03.06 00:17

113

boxcontent skal have en bredde, f.eks.: width:100%

Tak, det var der problemet lå ;-)

Dog er der opstået et nyt "problem", teksten inholdet i boksen, tekst, billeder etc., bliver også blended; er der en løsning på det problem?

Bruger #8934 @ 09.03.06 11:17

M$ bruger denne løsning
http://msdn.microsoft.com/workshop/author/filter/filters.asp#Filter_Design_Consid

Kode

...
#test1, #test2 {
	position:absolute;
	top:20px;
	left:200px;
	width:50%;
	height:50px;
}
#test1 {
	background:#000;
	filter:alpha(opacity=25);
	opacity:0.25;
	-moz-opacity:0.25;
}
#test2 {
	color:red;
	font:bold 12pt sans-serif;
}
</style>
...
<div id="test1"></div>
<div id="test2">HEJ</div>
...

Bruger #4414 @ 10.03.06 00:28

113

du må meget unslylde, men er en forklaring mulig?
Enten kigger jeg ikke på det rigtige kode, eller også fatter jeg ikke en brik.

Bruger #4414 @ 10.03.06 15:02

113

har aldrig brudt mig om absolut positionering, men jeg må jo se hvad jeg kan finde ud af, om ikke andet skal du da ihvertfald have de sidste point.

<< < 1 2 > >>

Runde hjørner/blending og skygger med html/css

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler