CSS
details Marker entfernen
details[open] > summary::marker, details>summary::marker {
display: none;
content: "";
}
Web Fonts
@font-face
{
font-family: 'Mplus1';
font-weight: 100;
src: local('Mplus1-Thin'),
url('Mplus1-Thin.woff2') format('woff2'),
url('Mplus1-Thin.woff') format('woff');
}
Preprocessor
Konzepte
klassisch
Strikte Trennung von HTML und CSS. Das Aussehen wird nur über CSS Dateien gesteuert. Die Selektion der HTML Elemente innerhalb CSS erfolgt durch exzessive Verschachtelung.
BEM - Block Element Modifier
utility-first
Anleitungen
- https://every-layout.dev/
- https://css-tricks.com/
-
Not Your Typical Horizontal Rules (Sara Soueidan)
Beispiel <svg role="separator" width="794px" height="51px" viewBox="0 0 794 51" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- svg content --> </svg>
- On Switching from HEX & RGB to HSL (Sara Soueidan)
- Dark theme in a day (Marcin Wichary)
- Responsive Sidebar Only with CSS (CHistel)
- https://flexbox.ninja/
- Styling SVG <use> Content with CSS