Hier wird’s auch erklärt: https://www.webdesign-journal.de/google-webfonts-einbindung/ PS am 3.11.2025: Joomega hat ein Plugin veröffentlicht, mit dem man google Schriftarten super easy lokal einbauen kann! https://store.joomega.com/JMG-Disable-Google-Font-Externe-Google-Schriften-deaktivieren/SW10005 Das Plugin entfernt vorhande Verlinkungen zu den Google Fonts und lädt die Fonts lokal herunter, ohne dass man FTP bemühen muss.
Kategorie: CSS
Akkordeon-Effekt nur mit HTML
Wladimir Simovic (von dem ich fast alles gelernt habe, was ich von WordPress weiß) beschreibt in seinem Blog, wie man einen schlichten Akkordeon-Effekt erstellt.
Bootstrap Tabellen
http://www.w3bai.com/de/bootstrap/bootstrap_ref_css_tables.html
Clear both
style =“clear: both;“ in dasjenige Element (p oder h) einfügen, das in einer neuen Zeile beginnen soll.
Hintergrundbilder
Bildschirmfüllende Hintergrundbilder Für bildschirmfüllende Hintergrundbilder stehen drei CSS-Werte zur Verfügung: contain, cover und 100% 100%: Bei background-size: 100% 100% wird das Hintergrundbild genau an das Element angepasst. Das bedeutet, dass das Hintergrundbild dabei eventuell verzerrt wird. Mit background-size: contain wird das Hintergrundbild immer ganz angezeigt; es kann allerdings sein, dass daneben noch die Hintergrundfarbe zu […]
„Sticky“ Navigation
Die Anvogation soll oben stehen bleiben, wenn man nach untern scrollt. ist ja immer ganz praktisch, vor allem, wenn man einen Onepager gestaltet: Die entsprechende div, in der die Navigation drin ist, bekommet diese Anweisungen: /*sticky menü */ #(passendes div) { position: -webkit-sticky; position: sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 0; z-index: 9000; […]
Text mehrspaltig anordnen
Auf großen Screens kann es passieren, dass die Zeilen zu lang werden. Wenn man den Kopf bewegen muss, um eine Zeile zu Ende zu lesen, ist das äußerst schlecht für die Usability. Abhilfe bietet das Multicolumn-Modul von CSS3: Hier können Sie festlegen, dass der Textinhalt auf mehrere Spalten aufgeteilt werden soll. Im obigen Beispiel […]
Tabellen responsiv machen
Ein paar CSS-tipps, um Tabellen für schmale Bildschirme nutzbar zu machen: Tabelle mit einem Div umschließen, das folgende Klasse hat: .table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } Scrollbalken für os und ios: .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; […]
Neueste Kommentare