#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
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
#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.
#Fluid_typography with discrete #steps
▻https://css-tip.com/fluid-typography
Use the round() function and create a fluid typography with a discrete function instead of a continuous one.
Define the step and get precise values within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!
/* Instead of */
p {
font-size: clamp(1rem,1rem + 3vw,2.5rem);
}
/* use */
p {
font-size: clamp(1rem,round(down,1rem + 3vw,2px),2.5rem);
}
#css
Je ne vois pas de quel « rounding issue » ça parle : certes j’ai un écran haute densité qui a tendance à masquer les problèmes de rendu, mais il ne me semble pas qu’on ait des problèmes de rendu parce qu’on essaie d’afficher une fonte à 16.33333px.
Very useful if you have some calculation based on the font-size like using the em unit
#CSS #Pattern : Fancy #backgrounds with CSS #gradients
▻https://css-pattern.com
The biggest collection of background Patterns
Explore 144 CSS-only patterns made with CSS gradients and optimized with CSS variables.
You can also surprise yourself with a random CSS Pattern! ▻https://random.css-pattern.com
Toujours par l’auteur de ►https://css-tip.com dont on causait ici ►https://seenthis.net/messages/1001462
Il faut pas oublier la version animée : ▻https://animated.css-pattern.com
Ça pourrait servir à faire des fonds d’écran de connexion aussi :)
On pourrait possiblement aussi imaginer une saisie qui reprendrait tous les types et qui permettrait de les configurer, et ça donnerait une config à utiliser pour un thème ou un écran.
The Ultimate CSS Shapes Collection
▻https://css-shape.com
The Ultimate Collection of CSS-only Shapes
Pure #CSS #shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!
Par l’auteur de ►https://css-tip.com dont on causait ici ►https://seenthis.net/messages/1001462
#CSS Tip: Learn CSS the easy one
►https://css-tip.com
A small website where you can learn a new CSS #trick every day. All the CSS secrets are here (Flexbox, CSS Grid, Gradients, Colors, Animation, Masking, Selectors, etc). It takes one minute to read a tip.
Quelques trucs sympas comme ▻https://css-tip.com/horizontal-line-title ou ▻https://css-tip.com/css-ribbon
