Kategorien
HTML/CSS Webdesign

39 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die […]

Kategorien
HTML/CSS Webdesign

CSS3: Texte unterstreichen – mit anderer Farbe und weiteren Effekten

Typografie spielt im Webdesign zunehmend eine wichtige Rolle – vor allem mit der Einführung von Webfonts. Das Unterstreichen von Texten hingegen war immer ein eher eintöniges Unterfangen. Nur auf Umwegen ließen sich Farbe und Art der Unterstreichung beeinflussen. Die erweiterte CSS3-Eigenschaft „text-decoration“ gibt dir zusätzlichen Spielraum für die Gestaltung von Texten. „text-decoration“ um Features erweitert […]

Kategorien
HTML/CSS

CSS und Regex

Reguläre in CSS zu schreiben ist einfacher als Sie denken. Auch wenn Sie bisher noch keine regulären Ausdrücke verwendet haben, können Sie diese Art der Auswahl trotzdem problemlos beherrschen und lernen nebenher noch etwas Regex. PDF-Dateien enden normalerweise mit “.pdf”, sofern sie nicht dynamisch generiert wurden. Mit dem folgendem CSS-Trick, können Sie jedem PDF-Link auf […]

Kategorien
HTML/CSS Responsive Design

So integrierst du responsive Videos und iframes in deine Website

Von modernen Apps und Websites erwartet man, dass sie sich an verschiedesten Auflösungen in möglichst idealer Weise anpassen. So ergibt sich ein optimales Benutzererlebnis, ganz egal, welches Gerät oder welche Auflösung genutzt wird. Inhalte, Bilder und Videos sollten sich in gleicher Weise fließend verhalten, um unterschiedliche Viewports bestmöglich zu bedienen. Doch hast du schon einmal […]

Kategorien
HTML/CSS Webdesign

14 HTML Features, die du {vielleicht} noch nicht kennst

Bis heute sind insgesamt 142 HTML-Elemente vom W3C standardisiert worden, mit Ausnahme derer, die sich noch in der Phase der Standardisierung befinden und natürlich denen, die man als überholt kennzeichnet. Das bedeutet, dass man durchaus einige Elemente nicht kennt und daher nicht benutzt, obwohl sie vielleicht sehr nützlich sein könnten. Auch im Sinne der Webstandards […]

Kategorien
HTML/CSS

Diese CSS-Selektoren solltest Du kennen

In CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen. Das liegt unter anderem daran, dass der von CM-Systemen erzeugte Quelltext oft viele Klassen benutzt, die dann auch für das Styling genutzt werden. Dabei sind diese Selektoren unheimlich mächtige Werkzeuge, die dir […]

Kategorien
HTML/CSS Tipps, Tricks & Tutorials WordPress

So entfernst du das Gutenberg-CSS aus WordPress

Seit gut einem Jahr, genauer mit dem Maintenance Release 4.9.8 im August 2018, ist der neue Gutenberg-Editor fester Bestandteil von WordPress. In diesem Release war eine Gutenberg-Demo enthalten und musste nicht mehr aktiv vom Benutzer als Plugin installiert werden. Somit konnten alle Benutzer den neuen Editor testen, bevor er mit WordPress 5.0. „Bebo“ der neue […]

Kategorien
Design HTML/CSS Webdesign

Natives Lazy-Loading in Chrome

Wichtige Neuerungen im Netz gibt es einige, doch nur wenige sind wirklich von so grundlegender Bedeutung, dass sie für einen Großteil aller Nutzer mit einem Schlag eine deutliche Verbesserung bringt. Eine solche Neuerung ist das sogenannte Lazy-Loading, welches der Chrome-Browser ab Version 76 von Haus aus „nativ“ unterstützt. Chrome wird ab August 2019 das nachrangige […]

Kategorien
Design HTML/CSS Webdesign

CSS3: So zentrierst du Elemente richtig

Was soll daran schwierig sein, Elemente in CSS zu zentrieren? So mögt ihr spontan denken. Wenn ihr euch mit dem Thema jedoch schon öfter befasst habt, wisst ihr auch, dass Zentrierung manchmal zu einer echten Herausforderung werden kann. Im folgenden Beitrag zeige ich euch fünf Methoden, eure Elemente und Schriftzüge in HTML mit Hilfe von […]

Kategorien
Freebies, Tools und Templates HTML/CSS Webdesign

Kostenlose HTML-Editoren: Die 16 Besten für Webentwickler unter Windows

