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>
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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Ribbon-4.html&oldid=92305“