Beispiel:CSS-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>
		<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>