Making Wavy or Serrated Edges with CSS
Recently, I found out about text-decoration-thickness, an addition to the set of text-decoration- properties that control text features such as underline.
All posts tagged: css
Text Fragment Effect using CSS
Almost all of the text and box fragment designs I’ve seen online use SVG, and maybe even JavaScript, which is great – and resourceful – but I wanted a simpler method (by simpler, I mean CSS 🐒) to show a plain fragment effect 💔
Auto margin in CSS Grid items
Using auto margin to center an item in both the horizontal and vertical axes is tricky — unless that item is a grid item.
CSS Target (pseudo-class) Animation
I’ve known about :target for a while and have always found it to be quiet useful, but I think with an added animation spin to it, it can be truly profitable 👍
How to add Fonts to Codepen
For the codepen output, if you want to add fonts, like google fonts, you can do that in more than one way.
Grouping browser specific CSS code with @supports
Another quick tip, today! This time it’s about the CSS @supports rule. The rule checks for the browser support, or the lack of it, of a given CSS property/value and applies some style if that check is passed.
CSS Counter and Radio Buttons
I’ll be honest. The one ☝️ thing I’ve not much used CSS Counter for is numbering headings which ironically is the prime example shown in all its tutorials. Although counting header elements is EXTREMELY useful, I’ve found more use for Counter with other elements.
How to Use Emojis as Icons
Icons have become an important part of web designs. Granted there are many online resources (both free and paid) for icons, we still should be able to use the one style of symbols we already have and are uber familiar with — emojis, as icons.
Master CSS Grid With This Simple Step
The answer is, a blueprint! I’m not kidding, this is the single best thing you could include in your Grid workflow (if you got one) that’ll make you master the gridding work
Vertical Alignment for Inline Boxes
I’ve seen CSS vertical-align used only in table cells before, also, in the centering technique where an element with a display:table parent gets display:table-cell and vertical-align:middle to center its contents, vertically. But who knew, this property is even more useful in a place that’s not a table cell…
