CSS challenges

Grid

https://codepen.io/lynnvdbo/pen/bNVJdRv

Transform enTtransition

https://codepen.io/lynnvdbo/pen/PwPMyor

Backgrounds / Gradient

https://codepen.io/lynnvdbo/pen/wBMaqQp

Flexbox

https://codepen.io/lynnvdbo/pen/raxLeOv

JS 3-stap

https://codepen.io/lynnvdbo/pen/GgoWEeZ

JS 3-stap - Hamburgermenu

https://codepen.io/lynnvdbo/pen/emJvErw

Colors vingers warmen

https://codepen.io/lynnvdbo/pen/VYeMvVx

light en dark - sample

https://codepen.io/lynnvdbo/pen/NPxaxZj

:has()

https://codepen.io/lynnvdbo/pen/PwNjboV

states - tekstvelden en co

https://codepen.io/lynnvdbo/pen/zxqzovw

Meet the animation properties

https://codepen.io/lynnvdbo/pen/GgZBeyZ

Animations na JS

https://codepen.io/lynnvdbo/pen/raergNL

JS 3stappenplan

https://codepen.io/lynnvdbo/pen/vEGzwVV

:has() - vingers warmen

https://codepen.io/lynnvdbo/pen/dPMwwQb

Magnify

https://codepen.io/lynnvdbo/pen/yyOGZEw

https://codepen.io/shooft/pen/NWoBPKr?editors=0100

Scroll-Driven Animation (werkt alleen in google chrome)

https://codepen.io/lynnvdbo/pen/EaKBPgV

@Font Face CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face

Lettertype downloaden op macbook, vervolgens een mapje "fonts" aanmaken in je file en dan je lettertypes kopieren en plakken erin.

Daarna

Customizable select | 17-03-26

Cust select - basics start

https://codepen.io/lynnvdbo/pen/LERyQBQ?editors=0100

Cust select - met emoji start

https://codepen.io/lynnvdbo/pen/xbEdWYQ?editors=1100

Currenttcolor -> kijkt naar de kleur van de tekst

Select is standaard flex

Select, ::picker(select) {
 appaerance: base-select:
)

appaerance: base-select: met dit stukje code zeg je: Ik ga de styling zelf doen krijg je standaard styling van je broer

------ Het pijltje in de button - een soort :after ------

::picker-icon {
 content:”o”: Width: .5em; Height: .5em; Background-color: white; Clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0;); }

// Het pijltje als de dropdown is uitgeklapt //

Select: open::picker-icon { rotate: x 180deg; }

// dropdown // ::picker(select) {
 }

// hele dropdown als de dropdown is uitgeklapt //

Select::picker(select) {
 background-color: green; Border: none; Margin-block-start: 5em;

padding: .5em
Dipsplay:grid;
Gap: 1px;

border-radius: 1em;

}

// een Option //

Een is flex by default

Option { Background-color: red; Color: white; Padding: .5em
}

// Haver en focus-visible

  &:is(:hover, focus-visible) {
	
    background-color;
    color; pink;
    outline: none;
  }

// dieren die gekozen is actief is

  Option:checked {
	
      font-weight: 700;
  }

// icoontje

 Option:checked::checkmark {
    content:”⚡️”;
    font-size:1.5em;
 }

---

Select, 
::picker(select) {
appearance:base-select;

// Aan rechterkant

position-area: inline-end
margin: 0 .5em;
width: max-content;

// Naar benden als reschts niet past 1/2

position-try-fallbacks: bottom;

// Naar benden als reschts niet past 2/2

@position-try—bottom {
  position-area: bottom;
  margin: .5em 0;
}

In html toevoegen

Span om de tekst Ballonhond

Selected:content { Dispuut fkex Afging item center Gap .25em Padding: .2em; }

Selected:content: span { Positon absoute Left -9999em; }

Selected:content img } Width 3em }



BRONNEN:

https://github.com/fdnd-task/css-challenges/blob/main/docs/challenge_select.md https://chrome.dev/anchor-tool/ https://una.im/select-updates/