Tag: CSS
CSS (Cascading Style Sheets) is a style sheet language. It is used to define the presentation and layout of HTML or XML documents on the web.
-
HTML: how to vertically center an object with CSS?
There are several ways to vertically center an object with CSS: align-content Property Since Google I/O 2024, a new CSS solution to vertically align an object was shown by the Chrome Development Team. Inside a block element it’s now possible to use the align-content property. The alignment works without additional html blocks or CSS definitions and…
-
Customizing Bootstrap 4 without changing the core files
This post provides a simple instruction on how to customize the Bootstrap 4.0 stylesheet using SASS and Autoprefixer. But why? You can either… When you choose number 2, then it’s necessary to use SASS for compiling the style sheet and Autoprefixer for CSS vendor prefixing. And this is how to get a customized version of Bootstrap: First…
-
Less (CSS) unter macOS installieren
Der einfachste Weg Less auf einem Rechner bzw. Server zu installieren ist über npm (dem node.js Paketmanager) mit: Wenn nicht vorhanden: Command Line Tools für Xcode installieren Wenn nicht vorhanden: HomeBrew installieren Wenn nicht vorhanden: Node.js installieren LessCSS installieren Nun lassen sich die lessc Befehle ausführen.
-
HTML5 Boilerplate – das Grundgerüst für HTML5
HTML5 Boilerplate bietet ein kompaktes Grundgerüst zum Gestalten von Webseiten oder wie auch ich es nicht besser ausdrücken kann: HTML5 Boilerplate ist ein professionelles HTML/CSS/JS-Template als Basis für eine schnelle, robuste und zukunftssichere Website.Nach mehr als zwei Jahren Entwicklung, bekommt ihr das beste der besten Techniken zusammengefasst: Cross-Browser-Normalisierung, Performance-Optimierungen und sogar optionale Features wie Cross-Domain…
-
CSS: vertikales und horizontales Zentrieren von Inhalten
In alten HTML-Zeiten hat man Inhalte noch über Frames oder auch Tabellen auf einer Webseite, sowohl horizontal, als auch vertikal zentriert. Da die Gestaltung und Anordnung von Webseiten nun vorwiegend mit CSS realisiert wird, braucht man manchmal ein paar besondere Kniffe, um bspw. Elemente/Inhalte auf einer Webseite zu zentrieren. Vertikales Zentrieren Die auf blog.themeforest.net beschriebenen…
-
HTML-Sonderzeichen in CSS content
CSS ‘content’ akzeptiert keine benannten oder numerischen HTML Sonderzeichen wie © oder ©, diese können wirklich nur in HTML-Quelltext verwendet werden. Um Sonderzeichen in CSS verwenden zu können, muss man auf die Text-Darstellung in ASCII oder Unicode zurückgreifen. In CSS sieht das Ganze dann wie folgt aus: Eine Tabelle mit allen möglichen Unicode-Zeichen (sortiert nach…
-
CSS: Blockelement in HTML5 zentrieren
Zum Zentrieren eines Blockelementes (<div>) konnte man in HTML4 noch das Attribut align verwenden: <div align=”center”> <div> … Damit wird der zweite div-Block bei Angabe einer festen Breite innerhalb des ersten Blocks zentriert. Mit HTML5 ist allerdings das align-Attribut für div-Elemente nicht mehr zulässig, d.h. das Zentrieren muss in HTML5 über CSS realisiert werden.
-
CSS: Problem beim Rendern von Schriftgrößen in Safari (iPhone)
Safari, welches in iOS (iPhone/iPodTouch/iPad) verwendet wird, “ignoriert” teilweise beim Render von Webseiten die mit font-size definierten Schriftgrößen bzw. passt diese automatisch an, um die Lesbarkeit zu verbessern. An bestimmten Stellen ist dies nicht schlecht, allerdings kann das auch zu unschönen Veränderungen am Design führen. Diese automatische Anpassung kann jedoch durch folgende CSS-Zeilen verhindert werden:…
-
CSS: Abschneiden zu langer Texte
Des öfteren kommt es vor, dass man Text-Ausgaben (beispielsweise für Tabellen) nur gekürzt darstellen möchte. Dies würde sich zwar schon beim Zusammenstellen des HTML-Codes serverseitig realisieren lassen, allerdings führt ein einfaches Abschneiden des Textes nach n Zeichen (besonders bei Nicht-Monospace-Schriftarten) nicht zu einer einheitlichen “Textlänge”. Eine Möglichkeit bietet hierbei die CSS-Eigenschaft text-overflow. Dabei kann der…