Webdesigner und Webentwickler, die mit Windows arbeiten, finden durchaus einige kostenlose HTML-Editoren vor. Nur, welcher eignet sich und welcher eher nicht. Wir sagen es dir. Hier geht’s zum Artikel für Mac-User.

Kategorien
HTML/CSS Webdesign

Alles paletti: So wird deine Website valide, barrierefrei, sicher und schnell

Webentwicklung wird zunehmend komplexer. Neben korrekter Auszeichnung von HTML und CSS gibt es zahlreiche weitere Faktoren, die zwar nicht zwingend das korrekte Aussehen einer Website beeinflussen, aber dennoch auf den Erfolg einer Website Einfluss haben. Dazu gehört eine barrierefreie Darstellung der Inhalte, sowie eine schnelle Erreichbarkeit. Das alles selbst im Blick zu haben, ist schwierig. […]

Kategorien
Design HTML/CSS Responsive Design UI/UX Webdesign

Design für Alle: Fünf Richtlinien für barrierearme Websites

Menschen mit Behinderungen sind überdurchschnittlich oft im Internet unterwegs und dabei manchmal auf spezielle Aufbereitungen der Webangebote angewiesen. Diese Aufbereitung geht über die übliche Darstellung am Bildschirm hinaus. Menschen mit einer Einschränkung des Sehvermögens lassen sich Websites oftmals mittels Screenreader vorlesen oder auch in Braille-Schrift ausgeben.

Kategorien
Design HTML/CSS

CSS: So benennst du Klassen sinnvoll

Schön anzusehen ist die mittlerweile starke Verbreitung von Stylesheets. Sie haben ihren Platz in der Webentwicklung längst fest eingenommen. Das grundlegende Prinzip der Anwendung von Stylesheets wird allerdings oft falsch verstanden. Damit ist nicht die…

Kategorien
HTML/CSS

Nun auch als Chrome-Extension: Wie du Fehler auf deiner Website einfacher findest

Schreibt man inkorrektes HTML, passiert erstmal gar nichts — der Browser ignoriert es schlichtweg. Doch genau aus diesem Grund passiert es einem schnell, dass man ein ungültiges, beziehungsweise nicht barrierefreies Markup schreibt, und es womöglich gar nicht mal bemerkt.

Kategorien
Design HTML/CSS Webdesign

So erstellst du das optimale Print-Stylesheet

Auch heute gibt es noch viele Menschen, die sich das Internet ausdrucken möchten. Das kann verschiedene Gründe haben. Vielleicht will ein Team den Inhalt deines Beitrags im Meeting besprechen. Oder jemand möchte deinen Artikel dort lesen, wo er gewiss keinen Internet-Empfang hat. Um diese Menschen ansprechen zu können, benötigt jede Website immer noch eine CSS-Datei […]

Kategorien
Design HTML/CSS

HTML5: Videos untertiteln mit dem Track-Element

Seit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich sogar Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machst du Videos […]

Kategorien
Apps Bilder bearbeiten Design Freebies, Tools und Templates HTML/CSS Icons & Fonts Plugins Programmierung Responsive Design

SVG für alle: Icons, Tools und andere Ressourcen

Im Rahmen des Siegeszugs mobiler Geräte entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps. Eine dieser fantastischen mobilen Technologien ist SVG, die Scalable Vector Graphics. SVG erweitert das Konzept von Vektoren über das Niveau von bloßen skalierbaren Bildern hinaus. Tatsächlich ist ein SVG eigentlich XML-basiert, was heißt, dass ein SVG […]

Kategorien
Design HTML/CSS

HTML5: Wie das Template-Element komplexe Vorlagen ermöglicht

Zwar gibt es mit document.createElement() und anderen entsprechenden Methoden eine Möglichkeit, um per JavaScript HTML-Elemente zu erzeugen und dem DOM-Baum hinzuzufügen – komfortabel und übersichtlich ist das jedoch in der Regel nicht. Gerade ab einer gewissen Komplexität der zu erstellenden Elemente kann man schon mal den Überblick verlieren. Das HTML5-Template-Element soll für Abhilfe sorgen.

Kategorien
HTML/CSS

Gewusst wo: Wissensquellen zu HTML und CSS

Die beiden Auszeichnungssprachen HTML und CSS sind unverzichtbar für das World Wide Web und jede Website. Auch wenn du mit Anwendungen wie Dreamweaver arbeitest, kommst du ohne Kenntnisse in diesen Sprachen nicht sehr weit. Aber natürlich musst du nicht jedes Element und jede Eigenschaft kennen. Du solltest nur wissen, wo du dich schlau machen kannst. […]

Kategorien
Design HTML/CSS

HTML5: Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.