Beispiel:CSS-Ribbon-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> a { 

 color: var(--linkColor);
 box-shadow: inset 0 -3px 0 -1px var(--linkColor);
 padding: .25em 0;
 text-decoration: none;
 transition: all .5s;

}

a:hover, a:focus { 

 box-shadow: inset 0 -30px 0 var(--linkLighter);

}

nav li, nav ul { 

 list-style: none;
 padding: 0; 
 margin: 0;

} nav a, button { 

 display: block;
 border-radius: 0.5em;
 margin-bottom: 0.5em;
 white-space: nowrap;  
 text-decoration: none;
 font-weight: bold;

}

nav a { 

 width: 6em;
 padding: 0.5em 1.5em;  
 background: var(--navLighter);
 border: thin solid var(--navColor);
 box-shadow: inset rgb(255 254 255 /0.6) 0 0.3em .3em, 
             inset rgb(0 0 0 /0.15) 0 -0.1em .3em,

hsl(0 0% 60%) 0 .1em 3px, hsl(0 0% 45%) 0 .3em 1px, rgb(0 0 0 /0.2) 0 .5em 5px; }

nav a:hover, nav a:focus-visible { 

 box-shadow:
   inset rgb(0 0 0 / 0.25) 0 0.1em 0.3em,  
   inset rgb(255 255 255 / 0.3) 0 -0.05em .2em; 
 transform: translateY(2px);

}

nav li:first-of-type a{ 

 border-top-left-radius: 3em;

} nav li:last-of-type a{ 

 border-bottom-right-radius: 3em;

}

button:hover { 

 background: var(--linkLighter);
 border: thin solid var(--linkColor);
 text-decoration: underline;
 outline: medium solid #dfac20;
 outline-offset: .15em;

}


button { 

 font-size: 1.25em;
 padding: 1em;  
 width: min-content;
 border-radius: 50% / 40%;  
 margin-inline: auto;
 background-image: radial-gradient(ellipse, var(--accent2Lighter) 25%, var(--accent2) 100%);
 border: thin solid;
 color: var(--moss);
 text-shadow: rgba(255 255 255 /.5) 0 1px 0;

}


header, nav, article, aside, footer { 

  padding: .5em;

}

header { position: relative; grid-column: 1 / -1; grid-row: 1; }

nav { grid-column: 1; grid-row: 2 / 4; }

article { grid-column: 2; grid-row: 2 / 4; border-left: thin solid; padding-bottom: 2em; }

aside { grid-column: 3; border: medium dashed var(--accent2); border-radius: 0 0.5em 0.5em; margin-block: 1em; }

aside h2 { --ribbonsize: 1.5rem; --ribbonpadding: .25rem; background: var(--accent2); color: white; border: thin solid var(--moss); border-radius: 0 .5em; font-size: var(--ribbonsize); width: min-content; margin-inline: auto; padding-inline: 0.5em; padding-block: var(--ribbonpadding); white-space: nowrap; line-height: 1; position:relative; top: calc(-1.9 * var(--ribbonsize) ); box-shadow: 2px 2px 5px 4px grey; }


footer { grid-column: 2 / -1; grid-row: 4; text-align: right; border-top: thin solid; } 

 body {

margin: 0 auto; 

   max-width: 60em;
   font-family: sans-serif;

box-sizing: border-box; 

   color: #333333;
   display: grid;
   grid-template-columns: 1fr 3fr 1.5fr;	
   grid-template-rows: min-content 1fr 1fr min-content;
   gap: 0 .5em;
   min-height: 100vh;

background: radial-gradient(circle, #fff 0%, var(--background) 85%); }

html { 

 background: var(--background);

}

root {
 --background:  #bbb;
 --accent1:     hsl(13 96% 40%);
 --accent2:     hsl(80 45% 40%); 
 --accent2Lighter: hsl(80 45% 80%) ;
 --linkColor:   oklch(0.5 0.1 235);
 --linkLighter: oklch(0.9 0.04 235);
 --navColor:    #dfac20;
 --navLighter:  hsl(43 76% 90%);
 --moss:        hsl(80 45% 30%);

} /* SVG */ 

   .banner {
     fill: var(--accent1);
     stroke: black;
     stroke-width: 1;

filter: drop-shadow(2px 2px 5px grey); 

   }
   text {
     text-anchor: middle;
     font-size: 30px;

fill: white; 

   }

</style> <title>Rahmen und Ribbons - 5</title> </head>

<body> <header>

<svg id="banner" viewBox="-50 0 750 100"> <path class="banner" id="aussen" d="M15,15 q65,25 130,20 l-50,10 v30 q-40,0 -80,-15 l60,-12 z m130,20 l-50,10 v10 h50z" /> <use class="banner" href="#aussen" x="0" y="0" transform="translate(590,0) scale(-1,1)"/> <rect class="banner" x="95" y="45" width="400" height="45"/> <text x="300" y="80" role="heading" aria-level="1">Rahmen und Ribbons - 5</text>

</svg> </header>

<nav>

Navigation

  • <a href="#link_1.html">Startseite</a>
  • <a href="#link_2.html">Unterseite 1</a>
  • <a href="#link_3.html">Unterseite 2</a>
  • <a href="#link_4.html">Kontakt</a>

</nav>

<aside id="news">

Top-News

Gestern gab's Freibier!

Nächster Termin:

<button type="button">Anmelden!</button> </aside>

<article>

Räumliche Tiefe durch Schatten

Neben der border-Eigenschaft gibt es noch eine outline, die über die Elemente gemalt wird und so die Breiten nicht beeinflusst. <p class="achtung"> Fahre mit der Maus über die einzelnen Seitenelemente!

CSS-basierte Grid Layouts

Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.

Grid Layout wird in allen modernen Browsern unterstützt.

</article>

<aside>

Weblinks

</aside>

<footer> <a href="#kontakt.html">Kontakt</a>

© 2023 SELFHTML

</footer> </body> </html>

Abgerufen am 30.11.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-Ribbon-5.html"