Some CSS Pseudo Classes, CSS Pseudo Elements and CSS Combinators
CSS Pseudo Classes
section:target
Wenn auf der Seite eine section per Anker angesprochen wird und zum target wird (geklickt wird)
p:only-child
Wird nur angesprochen, wenn es nur ein p im parent gibt
blockquote:only-of-type
Wird nur angesprochen, wenn es nur EIN blockquote gibt
xy:focus-visible
Alternative zu :focus die neuerdings von den Browsern verwendet wird
Video
.card:focus-whitin > img
img kann keinen focus haben. Also: Wenn irgendein Element in der card fokussiert wird, passiert xy mit dem img
:any-link
Der :any-link CSS Pseudoklassen Selektor repräsentiert ein Element, das als Quellanker eines Hyperlinks fungiert, unabhängig davon, ob es besucht wurde. Mit anderen Worten, er stimmt mit jedem <a> oder <area> Element überein, das ein href Attribut hat. Somit stimmt er mit allen Elementen überein, die mit :link oder :visited übereinstimmen.
:empty
Die :empty CSS Pseudoklasse repräsentiert jedes Element, das keine Kinder hat. Kinder können entweder Elementknoten oder Text (einschließlich Leerzeichen) sein. Kommentare, Verarbeitungsanweisungen und CSS content beeinflussen nicht, ob ein Element als leer betrachtet wird.
:optional/required
Die optional CSS Pseudoklasse repräsentiert jedes <input>, <select> oder <textarea> Element, das nicht das required-Attribut gesetzt hat.
Die :required CSS Pseudoklasse repräsentiert jedes <input>, <select> oder <textarea> Element, das das required Attribut gesetzt hat.
.card:not(.card2)
Alle .card außer .card.card2
CSS Pseudo Elements
li::marker
Kann Farbe, Form usw. der list-style-items ändern
Mit content="" können auch img oder andere strings eingebunden werden
Wichtig! Überschreibt mit content auch die Nummern in ordered lists
::selection
Kann Hintergrund und Textfarbe ändern, wenn Text auf der Seite markiert wird
::placeholder
Kann das Styling bei den Placeholdern in inputs ändern
::backdrop
Kann den Hintergrund bei z.B. Modalen (hinter dem Modal) ändern
::first-letter
Das ::first-letter CSS Pseudo-Element wendet Stile auf den ersten Buchstaben der ersten Zeile eines Block Containers an, aber nur, wenn diesem kein anderer Inhalt (wie Bilder oder Inline-Tabellen) vorangeht.
::first-line
Das ::first-line CSS Pseudoelement wendet Stile auf die erste Zeile eines Blockcontainers an.
::before/after (Besonderheit)
Bei "content:" sollte wenn nur eine Grafik angegeben ist, ein Vermerk für Screenreader hinterlegt werden. Das wird aktuell noch nicht gut von den Browsern unterstützt und es gibt einen Workarround:
content:"Grafik"
content:"Grafik" / "Textbeschreibung (nur Screenreader)"
In dieser Reihenfolge wird die zweite Zeile verwendet sofern der Browser das Feature unterstützt. Ansonsten wird die Zeile ignoriert.
CSS Combinators
div > *
Alle direkten Kinder
div + *
Der direkte Nachbar
div ~ *
Alle Nachbarn
* + *
alle childs bis auf das erste haben ein margin top das sich auf die jeweilige font-size bezieht (font-size * goldenen schnitt)
https://www.youtube.com/watch?v=cuEHx9DoWI4
Typography Tricks
.multiple-textshadow {
text-shadow:
0.025em 0.025em 0 yellow, /* offset bottom, offset right, blur, color */
0.05em 0.05em 0 blue,
0.075em 0.075em 0 red;
}
Textshadow
.gradient-text {
background-image : linear-gradient(90deg, limegreen, black);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
Textgradient
funktioniert nur wenn der Text einzeilig bleibt
Textgradient
umbruch
.text-outline {
-webkit-text-stroke: 1px blue;
}
Textoutline
.text-cut {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
How to set a maximum number of lines of text with CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
https://www.youtube.com/watch?v=b6iVByCOx8A
.text.count {
max-width: 35ch; /* ch = character */
}
width of p via character count
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
.v-alignment {
writing-mode: vertical-lr;
}
vertical text-alignment
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
.underline-styles {
text-decoration-thickness: 0.2rem;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-line: underline overline;
text-decoration: underline overline solid red 0.2rem; /* shorthand */
text-underline-offset: 0.05rem; /* line position */
}
Link underline styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusjmod temporuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
.gradient-styles {
text-decoration: none;
background-image: linear-gradient(90deg, limegreen, orange);
background-size: 0% 3px;
background-repeat: no-repeat;
background-position: left 1.5em;
padding-block: .25em;
transition: background-size 500ms;
}
.gradient-styles:hover, .gradient-styles:focus {
background-size: 100% 3px;
}
Link gradient styles on hover
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusjmod temporuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
.imgbg-text {
background-image: url(...);
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
color: rgb(0 0 0 / .2);
}
Text img BG
text-wrap: balance;
Lorem ipsum dolor sit amet consectetur adipisicing elit
Bei mehrzeiligem Text werden die Zeilen gleichmäßig mit Wörtern gefüllt
Form Styles
input {
accent-color: #1d6d1d;
}
--checkbox_fontsize: 1rem;
--checkbox_lineheightFactor: 1.2;
--checkbox_spacer: 0.5rem;
--checkbox_bgColor: transparent;
--checkbox_accentColor: green;
--checkbox_checkColor: #fff;
--checkbox_borderWidth: 1px;
--checkbox_borderRadius: 0.25rem;
list-style-position: outside;
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quas ab enim similique libero officiis deserunt aliquid. Voluptas eius vero, magni ad facere nostrum in iste nam
- default = inside
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quas ab enim similique libero officiis deserunt aliquid. Voluptas eius vero, magni ad facere nostrum in iste nam
- outside
Creative Section Shapes
Video
.diagonal {
--skew_angle: -2deg;
position: relative;
isolation: isolate;
}
.diagonal::after {
content: '';
background: var(--background);
position: absolute;
z-index: -1;
inset: 0;
transform: skewY(var(--skew_angle));
}
.spikes {
--clr_spike: var(--clr_bg_main);
--spike_width: 50px;
--spike_height: 10px;
position: relative;
background: var(--background);
}
.spikes::before,
.spikes::after {
content: '';
position: absolute;
width: 100%;
height: var(--spike_height);
-webkit-mask-image: url('../img/triangle.svg');
-webkit-mask-size: var(--spike_width) var(--spike_height);
mask-image: url('../img/triangle.svg');
mask-size: var(--spike_width) var(--spike_height);
background-color: var(--clr_spike);
}
.spikes::before{
top: 0;
}
.spikes::after {
bottom: 0;
transform: rotate(.5turn);
}
.waves {
--mask:
radial-gradient(43.01px at 50% 60.00px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
radial-gradient(43.01px at 50% -35px,#0000 99%,#000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
radial-gradient(43.01px at 50% calc(100% - 60.00px),#000 99%,#0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
radial-gradient(43.01px at 50% calc(100% + 35.00px),#0000 99%,#000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
background: var(--background);
}
Some CSS Patterns
Video
.pattern-one {
background-image:
linear-gradient(transparent 50%, hsl(321, 53%, 75%, .5) 50%),
linear-gradient(90deg, hsl(226, 39%, 32%) 50%, hsl(226, 39%, 10%) 50%);
background-size: 3rem 3rem;
}
.pattern-two {
background-color: #4D6A8A;
background-image:
linear-gradient(-45deg, transparent 75%, hsl(0, 39%, 70%) 75%),
linear-gradient(45deg, transparent 75%, hsl(0, 39%, 70%) 75%),
linear-gradient(-135deg, transparent 75%, hsl(0, 39%, 70%) 75%),
linear-gradient(135deg, transparent 75%, hsl(0, 39%, 70%) 75%);
background-size: 4rem 4rem;
}
.pattern-three {
background-color: #4D6A8A;
background-image:
linear-gradient(-45deg, transparent 75%, hsl(0, 39%, 70%) 75%),
linear-gradient(45deg, transparent 75%, hsl(0, 39%, 70%) 75%),
linear-gradient(-135deg, transparent 75%, hsl(0, 39%, 70%) 75%),
linear-gradient(135deg, transparent 75%, hsl(0, 39%, 70%) 75%);
background-size: 4rem 4rem;
background-position: 2rem 0, 2rem 0, 0 0, 0 0;
}
.pattern-four {
background-color: #fff;
background-image:
linear-gradient(teal 0.3rem, transparent 0.3rem),
linear-gradient(90deg, teal 0.3rem, transparent 0.3rem);
background-size: 3rem 3rem;
}
.pattern-five {
background-color: #212223;
background-image:
radial-gradient(circle, transparent 1rem, #212223 1rem ),
linear-gradient(teal 0.5rem, transparent 0.5rem),
linear-gradient(90deg, teal 0.5rem, transparent 0.5rem);
background-size: 5rem 5rem;
background-position: 2.75rem 2.75rem, 0 0, 0 0;
}
.pattern-six {
background-color: #212223;
background-image:
radial-gradient(circle, transparent 0.5rem, teal 0.5rem),
linear-gradient( teal 0.5rem,transparent 0.5rem),
linear-gradient( 90deg,teal 0.5rem,transparent 0.5rem);
background-size: 5rem 5rem;
background-position: 2.75rem 2.75rem, 0 0, 0 0;
}
.pattern-seven {
background-color: #212223;
background-image: radial-gradient(
circle,
transparent 1rem,
#a1b1c1 1rem,
#a1b1c1 3rem,
steelblue 3rem,
steelblue 5rem,
transparent 5rem
);
background-size: 3rem 3rem;
}
.pattern-eight {
background-color: #212223;
background-image: radial-gradient(
circle,
transparent 1rem,
#a1b1c1 1rem,
#a1b1c1 3rem,
steelblue 3rem,
steelblue 5rem,
transparent 5rem
);
background-size: 15rem 15rem;
}
.pattern-nine {
background-color: #212223;
background-image: radial-gradient(
circle at 100% 50%,transparent 1rem,
#a1b1c1 1rem,
#a1b1c1 1.5rem,
transparent 1.5rem
),
radial-gradient(
circle at 0% 50%,transparent 1rem,
#a1b1c1 1rem,
#a1b1c1 1.5rem,
transparent 1.5rem
);
background-size: 5rem 5rem;
background-position: 0 0, 0 2.5rem;
}
.pattern-ten {
background-color: #313466;
background-image:
conic-gradient(
from 330deg at 50% 60%,
#11ffbb 60deg,
transparent 60deg
),
conic-gradient(
from 150deg at 50% 30%,
#5255bb 60deg,
transparent 60deg
);
background-size: 3rem 3rem;
background-position: 0 0, 1.5rem -0.5rem;
}
.pattern-eleven {
background-color: #313466;
background-image:
conic-gradient(
from 330deg at 50% 70%,
#11ffbb 60deg,
transparent 60deg
),
conic-gradient(
from 150deg at 50% 30%,
#5255bb 60deg,
transparent 60deg
);
background-size: 3rem 3rem;
}
| Name | Poles | Podiums | Wins | Career points | Championships |
|---|---|---|---|---|---|
| Max Muster | 70 | 60 | 50 | 1500 | 9 |
| Maria Mannheim | 20 | 30 | 40 | 1000 | 5 |
| Peter Paun | 10 | 20 | 30 | 2500 | 2 |
| Natalie Name | 70 | 60 | 50 | 1500 | 9 |
| Karl Kopf | 20 | 30 | 40 | 1000 | 5 |
| Daniel Donner | 10 | 20 | 30 | 2500 | 2 |
| Gerda Gammel | 70 | 60 | 50 | 1500 | 9 |
| Andrea Anders | 20 | 30 | 40 | 1000 | 5 |
| Lars Lümmel | 10 | 20 | 30 | 2500 | 2 |
| Ute Unterberg | 70 | 60 | 50 | 1500 | 9 |
| Emil Erpel | 20 | 30 | 40 | 1000 | 5 |
| Otto Obendrauf | 70 | 60 | 50 | 1500 | 9 |
| Wanda Wunder | 10 | 20 | 30 | 2500 | 2 |
| Verena Vogel | 20 | 30 | 40 | 1000 | 5 |
Burger Menu Styles
--burger_menu_width: 2.5rem;
--burger_menu_color: teal;
--burger_menu_borderWith: 0.125rem;
--burger_menu_borderRadius: 0.25rem;
--burger_menu_transitionTime: 150ms;
Tab Navi
Misc Tricks
section { counter-reset: myName; }
section h3 { counter-increment: myName; }
section h3::before { content: counter(myName) ': '; }
Aufzählungen ohne Listen (z.B. sections mit Nummer in der headline)
HL1
p:lorem
HL2
p:lorem
.hr-styles {
border: 0; border-radius: 100vh; height: 1rem;
background: lime;
box-shadow: 0 2rem 0 red, 0 4rem 0 blue, 0 6rem 0 green;
}
hr styles
Bad Browser Support
video
anchor & popover tags in HTML
check again 05/2024
css nesting