Search: [css] - kalvn's links

How to create an accessible language picker | CodyHouse https://codyhouse.co/blog/post/accessible-language-picker?ref=dailydevlinks.com

23/05/2019 14:29:04

Un date picker accessible créé étape par étape.

That Time I Tried Browsing the Web Without CSS | CSS-Tricks https://css-tricks.com/that-time-i-tried-browsing-the-web-without-css/

21/05/2019 09:46:33

tl;dr

Tentative de parcourir quelques sites bien connus sans CSS.

CSSFX - Beautifully simple click-to-copy CSS effects https://cssfx.dev/

20/05/2019 09:54:06

Des effets CSS très sympas et super simples à importer. Il y a des boutons, des input, des loaders et des liens.

Diagonal Containers in CSS | CodyHouse https://codyhouse.co/blog/post/css-diagonal-containers

18/04/2019 14:52:23

CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin https://tobiasahlin.com/blog/masonry-with-css/

17/04/2019 15:32:21

Un moyen d'accomplir un layout à la Masonry avec uniquement du CSS (principalement Flexbox et :nth-child()). C'est très bien pensé malgré les quelques contraintes.

Le plus gros souci pour moi c'est que si un élément est beaucoup plus haut que les autres, les blocs ne s'adapteront pas pour autant et l'ordre de lecture s'en trouvera impacté. Mais pour une grande part des cas, c'est suffisant.

cssdb https://cssdb.org/

16/04/2019 10:08:37

Quelles sont les nouvelles propriétés CSS à venir ?

Using "box shadows" and clip-path together | CSS-Tricks https://css-tricks.com/using-box-shadows-and-clip-path-together/

16/04/2019 09:27:54

Bon à savoir, vous ne pouvez pas utiliser clip-path et box-shadow sur le même élément. Si vous le faite, l'ombre n'apparaîtra pas.

Solution : utiliser un élément parent pour l'ombre ou alors un pseudo-élément (::before par exemple) correctement positionné.

QUIZ: Well aimed? How well do you know CSS selectors? https://codepen.io/pehaa/full/ROapJZ

16/04/2019 08:58:28

Un peu déçu de moi-même :/

Quiz result 92%

Astuces pour mémoriser les codes hexa des couleurs à utiliser dans vos projets web – Korben https://korben.info/astuces-pour-memoriser-les-codes-hexa-des-couleurs-a-utiliser-dans-vos-projets-web.html

12/04/2019 12:56:13

Sous le coude.

339 bytes of responsive CSS · Gaurav Koley https://blog.koley.in/2019/339-bytes-of-responsive-css

11/04/2019 21:58:51

Il ne faut pas grand chose pour rendre un site de base un peu joli.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  max-width: 40rem;
  padding: 2rem;
  margin: auto;
  background: #fafafa;
}
img {
  max-width: 100%;
}
a {
  color: #2ECC40;
}
h1, h2, strong {
  color: #111;
}

Creating a full bleed CSS utility - Andy Bell https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/

08/04/2019 22:33:13

Une astuce pour faire sortir un contenu de son parent sans changer son positionnement.

.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

Hacking Custom Checkboxes And Radios – Hacker Noon https://hackernoon.com/hacking-custom-checkboxes-and-radios-5d48230440d

29/03/2019 10:48:47

Styliser les checkbox et radio buttons.

Why can't I set the font size of a visited link? https://jameshfisher.com/2019/03/08/why-cant-i-set-the-font-size-of-a-visited-link.html

13/03/2019 09:42:49

Incroyable cette histoire !

Il est impossible de changer en CSS la taille d'un lien "visité" (via la pseudo-classe :visited) parce que ça permettrait ensuite à un site mal intentionné de connaître votre historique de navigation en testant la taille de plusieurs liens (et plutôt des liens gênants, forcément :P). Et du coup on pourrait penser que le site en question peut aussi vérifier la couleur pour déterminer les sites visités grâce à window.getComputedStyle(). Eh bien non, parce que cette fonction ment dans ce cas bien précis ! Elle renvoie la couleur normale d'un lien.

Fascinant :)