• Facebook
  • Pinterest
  • Instagram

pixelsgarden

Webdesign & Grafikdesign - Mediengestaltung aus Dachau

  • Portfolio
  • About
  • Blog
  • Kontakt

Einfache Navigation mit CSS3 ohne Hintergrundbilder

12. März 2012 • baroness • Kommentar verfassen

Gestalte Deine eigene Navigation ohne Hintergrundbilder mit reinem CSS. Vorlage ist ein einfaches HTML-Menü in Listenform.

HTML-Quellcode:

<nav>
<ul>
<li><a id="Home" class="first" href="#">Home</a></li>
<li><a id="Unternehmen" href="#">Unternehmen</a></li>
<li><a id="Produkte" href="#">Produkte</a></li>
<li><a id="Service" href="#">Service</a></li>
<li><a id="Kontakt" class="last" href="#">Kontakt</a></li>
</ul>
</nav>

Mit Hilfe von CSS3 wird nun das Menü in Form gebracht. Für den Hintergrundverlauf helfe ich mir gerne mit dem Ultimate CSS Gradient Generator. Mit diesem Tool kann man sich den gewünschten Verlauf – ähnlich wie in Photoshop erstellen und das Beste – einfach den Quellcode kopieren. Ein weiteres hilfreiches Tool für CSS3-Dateien ist derCSS-Generator. Attribute wie ‚border-radius‘, ‚text-shadow‘, ‚box-shadow‘ etc. können mit Hilfe eines Wysiwyg-Editors getestet und anschließend der Code in die Zwischenablage kopiert werden.

CSS-Datei:

nav ul { /* Anpassung der Liste */
	list-item: none;
	width: 940px;
	height: 40px;
	margin: 0 auto;
	            border-radius: 8px;
           -moz-border-radius: 8px;
       -webkit-border-radius: 8px;
                      box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	background: #35aae0; /* Old browsers */
	background: -moz-linear-gradient(top, #35aae0 0%, #006699 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #35aae0), color-stop(100%, #006699)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #35aae0 0%, #006699 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #35aae0 0%, #006699 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #35aae0 0%, #006699 100%); /* IE10+ */
	background: linear-gradient(to bottom, #35aae0 0%, #006699 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35aae0', endColorstr='#006699', GradientType=0 ); 
}
nav ul li { /* die Listenpunkte sollen sich horizontal ausrichten */
	float: left;
	display: inline-block;
}
nav ul li a { /* Nun werden die Menüpunkte formatiert, die Ränder links und rechts erzeugen den Trenner */
	display: block;
	color: #fff;
	padding: 0 20px;
	width: auto;
	line-height: 40px;
	font-size: 18px;
	text-transform: uppercase;
	border-right: 1px solid rgba(256, 256, 256, 0.4);
	border-left: 1px solid rgba(0,0,0,0.3);
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}
nav ul li a:hover { /* Der Hover-Effekt wird erzeugt */
	background: #2a95c6; /* Old browsers */
	background: -moz-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a95c6), color-stop(100%, #67bbe2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* IE10+ */
	background: linear-gradient(to bottom, #2a95c6 0%, #67bbe2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a95c6', endColorstr='#67bbe2', GradientType=0 );
}
nav ul li a.first, nav ul li a:hover.first { 
        /* Der erste Menüpunkt wird mit Hilfe einer CSS-Klasse angepasst. Ohne Trenner am Anfang */
	border-left: none;
	        border-radius: 8px 0 0 8px;
	   -moz-border-radius: 8px 0 0 8px;
	-webkit-border-radius: 8px 0 0 8px;
}

Live-Preview 
Code-Beispiel downloaden…

Filed Under: Allgemein, HTML5 & CSS3

Share

Facebook Google+ Twitter Pinterest Email

Comments Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Back to Blog

About Me

Seit über 15 Jahren konzipiere, gestalte und produziere ich Medien, überwiegend Online, aber auch gerne auf Papier. Logo-Design, Geschäftspapiere, Webdesign & Webentwicklung bis hin zu Crossmedia-Publikationen wie z.B. eBooks oder Digitale Magazine.

Sign Up For News + Updates

Impressum

Get Social

  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Latest Posts

  • Wysiwyg-Editor TinyMCE Konfiguration in Joomla
  • Einfache Navigation mit CSS3 ohne Hintergrundbilder
  • Einfacher Styleswitcher per CSS

Copyright 2019 pixelsgarden | Impressum | Datenschutz