Beispiel:CSS-Ribbon-1.html
Aus SELFHTML-Wiki
<!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>
<h1>Rahmen und Ribbons</h1>
</header>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#link_1.html">Startseite</a></li>
<li><a href="#link_2.html">Unterseite 1</a></li>
<li><a href="#link_3.html">Unterseite 2</a></li>
<li><a href="#link_4.html">Kontakt</a></li>
</ul>
</nav>
<aside id="news">
<h2>Top-News</h2>
<p>Gestern gab's Freibier!</p>
<p>Nächster Termin: <time datetime="2024-02-29 10:00">29. Februar</time></p>
<button type="button">Anmelden!</button>
</aside>
<article>
<h2>Ribbons</h2>
<p>Unter einem Ribbon (engl. für Band) versteht man einen farbig abgesetzten Hintergrund, meist für eine Überschrift oder ein Zitat. </p>
<p>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.
<h2>CSS-basierte Grid Layouts</h2>
<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.</p>
<p>Grid Layout wird in allen modernen Browsern unterstützt.</p>
</article>
<aside>
<h2>Weblinks</h2>
<ul>
<li><a href="https://blog.selfhtml.org/">Blog</a></li>
<li><a href="https://wiki.selfhtml.org/">Doku</a></li>
<li><a href="https://forum.selfhtml.org/">Forum</a></li>
</ul>
</aside>
<footer>
<a href="#kontakt.html">Kontakt</a>
<p>© 2023 SELFHTML</p>
</footer>
</body>
</html>