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.

.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