#css · Liens · Devenet

How to disable faux weights with CSS and font synthesis

https://andersnoren.se/how-to-disable-faux-weights-with-css/

body { font-synthesis: none; }

2026-07-06

Modifier le style par défaut des boutons radio

https://paulmakeswebsites.com/writing/shadcn-radio-button/

input[type="radio"] {
/* Disable the browser’s default radio button styles */
appearance: none;
margin: 0;

/* Recreate the circle container */
border: 1px solid black;
background: white;
border-radius: 50%;

/* Center our dot in the container */
display: inline-grid;
place-content: center;

/* Use a pseudo-element to display our “dot” */
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}

/* And display it when the radio button is checked */
&:checked::before {
background: black;
}
}

2026-01-22

Using border-image to apply and overlay gradient

https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/

Il est possible d’utiliser la propriété CSS « border-image » pour facilement ajouter un fond sur une image et faciliter le contraste avec le texte.

.overlay {
border-image: fill 0 linear-gradient(#0003,#000);
}

2024-07-11

One-minute CSS tutorials

https://codyhouse.co/nuggets

Dans le même genre : https://css-shape.com/

2024-05-15

Modern font stacks

https://modernfontstacks.com

Cet outil permet de configurer, de tester et de visualiser des polices plutôt élégantes et surtout avec des rendus instantanés.

2023-05-01

An interactive guide to flexbox

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

Un guide avec des exemples interactifs sur l’utilisation et les propriétés de flexbox en CSS.

2022-11-24

System font stack

https://systemfontstack.com/

• Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

• Serif
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

•Mono
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

2022-05-30

Defensive CSS

https://ishadeed.com/article/defensive-css/

“Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or a weird behavior.

Defensive CSS is a collection of snippets that can help you in writing CSS that is protected. In other words, you will have fewer issues in the future. If you follow my blog, you might read an article I wrote a while back which is called “The just in case mindset”. This is built upon it, and will be an ongoing list of snippets.”

2021-12-13

Incomplete list of mistakes in the design of CSS

https://wiki.csswg.org/ideas/mistakes

That should be corrected if anyone invents a time machine. :P

2021-09-04

CSS Tips

https://markodenic.com/css-tips/

• Typing Effect
• Drop shadow
• Smooth scrolling
• Center
• Cursors
• Truncate text
• …

2021-04-27

5 powerful tips and tricks for print style sheets

https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/#print-qr-codes-for-easy-url-references

Lorsqu’un visiteur de votre site imprime une page de votre site, ça peut être pratique d’ajouter un code QR avec l’URL de la page.

Google propose une API pour générer un code QR :
> https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8

2021-02-27

Knopf.css - Open source button system leveraging CSS variables

https://knopf.dev

Petite bibliothèque de boutons pré-stylisés.

2020-07-15

Comment cibler en CSS Internet Explorer 10 et 11

http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5

Trouvé via https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ :
> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}

2020-07-13