#csstips — Public Fediverse posts

You suck at CSS (and that's okay)

https://rexriepe.com/yousuckatcss/

#HackerNews #YouSuckAtCSS #CSSTips #WebDevelopment #LearningCurve #DesignStruggles

#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