Beispiel:CSS-Ribbon-4.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>
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 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: 0.5em;
width: min-content;
border-radius: 50% / 40%;
margin-inline: auto;
background-image: radial-gradient(ellipse, var(--accent2) 0%, var(--accent2Lighter) 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: var(--background);
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: #337599;
--linkLighter: hsl(201 50% 90%);
--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 - 4</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">Rahmen und Ribbons - 4</text>
</svg>
</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>Räumliche Tiefe durch Schatten</h2>
<p>Neben der <code>border</code>-Eigenschaft gibt es noch eine <code>outline</code>,
die <strong>über</strong> die Elemente gemalt wird und so die Breiten nicht beeinflusst.
<p class="achtung"> Fahren Sie mit der Maus über die einzelnen Seitenelemente!</p>
<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>