Webdesign
Selecting previous siblings with CSS :has() | Tobias Ahlin
https://tobiasahlin.com/blog/previous-sibling-css-has/
Selecting a previous sibling was for long impossible, but is now a breeze with the has() pseudo-class
Modern CSS in Real Life – Chris Coyier
https://chriscoyier.net/2023/06/06/modern-css-in-real-life/
CSS Subgrid | 12 Days of Web
https://12daysofweb.dev/2022/css-subgrid/
With subgrid coming to all engines very soon, it’s a great time to discover what this new feature of grid can do.
Deploying CSS Logical Properties On Web Apps — Smashing Magazine
https://www.smashingmagazine.com/2022/12/deploying-css-logical-properties-on-web-apps/
You may have already heard of CSS logical properties or RTL adaptations but are still deciding whether to deploy them widely. To help raise your awareness of their possibilities, Nicolas Hoffmann shares his experience of how he and his team at Proton carried out a massive move from CSS logical props to production and how you can consider them from a different perspective in your very own projects.
Conditional CSS
https://ishadeed.com/article/conditional-css/
CSS is condtional in many ways. In this article, I will go over a few CSS features that we use every day, and show you how conditional they are.
100 Days Of More Or Less Modern CSS - Manuel Matuzovic
https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css/
A blog post about modern CSS every day for 100 days.
Creative list styling | Articles | web.dev
https://web.dev/articles/creative-list-styling
A look at some useful and creative ways to style a list.
Using :has() as a CSS Parent Selector and much more | WebKit
https://webkit.org/blog/13096/css-has-pseudo-class/
It’s been a long-standing dream of front-end developers to have a way to apply CSS to an element based on what’s happening inside that element.
Use the Right Container Query Syntax | OddBird
https://www.oddbird.net/2022/08/18/cq-syntax/
Size queries are stable, and shipping in browsers
CSS Background-Image: DER Leitfaden zu Hintergrundbildern
https://www.drweb.de/background-image/
So setzt du CSS Background-Image richtig ein ✓ Alle CSS-Hintergrundeigenschaften ✓ Shorthand-Syntax verstehen lernen » Jetzt schlau machen!
41 Beautiful Color Palettes For Your Next Design Project
https://digitalsynopsis.com/design/color-palettes-combinations-schemes/
Looking for color palettes for your graphic, web, or UI design? Colours.cafe is a handy Instagram account that shares a beautiful new palette everyday,
Farbige Listenpunkte mit CSS ::marker
https://kulturbanause.de/blog/farbige-listenpunkte-css-marker/
Mit der CSS Pseudoklasse ::marker könnt ihr die Aufzählungszeichen von Listen umfärben. Ein Workaround mit Grafiken oder Pseudoelementen ist somit ggf. nicht mehr notwendig.
Web Accessibility Checklist
https://www.webaccessibilitychecklist.com/
A checklist for creating accessible websites and webapps!
Hinzugefügt vor 4 Monaten
Defensive CSS
https://defensivecss.dev/
Practical CSS and design tips that helps in building future-proof user interfaces.
Defekt
Literatursystem - Das Erscheinungsbild der Stadt Wien
https://www.wien.gv.at/spezial/cd-manual/hauptanwendungen/literatursystem/
Das Erscheinungsbild der Stadt Wien
Hinzugefügt vor 4 Monaten
CSS display: contents; - Agentur kulturbanause
https://kulturbanause.de/blog/css-display-contents/
Mit CSS display: contents; können HTML-Elemente ignoriert werden, wodurch es einfacher wird semantisch korrekte CSS-Layouts zu erstellen.
Set Expires | CSS-Tricks
https://css-tricks.com/snippets/htaccess/set-expires/
Setting "expires" tells browsers downloading these files that they don't need to request it again for this specific length of time. In otherwords, use the
Favicon-Generator: kostenlos & schnell | ✩ Hoststar
https://www.hoststar.at/de/tools/website-favicon-generator
Erstellen Sie Ihr Favicon mit dem Favicon-Generator inkl. Buchstaben-Generator - in 3 Schritten! ✓ Download ✓ Mac ✓ Windows
Hinzugefügt vor 4 Monaten
Checkliste für barrierefreies Webdesign
https://barrierefreies.design/barrierefreiheit-interaktiv-testen/checkliste-fur-barrierefreies-webdesign
Ist Ihre Website schon barrierefrei? Machen Sie den kostenlosen Selbsttest mit der kostenlosen Checkliste (aktuell und basierend auf WCAG 2.1).
Hinzugefügt vor 4 Monaten
Grid for layout, Flexbox for components
https://ishadeed.com/article/grid-layout-flexbox-components/
Learn when to use flexbox and CSS grid with examples and use cases.
Defensive CSS
https://ishadeed.com/article/defensive-css/
A list of defensive CSS techniques to avoid potential future issues
The State Of Mobile First and Desktop First
https://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/
Is mobile first or desktop first still relevant today? An article that explores both with pros and cons for each.
Hinzugefügt vor 4 Monaten
CSS for internationalisation
https://chenhuijing.com/blog/css-for-i18n/
I’ve come across people who do not think that CSS is related to internationalisation at all, but if you think about it, …
Hinzugefügt vor 4 Monaten
Accessiblity Checkliste - Checklist
https://a11y.digitaldialog.swiss/checklist
Diese praxisorientierte Checkliste unterstützt Sie dabei, den Zustand Ihres digitalen Angebots hinsichtlich der Barrierefreiheit zu beurteilen. Zielgruppe der Accessibility-Checkliste sind Design-, Entwicklungs- und Content-Teams ebenso wie Qualitätssicherungsverantwortliche und Projektleitende.
Hinzugefügt vor 4 Monaten
Modern Techniques for Writing Better CSS | Aleksandr Hovhannisyan
https://www.aleksandrhovhannisyan.com/blog/writing-better-css/
Write cleaner CSS using modern strategies like :is and :where, logical properties and values, clamp, gap, and aspect-ratio.
Articles - Ahmad Shadeed
https://ishadeed.com/articles/
Deep-dive CSS articles, modern CSS and visual CSS explanations.
Material Symbols & Icons
https://fonts.google.com/icons?selected=Material+Icons%3Aannouncement%3A&icon.size=24&icon.color=%235f6368
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
Library · OpenMoji
https://openmoji.org/library/
Open source emojis for designers, developers and everyone else!
Responsive Images – , srcset, sizes & Co.
https://kulturbanause.de/blog/responsive-images-srcset-sizes-adaptive/
Mit den HTML-Attributen srcset und sizes teilt ihr dem Browser mit, dass ihr ein Bild in verschiedenen Abmessungen oder Qualitätsstufen zur Verfügung stellt. Der Browser kann dann selbstständig die passende Datei laden. Mit dem Picture-Element legt ihr exakt fest welches Bild(motiv) wann geladen werden soll.
Größe der Beitragsbilder ändern
https://themezee.com/de/docs/groesse-der-beitragsbilder-aendern/
Unsere Themes greifen an vielen Stellen auf das Beitragsbild (Featured Image) des Artikels zurück. Definierte Bildgrößen Beitragsbilder weisen verschiedene fest definierte Größen auf, welche durch das Theme festgelegt werden. WordPress wird beim Hochladen neuer Bilder diese auf alle definierten Bildgrößen anpassen und unter Umständen auch zuschneiden. Als Folge erstellt WordPress aus jedem Bild mehrere Versionen […]
Understanding min-content, max-content, and fit-content in CSS
https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/
Learn about the fit-content, min-content, and max-content.In keyword values in CSS and how to use them in real-world projects.
Henry From Online | How To Convert Variable TTF Font Files to WOFF2
https://henry.codes/writing/how-to-convert-variable-ttf-font-files-to-woff2/#installing-the-library
I recently received a variable font file from a client to use on their website, but not in a webfont format, so I figured I'd hunt down a route to convert that TTF into a WOFF2 for use in @font-face declarations!
Hinzugefügt vor 4 Monaten
A simple CSS trick for dark mode
https://opensource.com/article/21/10/dark-themes-websites
Text and typography
https://web.dev/learn/css/typography
In this module, learn how to style text on the web.
Hinzugefügt vor 4 Monaten
CSS Logical Properties – Layouts anhand der Leserichtung gestalten
https://kulturbanause.de/blog/css-logical-properties-layouts-anhand-der-leserichtung-gestalten/
Mit den Logical Properties von CSS definiert man Layouts anhand des Flows und der Leserichtung, und nicht länger anhand räumlicher Angaben. Das führt zu logischerem Code und zu einfachen mehrsprachigen Layouts.
Hinzugefügt vor 4 Monaten
Button GOV.UK Design System
https://design-system.service.gov.uk/components/button/
Use the button component to help users carry out an action
Hinzugefügt vor 4 Monaten
Learn Responsive Design
https://web.dev/learn/design/
A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.
Hinzugefügt vor 4 Monaten
Squoosh
https://squoosh.app/
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
Defekt
Hex Colors
https://hexcolor.co/
hexcolor.co is a free color tool providing information about any color. Color Hex will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors.
ColorBlendy - Blend colors with different modes like multiply, overlay, dodge.
http://colorblendy.com/
Farben mischen