CSS/fertige Layouts/Design05
"Kennt man eine - kennt man alle!" – Moderne Webseiten leiden oft an ihrer Beliebigkeit: Ein mehr oder weniger komplexes Raster aus viereckigen Bereichen.
CSS border-radius ermöglicht „runde“ Ecken, im Extremfall sogar bis zu einem Kreis oder einer Ellipse. Pseudoelemente können mit dem „border slant“ eine dreieckige Form haben (Siehe Template 3: grafische Elemente mit CSS_zeichnen). Allerdings sind in CSS z. B. keine Innenkurven möglich.
Mit SVG sind alle geometrischen und auch unregelmäßige Formen möglich. Natürlich ebenfalls responsiv und mit allem drin!
- Download: ZIP-Datei (58,7KB, Prüfsumme: )
Inhaltsverzeichnis
Besonderheiten
Dieses Template zeigt die vielfältigen Anwendungsmöglichkeiten von SVG
Logo
SVG als Hintergrundgrafik
#logo {
background: url(../img/logo.svg);
background-size: contain;
width: 3em;
height: 3em;
}
Banner
Das Banner "Design05" besteht aus einem Text ohne Textfarbe, dafür aber mit einer Randlinie, die mit einem Farbverlauf gefärbt wird. Dies ist mit CSS (noch) nicht möglich, dafür aber mit SVG!
<svg height="0" width="0">
<defs>
<linearGradient id="verlaufVertikal" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#c32e04"/>
<stop offset="100%" stop-color="#3983ab"/>
</linearGradient>
</defs>
</svg>
<header>
<a id="logo" href="index.html">Zurück zur Startseite</a>
<svg role="banner">
<text id="eins" fill="none" stroke="url(#verlaufVertikal)" x="0" y="69" >Design05</text>
</svg>
Dieser wurde im oberen svg-Element innerhalb eines Definitionsabschnitts festgelegt.
In einer Navigation mit Registerkarten wird die jeweils aktuelle Seite farbig markiert und in den Vordergrund geschoben. Damit dies auch optisch hervorgehoben wird, verwendet dieses Beispiel eine Grafik mit Innenkurven, die als SVG-Dokumentfragment vorher definiert und pro Navigationselement aufgerufen wird. Diese Grafik kann bequem mit CSS gestylt werden.
<svg height="0" width="0">
<defs>
...
<path id="tab-shape" d="M1,32 v-16 a20,16 0 0,1 20,-16 h60 a20,16 0 0,1 20,16 a20,16 0 0,0 20,16z" />
</defs>
</svg>
<li>
<a href="1-unterseite.html">
<svg viewBox="0 0 120 32">
<use xlink:href="#tab-shape"></use>
</svg>
<span>Unterseite</span>
</a>
</li>
a innerhalb der Navigation enthält ein absolut positioniertes SVG-Element, in dem mit dem use-Element der oben erwähnte Reiter über seine id wiederverwendet wird.Ein relativ positioniertes span enthält den Linktext.
#main-nav a[aria-current=page] {
z-index: 3;
}
#main-nav a[aria-current=page] use {
fill: #3983ab;
}
#main-nav a:hover,
#main-nav a:focus{
background: transparent;
z-index: 4;
}
#main-nav a:hover span ,
#main-nav a:focus span {
color: black;
font-weight: bold;
}
aria-current-Attribut wird das aktuelle a-Element selektiert und mit z-index in den Vordergrund geschoben. Da dazugehörige use-Element wird dunkelblau gefüllt.Wenn ein Navigationselement mit der Maus oder Tastatur selektiert wird, erhält es einen noch höheren
z-index: 4 und der Linktext im span-Element im span-Element wird fett dargestellt.Fazit: Das Markup der Navigation sieht sehr kompliziert aus und würde sich sehr vereinfachen, wenn man die SVG-Grafik als Hintergrundbild einbinden (kein Problem) und dann mit CSS gestalten könnte (nur mit Umwegen möglich).
Hier gibt es zwei Alternativen:
- die Hintergrundgrafik in mehreren Farbvarianten anlegen und einbinden.
- Mit fortgeschrittenen CSS-Techniken wie mask und filter die Farbe der Grafik verändern.[1]
Texteffekte
Auf der Unterseite 1 finden Sie eine Anzahl von Texteffekten, die Sie so nur mit SVG (oder mit einer nicht responsiven, nicht durch CSS-veränderbaren und nur schwer änderbaren Rastergrafik) verwirklichen können.
Siehe auch
- SVG
- SVG-Einstieg: Flaggen mit SVG zeichnen
Weblinks
- Best SVG-Websites (awwwards.com)
- tuts+: SVG Brilliance: 10 Inspiring Examples From Around the Web
- css-tricks: SVG Tabs (Using an SVG Shape as Template)
- ↑ Noah Blon: Coloring SVGs in CSS Background Images
