Beispiel:CSS-Ribbon-4.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> nav li, nav ul { 

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

} nav a, button { 

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

}

nav a { 

 width: 6em;
 background: var(--navLighter);
 border: thin solid var(--navColor);

} nav li:first-of-type a{ 

 border-top-left-radius: 3em;

} nav li:last-of-type a{ 

 border-bottom-right-radius: 3em;

} nav a:hover, nav a:focus, 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: 1em;

corner-shape: scoop; 

 margin-inline: auto;
 background-image: radial-gradient(ellipse, var(--accent2Lighter) 25%, var(--accent2) 100%);
 border: thin solid;
 color: var(--moss);

}

h1 { color: white; background: var(--accent1); /* box-shadow: 0em 0.1em 0.1em 0 hsl(0, 0%, 50%); */ padding-inline: 2em; padding-block: 0.2em; width: min-content; white-space: nowrap; margin-left: -1.05em; position: relative; }

h1::before { content: ""; position: absolute; display: block; height: 0; width: 0; top: 1em; left: -0.6em; border-style: solid; border-width: 0.6em; border-color: transparent hsl(13, 96%, 35%) transparent transparent; z-index: -1; } h1::after { content: ""; position: absolute; display: block; height: 0; width: 0; top: 0; right: 0; border-style: solid; border-width: .75em; border-color: transparent var(--background) transparent transparent; }

header, nav, article, aside, footer { 

  padding: .5em;

}

header { position: relative; grid-column: 2 / -1; grid-row: 1; border-left: thin solid; }

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: 2em; margin-block: 1em; corner-shape: bevel; }

  1. news {

corner-shape: notch; }

aside h2 { --ribbonHeight: 1.5rem; --ribbonpadding: .25rem; background: var(--accent2); color: white; border: thin solid var(--moss); border-radius: 1em; corner-shape: scoop; font-size: var(--ribbonHeight); width: min-content; margin-inline: auto; padding-inline: 1em; padding-block: var(--ribbonpadding); white-space: nowrap; line-height: 1; position:relative; top: calc(-1.9 * var(--ribbonHeight) ); }


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;

}

html { 

 background: var(--background);

}

root {
 --background:  #ddd;
 --accent1:     hsl(13 96% 40%);
 --accent2:     hsl(80 45% 40%); 
 --accent2Lighter: hsl(80 45% 80%) ;
 --linkColor:   #337599;
 --linkLighter: hsl(201 50% 90%);
 --navColor:    #dfac20;
 --navLighter:  hsl(43 76% 90%);
 --moss:        hsl(80 45% 30%);

}

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

<body> <header>

Rahmen und Ribbons - 4

</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>

Eingewölbt und abgeschrägt!

Bis jetzt waren unsere Boxen eben genau dies:
Rechtecke mit 90°Grad-Winkeln oder Rundungen.

Mit der <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/corner-shape">corner-shape</a>-Eigenschaft kann man den Ecken beliebige Formen geben.

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>

© 2025 SELFHTML

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

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