Beispiel:Ribbon-1.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> 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: 0 0.5em 0.5em; margin-block: 1em; }

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

aside h2::after, aside h2::before { content: ""; position: absolute; display: block; height: 0; width: 0; top: 0; border-style: solid; border-width: calc((.5 * var(--ribbonHeight)) + var(--ribbonpadding));

} aside h2::after { border-color: transparent transparent transparent var(--accent2); right: calc(-1.3 * var(--ribbonHeight)); } aside h2::before { 

   border-color: transparent var(--accent2) transparent transparent;

left: calc(-1.3 * 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%);

}

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

<body> <header>

Rahmen und Ribbons

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

Ribbons

Unter einem Ribbon (engl. für Band) versteht man einen farbig abgesetzten Hintergrund, meist für eine Überschrift oder ein Zitat.

Die h1-Überschrift wird mit einem Band hinterlegt, das um den linken Rand des Texts geknickt wird. Dafür wird ein Pseudoelement links unter die Überschrift gelegt. <p>Die aside-Boxen erhalten einen gestrichelten Rand in Akzentfarbe und ihre h2-Überschriften ein Ribbon mit zwei Pseudoelementen.

CSS-basierte Grid Layouts

<p>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 27.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Ribbon-1.html"