← Feed

Posts

• Post #4195644

  💡 CSS Tip! After corner-shape, shape(), and border-shape, another feature is available to play with: rounding polygons. https://css-tip.com/rounded-shapes/ You create a polygon, add a radius value at the beginning, and you have a shape with rounded corners! #CSS #HTML

• Post #3670370

  📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/ This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!) #CSS #HTML

• Post #3651041

  💡CSS Tip! Create a responsive grid with a cool animation. Everything adjusts smoothly on resize or when adding/removing new items. https://css-tip.com/animated-grid/ A CSS-only implementation with a few lines of code. #CSS #HTML

• Post #3489083

  Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ https://css-tip.com/wiggly-range-slider/ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed) #CSS #HTML

• Post #2507470

  Now that shape() is available in all major browsers, let me remind you that you can use my online generator to create any polygon with ... rounded corners! https://css-generators.com/polygon-shape/ Adjust the setting, then copy the code. #CSS #HTML

• Post #2111683

  💡 CSS Tip! Do you want to control the speed of an infinite animation on hover (or any other interactions)? It's possible with a simple code. https://css-tip.com/speed-control/ Accelerate, slow down, stop, move in the opposite direction. One CSS variable to set and it's done! #CSS #HTML

• Post #1715013

  💡 CSS Tip! For years, we've had the "z-index, stacking context" nightmare, but we will soon have a worse nightmare related to Anchor Positioning 😱 When it doesn't work, it's frustrating, so it's time to learn how it really works. https://css-tip.com/anchor-issues/ It's not as simple as you might think! #CSS #HTML

• Post #1118852

  RE: https://mastodon.social/@csstricks/116335548662855451 Years ago, creating CSS shapes was a tedious task. I had to find workarounds with a lot of gradients and math. Now, using the shape() function, I can easily create complex shapes and animate them! 👇 #CSS #HTML

• Post #1118851

  Who found the easter egg in my CSS-only Dino game? 🥚 A "rocket mode" to fly above everything! 👀 Give it a try: https://css-tip.com/dino-game/ #CSS #HTML

• Post #1118850

  💡 CSS Tip! We've just had the release of :chrome: Chrome 147, which means border-shape was enabled by default! 👀 https://css-tip.com/border-shape/ Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩 #CSS #HTML

• Post #923897

  Bending a straight line using pure CSS?! 👀 Another cool demo in progress powered by border-shape. It's coming to :chrome: Chrome next week! 🤩 #CSS #HTML

• Post #899196

  A classic rounded button: boooring!! 🥱 A squishy animated button: Yes, please!! 🤩 https://css-tip.com/squishy-button/ Another cool demo powered by the powerful shape() function #CSS #HTML

• Post #899195

  It's been a while since my last CSS Pattern, so let's work on new ones! https://css-pattern.com/circles-pills/ #CSS #HTML

• Post #899194

  💡 CSS Tip! Add an infinite wobbling animation to your image with a simple code. https://css-tip.com/wobbling-animation/ Powered by "complex" shape()s that you can easily get from my online generator! https://css-generators.com/fancy-frame/ #CSS #HTML

• Post #899192

  📝 New CSS Article! If you have seen my graph theory demo and wondered how it works, then the article is finally live! https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/ I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm. Modern CSS is fun! #CSS #HTML

• Post #899191

  Now that my favorite feature is well supported, let's create a new set of CSS loaders 🤩 The Squishy Collection: https://css-loaders.com/squishy/ Single-element implementation powered by shape() (and linear() for the bouncy ones!) Pick your favorite one 👇 #CSS #HTML

• Post #899190

  What's the best way to showcase modern CSS features? By making games! This time it's the famous :chrome: Dino Game 🦖 https://css-tip.com/dino-game/ 100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀 Don't search for the JS, there is none. #CSS #HTML

• Post #899189

  💡 CSS Tip! A sliding liquid reveal effect, because why not! 🫗 https://css-tip.com/sliding-liquid/ Another demo powered by shape() and made easy with my online generators: https://css-generators.com/wavy-divider/ #CSS #HTML

• Post #811690

  I thought I had found a bug that prevented counter() from working properly, but it was a feature! https://css-tip.com/counter-gotcha/ Another CSS gotcha that you'd better know about if you don't want to waste time trying to figure out why your code isn't working. Thanks to @mia for the insights #CSS #HTML

• Post #762925

  Stack Overflow asked me to propose a CSS Challenge, and I couldn't refuse. https://stackoverflow.com/beta/challenges/79908564/challenge-17-the-accurate-selection It's about Selectors and more! There is nothing to win (except a profile badge), but it's a fun challenge to illustrate your creativity. #CSS #HTML

• Post #731443

  It seems we can now customize the select element, right? right?! Demo: https://codepen.io/t_afif/pen/PwGPJOB via :codepen: @codepen #CSS #HTML