CSS/fertige Layouts/Design05

Aus SELFHTML-Wiki
< CSS‎ | fertige Layouts(Weitergeleitet von CSS/Templates/Template5)
Wechseln zu: Navigation, Suche

"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!


Beispiel: Design 05
ScreenshotScreenshotScreenshot


Besonderheiten[Bearbeiten]

Dieses Template zeigt die vielfältigen Anwendungsmöglichkeiten von SVG

[Bearbeiten]

SVG als Hintergrundgrafik

Beispiel: SVG als Hintergundgrafik einbinden
#logo {
 background: url(../img/logo.svg);
 background-size: contain;
 width: 3em;
 height: 3em;
}
Die SVG-Grafik wird wie gewohnt referenziert. Mit background-size und einer Breiten- und Höhenangabe kann sie beliebig skaliert werden. Dabei bleibt sie immer gestochen scharf.

[Bearbeiten]

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!

Beispiel: Inline-SVG direkt im Markup
<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>
Innerhalb des header wird ein svg-Element eingefügt. Über die landmark role wird dem Element eine semantische Bedeutung gegeben. Es enthält ein text-Element, dass im stroke-Attribut einen Verlauf referenziert.
Dieser wurde im oberen svg-Element innerhalb eines Definitionsabschnitts festgelegt.

Navigation[Bearbeiten]

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.

Beispiel: CSS referenziert SVG-Dokumentfragmente
<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>
Innerhalb des oben schon erwähnten Definitionsabschnitts befindet sich ein Pfad mit einer unregelmäßigen Form eines Registerreiters.
    <li>
      <a href="1-unterseite.html">
        <svg viewBox="0 0 120 32">
          <use xlink:href="#tab-shape"></use>
        </svg>
        <span>Unterseite</span>
      </a>
    </li>
Jedes 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;
}
Mit dem 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[Bearbeiten]

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[Bearbeiten]

Weblinks[Bearbeiten]

  1. Noah Blon: Coloring SVGs in CSS Background Images


Hinweis

Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.