[CSS] Verlooprand maken - Softwareontwikkeling

donderdag 23 november 2006 09:25

Acties:

Topicstarter

Ik probeer een verlooprand te maken voor rond een stuk tekst.

Ik heb uiteindelijk 5 afbeeldingen gemaakt voor de 3 hoeken en horizontaal onder en verticaal rechts. Heeft iemand nog suggesties of is het mogelijk dit (veel) simpeler op te lossen

(zie voorbeeld onderaan).

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-15">
    <style type="text/css" media="screen">
    <!--
.border1 {
  background: url(afbeeldingen/schaduw_v.png) right repeat-y;
  position: absolute;
}

.border2 {
  background: url(afbeeldingen/schaduw_h.png) bottom repeat-x;
}

.border3 {
  background: url(afbeeldingen/schaduw_lb.png) left bottom no-repeat;
}

.border4 {
  background: url(afbeeldingen/schaduw_rt.png) right top no-repeat;
}

.border5 {
  background: url(afbeeldingen/schaduw_rb.png) right bottom no-repeat;
}

.box_outer {
  width: 500px;
  height: 150px;
  position: relative;
}

.box_inner {
  position:absolute;
  width: 496px;
  height: 146px;
  overflow: hidden;
  font-size: 60px;
  font-style: italic;
}
-->
    </style>
  </head>

  <body>
    <div style="position:relative;">
      <div class="border1"><div class="border2"><div class="border3"><div class="border4"><div class="border5">
        <div class="box_outer">
          <div class="box_inner">
            Hello, world!
          </div>
        </div>
      </div></div></div></div></div>
    </div>
  </body>
</html>

Voorbeeld:

Afbeeldingslocatie: http://img166.imageshack.us/img166/6003/borderdo0.th.png

Developer Accused Of Unreadable Code Refuses To Comment

donderdag 23 november 2006 09:45

Acties:

Jaap-Jan

Je kunt ook één afbeelding maken die voldoende groot voor de site. Dat plaatje bevat dan gewoon de gehele verlooprand. Vervolgens kun je die afbeelding rechtsonder in de div plaatsen als achtergrondafbeelding?

Het is misschien iets minder flexibel en het plaatje zal misschien groter zijn dan de 5 kleine die je nu hebt. Je markup zal aan de andere kant wel een stuk simpeler zijn en een plaatje hoeft maar één keer te worden binnengehaald

.

| Last.fm | "Mr Bent liked counting. You could trust numbers, except perhaps for pi, but he was working on that in his spare time and it was bound to give in sooner or later." -Terry Pratchett

donderdag 23 november 2006 09:50

Acties:

Crayne

Have face, will travel

Zo?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#box {
    background-color: #ffffff;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: absolute;
    left: 100px;
    width: 500px;
    height: 400px;
    top: 100px;
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    font-size: 48pt;
    font-style: italic;
}

#shadow {
    border-right: 4px solid #000000;
    border-bottom: 4px solid #000000;
    opacity: .4; 
    filter: alpha(opacity=40);
    position: absolute;
    width: 500px;
    height: 400px;
    left: 101px;
    top: 101px;
}

</style>
</head>

<body>

<div id="box">
Hello World!
</div>

<div id="shadow">
</div>


</body>
</html>

Mijn Library Thing catalogus

donderdag 23 november 2006 11:07

Acties:

Verwijderd

Op deze site kun je wat css voorbeelden zien. Sinds kort is deze site online. Initiatiefnemer is Mark van Gigadesign. http://www.csssnippets.be/

En hier een directe link naar een snippet met verloop rand: http://www.csssnippets.be/snippets.php/mark/?page=2 En dan moet je de onderste hebben.(drop shadow op een div)

Hoop dat je er wat aan hebt.

donderdag 23 november 2006 12:20

Acties:

erwin85

Kijk ook eens naar http://www.alistapart.com

Een goede website met uitleg.

Zomaar naar een algemene site verwijzen lijkt me niet echt een oplossing voor TS he

Probeer een structurele bijdrage te leveren of blijf uit het topic

[ Voor 52% gewijzigd door BtM909 op 23-11-2006 17:30 ]

zaterdag 25 november 2006 16:18

Acties:

Icelus

Topicstarter

Bedankt iedereen.

@Jaap-Jan: Probleem is dat ik van te voren de afmetingen (vaak alleen de breedte) weet. Volledige afbeelding is dan vaak niet mogelijk.

@Crayne: Interessante oplossing maar zijn de filter en opacity eigenschappen niet vanaf CSS2 aanwezig (maw ze werken niet in alle browsers?).

Oplossing van alistapart.com lijkt erg op die van mij. Ik heb uiteindelijk besloten om geen afbeeldingen te gebruiken (uiteinden van de randen zijn alleen wat minder mooi). Uiteindelijk code staat hieronder.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <body>
    <div>
      <div style="width:60%; font-size:48pt; background-color: #fcfcfc;">
        <div style="border: solid #f3f3ff; border-width: 0 thin thin 0;">
        <div style="border: inherit; border-color: #d3d3dd;">
        <div style="border: inherit; border-color: #908ea2;">
        <div style="border: inherit; border-color: #67677c;">
          <i>Hello, world!</i>
        </div>
        </div>
        </div>
        </div>
      </div>
    </div>
  </body>
</html>

Developer Accused Of Unreadable Code Refuses To Comment

zaterdag 25 november 2006 18:20

Acties:

Blaise

@Crayne: Interessante oplossing maar zijn de filter en opacity eigenschappen niet vanaf CSS2 aanwezig (maw ze werken niet in alle browsers?).

Opacity werkt in bijna alle moderne browsers. Opera vanaf versie 9. Probleem is dat IE niet de W3C versie van opacity ondersteund. In IE5.5+ zul je een filter moeten gebruiken:

Cascading Stylesheet:

element{
   /* voor IE */
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* 0 tot 100 */

   /* voor de rest */
   opacity:.5; /* 0 tot 1 */
}

zaterdag 25 november 2006 20:06

Acties:

Icelus

Topicstarter

Blaise schreef op zaterdag 25 november 2006 @ 18:20:
[...]
Opacity werkt in bijna alle moderne browsers. Opera vanaf versie 9. Probleem is dat IE niet de W3C versie van opacity ondersteund. In IE5.5+ zul je een filter moeten gebruiken:
Cascading Stylesheet:
1
2
3
4
5
6
7
element{
   /* voor IE */
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* 0 tot 100 */

   /* voor de rest */
   opacity:.5; /* 0 tot 1 */
}

Zal nog 'ns kijken of ik het dan toch zal gebruiken

Zag dat m'n code niet onder IE6 werkt; zo werkt het wel:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <body>
    <div>
      <div style="width:60%; font-size:48pt; background-color: #fcfcfc;">
        <div style="border: solid #f3f3ff; border-width: 0 thin thin 0;">
        <div style="border: solid #d3d3dd; border-width: 0 thin thin 0;">
        <div style="border: solid #908ea2; border-width: 0 thin thin 0;">
        <div style="border: solid #67677c; border-width: 0 thin thin 0;">
          <i>¡Hola, mundo!</i>
        </div>
        </div>
        </div>
        </div>
      </div>
    </div>
  </body>
</html>

Developer Accused Of Unreadable Code Refuses To Comment