Nützliche Tutorials, aufschlussreiche Artikel, kreative Inspirationen und kostenlose Ressourcen für Web- und Frontend-Designer.
CSS-Tipps

10 CSS-Regeln, die jeder Webdesigner kennen sollte

Durch Erfahrung als Webdesigner merken wir uns alle Arten von Codesyntax, Hacks und Snippets. Insbesondere mit CSS gibt es eine Reihe von Regeln und Deklarationen, die wirklich helfen können, deine Website-Designs zu transformieren und neue Möglichkeiten im Vergleich zu älteren Techniken zu eröffnen. Dieser Beitrag fasst 10 Erklärungen und Tipps zusammen, die jeder Webdesigner in seinem CSS-Arsenal zur Verfügung haben sollte.

@media

@media screen and (max-width: 960px) {

}

Mit der @media-Regel kannst du nicht nur das Styling für deine Webseite beim Drucken festlegen. Heutzutage sind Medienanfragen eher mit der Erstellung von responsiven oder adaptiven Website-Designs verbunden. Erstelle eine Medienabfrage mithilfe von Eigenschaften wie min-width, um das Design an die Darstellungsgröße des Benutzers anzupassen.

background-size

body {
	background: url(image.jpg) no-repeat;
	background-size: 100%;
}

Eine coole und äußerst nützliche CSS3-Eigenschaft, die nun eine gründliche Browser-Unterstützung erhalten hat, ist background-size. An einer Stelle, die eine Hintergrundskalierung auf die Größe ihrer Eltern-Elemente machte, erforderte einiges an richtigem Herumspielen, aber jetzt brauchst du nur noch eine Zeile Code. Verwende dieses Snippet, um den allseits beliebten Vollbild-Hintergrundeffekt zu erzielen.

@font-face

@font-face {
	font-family: Blackout;
	src: url("assests/blackout.ttf") format("truetype");
}

Eine CSS3-Eigenschaft, die das Web in den letzten Jahren wirklich verändert hat, ist @font-face. Wir hatten bisher alle Arten von Einschränkungen bezüglich der Lizenzierung von Schriften, die diese Eigenschaft zurückhielten, aber jetzt gibt es eine Fülle von Schriften zur Auswahl und eine Reihe von Dienstleistungen, die auf dem grundlegenden @font-face-Code aufbauen. Verwende @font-face manuell mit frei verfügbaren Schriftarten oder über Drittanbieterdienste wie Google Webfonts oder Typekit.

margin: 0 auto;

#container {
	margin: 0 auto;
}

Der clevere margin: 0 auto; Deklaration ist einer der ersten Snippets, die du vermutlich lernst, wenn du dich mit CSS vertraut machst. Es ist überraschend, dass der CSS-Spezifikation keine spezifische Deklaration zum Zentrieren eines Blockelements hinzugefügt wurde, sondern dass wir uns alle auf die automatische Umgehungslösung verlassen haben. Benutze margin: 0 auto;; um ein beliebiges Blockelement innerhalb seines Elternelements zu zentrieren.

overflow: hidden

.container {
	overflow: hidden;
}

Es gibt alle Arten von Float-Clearing-Lösungen und Hacks im Web, aber eine einfache Möglichkeit, deine Floats sauber darzustellen, ist einfach die overflow: hidden;-Deklaration auf dem Container deiner Floated-Elemente zu verwenden. Es fügt Ihrem Stylesheet keinen Müll hinzu und es erledigt die Aufgabe in 90% der Szenarien.

Newsletter

Frischer Input für Webdesigner. Jeder Abonnent erhält das kostenlose Bundle aus 50 Device Photoshop-Mockups und 40 Responsive WordPress-Themes.

Jederzeit kündbar. Kein Spam!

.clearfix

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

Für diejenigen, bei denen Float Clearing Situationen mit overflow: hidden; nicht funktionieren, ist die beste Alternative ist die Clearfix-Technik. Denke daran, dass du nicht den Namen der Clearfix-Klasse verwenden musst. Du kannst diesen Code auf jedes deiner HTML-Elemente individuell ausrichten.

color: rgba();

.btn {
	color: rgba(0,0,0,0.5);
}

PNG-Bilder wurden früher benötigt, um jegliche Art von Transparenzeffekte im Webdesign zu erzeugen, aber dank eines weiteren Fortschritts in CSS kann jetzt Transparenz mit Hilfe des RGBA-Farbmodus erzeugt werden. Wenn du RGBA anstelle eines hexadezimalen Werts verwendest, kannst du mit den roten, grünen und blauen Kanälen eine Farbe auswählen und einen Alpha-Wert festlegen, z.B. 0.5 für 50% Deckkraft.

input[type=“text“]

input[type="text"] {
	width: 200px;
}

Der Eingabe-Selektor input[type="text"] und erweiterte Selektoren als Ganzes eignen sich hervorragend, um deine CSS-Fähigkeiten vom Anfänger zum Experten zu pushen. Insbesondere Attributselektoren sind äußerst nützlich für das Formatieren von Elementen, ohne dass zusätzliche Klassen erforderlich sind.

transform: rotate(30deg);

.title {
	transform: rotate(30deg);
}

Wenn ich ehrlich bin, muss ich noch eine Verwendung für CSS-Transformationseigenschaften in einem echten Designprojekt finden, aber die Fähigkeit, HTML-Elemente ohne Javascript zu bearbeiten, ist so cool, dass es diese Eigenschaften wert ist, sich daran zu erinnern! Kombiniere Transformationseigenschaften mit CSS-Übergängen, um lustige Animationseffekte zu erzielen.

a {outline: none;}

a {outline: none;}

Nichts kann ein Design mehr verderben als eine riesige gepunktete Kontur, die sich über die gesamte Seite erstreckt, wenn du auf ein Linkelement klickst. Die a {outline: none;}-Deklaration wird dies verhindern, aber für die Zugänglichkeit vergiss nicht, auch :focus zu deinen Links hinzuzufügen. Wenn es dir nichts ausmacht, den gepunkteten Rand zu sehen, aber wünschst dir, dass er nicht den gesamten Bildschirm überspannt, füge stattdessen einfach {overflow:auto;} zu deinem Stylesheet hinzu.

Quelle

line25.com

War dieser Artikel hilfreich? Ja Nein

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

Jederzeit kündbar. Kein Spam!

Hi, ich bin Jonathan, UX-Designer und WordPress-Enthusiast. Auf pixeltuner.de blogge ich über aktuellste Ressourcen für Webworker, Webdesigner- und Entwickler. Außerdem teile ich über Twitter täglich frische Inhalte zu diesen Themen. Du findest mich auch auf deviantART. PayPal-Kaffeespende.

Eine Antwort auf "10 CSS-Regeln, die jeder Webdesigner kennen sollte"
  • Hi Jonathan,
    die Regel „margin: 0 auto;“ ist nicht die Beste, weil man damit erwünschte Ränder eines Elements oben und/oder unten wieder auf 0 setzt.
    Ich weiß, dass diese Regel in der Praxis oft genutzt wird (von mir eingeschlossen). Ich bin allerdings vor einiger Zeit darauf umgestiegen
    margin-left: auto;
    margin-right: auto;
    zu benutzen, was etwas mehr Tipparbeit ist (natürlich nicht, wenn man Emmet benutzt) aber halt nicht die Ränder überschreibt.

    Gruß
    Jens

Schreibe einen Kommentar

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

Newsletter

Frischer Input für Webdesigner. Jeder Abonnent bekommt 50 PSD Device-Mockups und 40 Responsive WordPress-Themes geschenkt.

Jederzeit kündbar. Kein Spam!
Anzeige