#csstips — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #csstips, aggregated by home.social.
-
I went to a bank and put a really high negative margin on all the money inside. This offset was enough for it to appear outside the bank, allowing me to abscond with it.
Learn more neat tricks like this in my upcoming book, CSS for Crime.
-
#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!
Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa
The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes
#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment
-
#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.
Pure #CSS #halftone effect in 3 declarations:
✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment
-
Basic #tinyCSStip.💡
So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?
Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!
#css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics
-
Bonus tip to the one @chenry shared https://mastodon.social/@chenry/109325956277772390 - you can have a `background` for an `<img>`.
This helps with getting a gradient `border` for the image when the image also has rounded corners or for a multi-gradient layer `border` pattern: https://codepen.io/thebabydino/pen/JjZNXoQ
Because `border-image` only accepts one gradient image (can't have more to get ⭐ or ❤️ patterns) & doesn't play nice with `border-radius` (https://codepen.io/thebabydino/pen/jxZyed).
