#Corner only #border around an #image
▻https://css-tip.com/img/F85FrPdz6B-926.avif
img {
--s: 80px; /* corner size */
padding: 15px; /* the gap */
border: 8px solid #69D2E7;
mask:
conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
0 0/calc(100% - var(--s)) calc(100% - var(--s)),
conic-gradient(#000 0 0) content-box;
}#css
Generative colors with CSS | Go Make Things
▻https://gomakethings.com/articles/generative-colors-with-css
▻https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Values/color_value/oklch
▻https://caniuse.com/?search=oklch
Transformation relative d’une couleur existante en changeant la luminosité, le hue, etc. Cela permet de faire des variantes de couleur très facilement, et donc d’avoir une palette complète pour un site, uniquement à partir de 2 ou 3 couleurs de base.
Cette fonction (encore qu’à 91% now) évite le pré-calcul en PHP des composantes de la couleur, pour pouvoir en faire des variantes ensuite. Actuellement dans SPIP, le plugin CSS Var (▻https://git.spip.net/spip-contrib-extensions/cssvar) fait ça automatiquement dès qu’il trouve une variable de couleur hexadécimale :
▻https://git.spip.net/spip-contrib-extensions/cssvar/-/blob/master/cssvar_pipelines.php?ref_type=heads#L78
Et donc cette fonction permet de faire exactement pareil mais en natif.
#intégration #web #CSS #couleur #thème
#Media_Queries Range Syntax
▻https://ishadeed.com/article/range-syntax
/* Before */
.section {
@media (min-width: 300px) and (max-width: 500px) {
/* styles for the card */
}
}
/* After */
.section {
@media (300px <= width <= 500px) {
/* styles for the card */
}
}
#css
Merci !
Media queries are the backbone of responsive design. We use them to control how a design should change based on the viewport size. But the min-width and max-width syntax can be confusing, and in some cases, cause layout bugs that take time to spot.
This article aims to convince you to use range queries, starting today.
Ah ça y est, c’est enfin utilisable ? Quelle bonne nouvelle, ça va enfin devenir lisible tout ça, quel progrès.
The end of #responsive #images - Piccalilli
▻https://piccalil.li/blog/the-end-of-responsive-images
Responsive images aren’t a problem. picture isn’t a problem; srcset isn’t even the problem.
We both know what the problem is...The sizes dilemma
Fully automatic responsive images. Supply the browser with a list of candidates using srcset, bolt on sizes="auto", and let the browser do the rest.
the string “auto” at the start of a sizes attribute, any browser with support for it will say “figure it out myself; got it,” ditch the rest of the sizes attribute, and move on — browsers without support will throw the meaningless-to-them auto value out and continue on to the rest of attribute as usual. That means you can start using this right now, at absolutely zero cost and with no more overhead than typing auto, at the start of a sizes attribute
An image likely to appear in the user’s viewport when a page first loads is a situation where you wouldn’t want to use loading="lazy" (again, sizes="auto" will only work with lazyloaded images), but these images are the exceptions, not the default.
Every other image — all those images scattered throughout columns and grids and sidebars and “cards” and smatterings of little round user avatars that the web is really made out of? loading="lazy" sizes="auto". Job done. Congratulations.
#css
À intégrer à SPIP ? À adaptive_images seulement ? Faire un ticket ?
#intégration #web #HTML
À intégrer à SPIP ? À adaptive_images seulement ? Faire un ticket ?
Oui, d’autant plus que l’article mentionne l’intégration du bouzin dans WP avec un lien vers le commit en question.
Du coup ça a un sens de faire un ticket dans SPIP noyau (filtres d’insertion d’images) ou Médias (modèles de doc) ? Ou que dans Adaptive ?
Je dirais uniquement dans les plugin qui insèrent des srcset+sizes.
contrast() | CSS-Tricks
▻https://css-tricks.com/almanac/functions/c/contrast
Making product card images pop on hover
Another useful application for contrast() is to highlight an image in a user’s interaction. For example, in a row of image cards, we could increase the image’s contrast and also scale it on hover
.card img {
transition:
filter 0.4s ease,
transform 0.4s ease;
}
.card:hover img {
filter: contrast(125%);
transform: scale(1.05);
}
#CSS #Relative #Colors: Build UI #Palettes Without a Color Picker
▻https://theosoti.com/blog/css-relative-colors
Relative colors shine when a component needs multiple accents. Here is a compact pattern for a callout card:
Keep derived tokens in one space so the relationships stay coherent. Mixing spaces is valid, but remember the source is converted to the output space for every calculation, which can subtly change the result.
The component only needs one input (—tone). Everything else follows.
.callout {
--tone: #4b6bff;
--tone-strong: hsl(from var(--tone) h s calc(l - 12));
--tone-soft: hsl(from var(--tone) h calc(s - 20) calc(l + 28));
--tone-border: rgb(from var(--tone) r g b / 0.2);
--tone-shadow: rgb(from var(--tone) r g b / 0.25);
border: 1px solid var(--tone-border);
background-color: var(--tone-soft);
box-shadow: 0 12px 24px var(--tone-shadow);
}
.callout strong {
color: var(--tone-strong);
}Attention quand même : ▻https://caniuse.com/mdn-css_types_color_hsl_relative_syntax
93% en France et 89,5% dans le monde, c’est pas 98% ni même 95% comme seuil acceptable de « presque tout le monde ok ».
The Value of #z-index | CSS-Tricks
▻https://css-tricks.com/the-value-of-z-index
To maintain a clean and scalable codebase, here are the golden rules for working with z-index:
– No magic numbers: Never use arbitrary values like 999 or 10001. If a number isn’t tied to a system, it’s a bug waiting to happen.
– Tokens are mandatory: Every z-index in your CSS should come from a token, either a global layer token or a local positioning token.
– It’s rarely the value: If an element isn’t appearing on top despite a “high” value, the problem is almost certainly its Stacking Context, not the number itself.
– Think in layers: Stop asking “how high should this be?” and start asking “which layer does this belong to?”
– Calc for connection: Use calc() to bind related elements together (like an overlay and its background) rather than giving them separate, unrelated tokens.
– Local contexts for local problems: Use local tokens (—z-top, —z-bottom) and internal stacking contexts to manage complexity within components.
#css
text-decoration-inset is Like Padding for Text Decorations | CSS-Tricks
▻https://css-tricks.com/text-decoration-inset-is-like-padding-for-text-decorations
The text-decoration-inset #CSS property solves a problem that we’ve had since the beginning of the web, which is that #text #decorations such as underlines extend beyond the first and last characters (to the edges of the content box, to be specific), resulting in vertical misalignment.
The Basics of #Anchor_Positioning
▻https://ishadeed.com/article/anchor-positioning
In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier.
▻https://ishadeed.com/_astro/anchor-02.Dm6tIZ3X_NKU2n.webp
#css
Better CSS layouts: Time.com Hero Section
▻https://ishadeed.com/article/time-layout
In this article, I went through a #layout that looks simple at first, and took it further to make it more dynamic with #CSS. Having this flexibility is a game-changer as it will allow you to build fluid and conditional layouts, with less CSS.
For example, being able to combine CSS #:has() and #grid-area is a powerful combination! Add #container #querie to it, and magic will happen.
▻https://ishadeed.com/_astro/layout-analyze-1.C7KPAnhT_o8i4H.webp
▻https://ishadeed.com/_astro/layout-analyze-2.DtggeFWO_2fnkGR.webp
▻https://ishadeed.com/_astro/layout-analyze-3.DDurODEH_1f4aoM.webp
▻https://ishadeed.com/_astro/layout-analyze-4.Cze0A0FS_1vo7XE.webp
▻https://ishadeed.com/_astro/layout-analyze-5.DbQDrqe8_Z1MpGWI.webp
100 Ways to #Center an element Horizontally and Vertically
▻https://css-tip.com/center
Centering in CSS is pretty easy nowadays. We have numerous methods to do it, but how many exactly? I did the count, and I was able to reach 100 different ways!
▻https://css-generators.com/center
That being said, here are my favorite methods for centering a single element horizontally and vertically for each type of layout.
.container {
display: block;
align-content: center;
justify-items: center; /* the support is still not good for this one */
}
.container {
display: grid;
place-content: center;
}
.container {
display: flex;
flex-wrap: wrap;
place-content: center;
}Voir aussi The Fundamentals of CSS Alignment ▻https://css-tip.com/explore/alignment
The Best CSS Unit Might Be a Combination | OddBird
▻https://www.oddbird.net/2025/09/23/type-units
The “Most Hated” #CSS Feature: cos() and sin() | CSS-Tricks
▻https://css-tricks.com/the-most-hated-css-feature-cos-and-sin
If we go by the unit circle definition of cos() and sin(), then it’s easy to see how they might be used to create #circular #layouts in CSS.
Getting Creative With #Images in Long-Form #Content | CSS-Tricks
►https://css-tricks.com/getting-creative-with-images-in-long-form-content
- Text width or full-bleed
– Using a modular grid for multiple images
– #CSS Shapes and expressive possibilities
– Integrating captions into a design
– The power of whitespace
Styling Tables the Modern CSS Way
▻https://piccalil.li/blog/styling-tables-the-modern-css-way
Creating good-looking tables on the web can be fiddly at times. We’re going to run through some tips and gotchas for building simple and complex tables in HTML and CSS, and where modern CSS can help us.
#css
#Overflow Clip
▻https://ishadeed.com/article/overflow-clip
When the overflow is set to hidden on one axis, say overflow-y, the other axis overflow-x will become auto by default, resulting in clipping both sides. This behavior isn’t always desired. In some cases, we want clipping on only one axis. Additionally, the other axis will become scrollable, which may lead to unexpected results.
This is where the clip value becomes helpful.
#css
#Full-bleed layout with modern #CSS
Use modern CSS and a few lines of code to create a full-bleed layout.
Full-bleed? It’s when an element needs to bleed outside the main container and extend to the edge of the page.
html {
container-type: inline-size;
}
main {
--w: 600px; /* the max-width */
--m: 1em; /* margin on small screen */
margin-inline: max( var(--m),(100cqw - var(--w))/2);
}
.full-bleed {
margin-inline: min(-1*var(--m),(var(--w) - 100cqw)/2);
}Gaffe : c’est avec des unités de container (92% d’adoption pour l’instant).
Est-ce que ça apporte quelque chose de plus que ce qu’on avait déjà avec :
.spip_documents.max {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}Sinon, sauf erreur, la division par deux suggère encore que c’est prévu pour fonctionner uniquement si la colonne de texte est elle-même centrée horizontalement dans l’écran (même marge à gauche et à droite), c’est généralement la limite de cette méthode (si la colonne de texte n’est pas au centre, on peut y arriver, mais faut faire des maths).
#3D #parallax effect on #hover
▻https://css-tip.com/3d-parallax-effect
Un petit effet « wow ! »
img {
--s: 300px; /* the image size */
width: var(--s);
aspect-ratio: 1;
box-sizing: border-box;
padding-inline: calc(var(--s)/10) 0;
object-fit: cover;
border-radius: 20px;
transform: perspective(350px) rotateY(calc(var(--_i,1)*10deg));
transition: .5s;
}
img:hover {
--_i: -1;
padding-inline: 0 calc(var(--s)/10);
}#css
Animate to height/width auto (without hacks)
▻https://css-tip.com/animate-height-auto
Only three lines of code and you have a smooth transition to height: auto
interpolate-size: allow-keywords; oO
#css
Joli. Bizarrement, caniuse lui colle 0,02% de compatibilité, indiquant que ce sera pour une future version de Chrome, alors que chez moi ça fonctionne parfaitement (Chrome Mac).
Ça change bien la hauteur du p, mais ça n’applique par transition: 1s; ;)
Si, justement, avec Chrome sur Mac, on a bien la transition hyper-smooth. (Safari, en revanche, c’est sans transition.)
Encore un truc casse-gueule : je développe sur Mac des écrans tactiles qui tournent sur des PC. Comme je connais la machine cible, je peux utiliser les dernières CSS qui sortent, mais quand ça fonctionne différemment sur Mac et sur PC, c’est hyper-chiatique.
Donc c’est bien ça, ça devrait fonctionner sur les Chrome à jour depuis une semaine. @b_b : je viens du coup de rallumer le PC et de mettre à jour Windows, et j’ai bien la transition smooth comme tout…
Du coup : faudrait l’intégrer à @seenthis pour les messages longs. Comme de toute façon on n’a pas d’animation là-dessus, ajouter ce petit bout de CSS n’introduira aucune perte.
Ça ne mangerait pas de pain oui, à ce sujet il faut que je poste un message pour annoncer les changements du côté du développement de #seenthis :)
Le lien vers les changements de @seenthis : ▻https://seenthis.net/messages/1073344
@arno vu mais c’est sur la branche master ▻https://git.spip.net/seenthis/squelettes/-/commit/d85bc0f14de2c6b01bc61a104a1162e94d3c3302 qui est celle compatible avec SPIP 4, celle utilisée en pro est la branche 2.2. Soit on reporte dans cette branche, sinon on peut attendre le passage en SPIP 4 de seenthis.
#CSS #Grid #Areas
▻https://ishadeed.com/article/css-grid-area
Pour les personnes qui comme l’auteur ont du mal à se rappeler des références des 1fr :)
Perso je m’étais bien amusé à apprendre ça avec ▻https://seenthis.net/messages/702365
An Interactive Guide to #CSS #Container_Queries
▻https://ishadeed.com/article/css-container-query-guide
CSS container queries help us to write a truly #fluid #components that change based on their container size. In the next few years, we’ll see less media queries and more container queries. Of course, using media queries will still be useful for general layout stuff.
Zoom, zoom, and zoom | OddBird
▻https://www.oddbird.net/2024/07/09/zoomies
I’m working on an article about fluid typography, and relative units. But instead, I fell down this rabbit hole – or a cleverly-disguised trap? – trying to understand ‘zoom’ in the browser (not Zoom™️ the software). Since I couldn’t find any up-to-date articles on the subject, I thought I should write one.
#CSS #Grid #Generator
▻https://cssgridgenerator.io
CSS grid generator is a tool that helps developers create custom CSS grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size.