Everything from:css

Mit verschiedenen Maßeinheiten in CSS rechnen: Die calc() Funktion


Will man in seinem Stylesheet Berechnungen anstellen denkt man heutzutage sofort an SASS oder „zumindest“ LESS. Schließlich kann man hier komplexe Formeln hinterlegen und mit Variablen arbeiten und so ein komplettes Layout mit wenigen Anpassungen neu „ausrechnen“. Aber SASS und LESS sind eben Präprozessoren. Sie stellen die Berechnung an lange bevor das Stylesheet im Browser des Users geladen wird. Was 100% Breite in Pixeln bedeutet, oder 100px in Prozent weiß zu diesem Zeitpunkt niemand. Schließlich hängt das ja von dem individuellen Endgerät ab. Relative und absolute Werte können so also nicht zusammen berechnet werden. So etwas wie: .a{ height: (100% + 100px); } kann z.B. in SASS nicht funktionieren. Schließlich sind 100% + 100px auf einem Smartphone etwas komplett anderes […]

Weiterlesen…

SASS für Einsteiger – Teil1: Hintergründe & Installation


Jeder der gerne und viel mit CSS arbeitet kommt früher oder später an gewisse Grenzen. Insbesondere wenn man mit mehreren Personen zusammen an größeren Projekten arbeitet. Aber auch bei kleinen Projekten gibt es immer wieder diese Momente in denen man denkt: „Das könnte auch einfacher und logischer sein“. Und: „Warum muss ich dass alles immer wieder und wieder eingeben?“ Hier kommt SASS ins Spiel. SASS steht für „Syntactically Awesome StyleSheets“ und ist ein sogenannter CSS Präprozessor. Präprozessor weil aus einer SASS Datei eine CSS Datei erzeugt wird, BEVOR diese auf dem eigentlichen Server zum Einsatz kommt. Es geht also nicht darum irgendetwas auf Server- oder Clientseite zu verbessern oder zu optimieren. Es geht darum schneller, einfacher, effektiver und besser CSS […]

Weiterlesen…

Externe Links als solche kennzeichnen – Mit JavaScript und CSS


„Verwirre den User…NICHT!“ So oder so ähnlich lautet einer der obersten Grundsätze des User Interface Designs. Wir sind Gewohnheitstiere. Wir wollen das etwas so funktioniert wie es das schon immer getan hat. Bei den meisten UI Elementen ist das relativ klar. Gerade jedoch ein einfacher externer Link kann da Überraschungen bergen. Klickt man drauf kann man entweder auf einer gänzlich anderen Internetseite landen, oder innerhalb der gerade besuchten Domäne hin und her springen. Was genau passiert weiß man erst hinterher. Um eben diese Verwirrung des Users zu vermeiden gehen viele Seitenbetreiber den Weg, einen externen Link eben auch als solchen zu kennzeichnen. Zum Beispiel mit einem kleinen Icon dahinter. Auf meiner Seite sehen externe Links z.B. so aus: Link auf […]

Weiterlesen…

Der nth-child() Pseudoselektor – Selten genutztes CSS #2


Im zweiten Teil meiner kleinen Serie „Selten genutztes CSS“ geht es um den nth-child() (Pseudo-) Selektor. Ein Selektor den ich zwar häufig genutzt, aber wenn ich ehrlich bin eigentlich nie grundlegend verstanden habe. Bis jetzt zumindest… Und was zum Teufel ist nun ein nth-child? Wie der Ausdruck „child“ schon andeutet geht es hierbei um die Auswahl bestimmter „Kinder“ eines Elternelements, um diese per CSS zu stylen. Genauer gesagt um das „n-te“ Kind. Im selfhtml.wiki wird es korrekter so ausgedrückt: Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht. Klingt kompliziert, daher hier einige… Praktische Beispiele Fangen wir mal ganz einfach an: ul.menu li:nth-child(3n) { color: red; } Damit wird der Text jedes dritten […]

Weiterlesen…

Der not() Selektor – Selten genutztes CSS #1


CSS ist mächtig. CSS ist allgegenwärtig. CSS ist mein täglich Brot. Dennoch (oder gerade deshalb) bin ich immer wieder überrascht das es doch noch das ein oder andere zu lernen gibt. Unbekannte Selektoren, seltsame Properties und noch nie genutzte Values. Damit ich (und ihr?) noch etwas lerne, werde ich hier eine kleine Serie von (zumindest mir) bis dato unbekannten Arbeitsweisen, Funktionen und Techniken mit CSS starten. Fangen wir mal mit einem Selektor an, der mir über die Jahre sicherlich eine ganze Menge Arbeit abgenommen hätte: Der :not() Selektor. Kurz gesagt: Damit wählt man ein Element aus das NICHT eine bestimmte Klasse hat. Man macht also genau das Gegenteil davon, wofür Selektoren eigentlich genutzt werden. Folgendes HTML Beispiel: <ul class=“samplemenu“> <li>Home</li> […]

Weiterlesen…

Ein Vimeo oder YouTube Video “responsive” einbinden


“Responsive” Webdesign ist heute in aller Munde. Um es auch den Schlagwort-Unwissenden kurz zu erklären: “Responsive” bedeutet in Bezug auf eine Internetseite im Prinzip nur, dass sich Layout und Design selbstständig an die Größe des Displays des Nutzers anpasst, egal ob dieser nun mit einem Handy, einem Tablet PC oder einem normalen Monitor surft. Es gibt also nicht mehr, wie in den Anfängen des mobilen Webdesigns, extra Versionen der Internetseite für Handys und andere Geräte, sondern nur eine Version. Das ist zeitsparend, da nicht verschiedene Versionen entwickelt und betreut werden müssen und zukunftssicherer, da die Seite auch automatisch mit der nächsten Generation von Mobiltelefonen funktioniert. Wichtig ist dabei jedoch das sich alle verwendeten Elemente skalieren lassen. Das ist mit Hilfe […]

Weiterlesen…