← Feed

Posts

• View post

  💡 CSS Tip! border-shape + border-area = The perfect combo 🪄 3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀 https://css-tip.com/gradient-shapes/ Save the code for the future (a near future!) #CSS #HTML

• View post

  RE: https://front-end.social/@css/117234924902143932 border-shape is leading the votes with 181 thumbs up right now! 👀 Can we do the same for if()? Go vote for it as well: https://github.com/web-platform-tests/interop/issues/1343 Let's make it part of Interop 2027! #CSS #HTML

• View post

  💡CSS Tip! Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes! Let's start with Blobs. https://css-tip.com/random-blob/ You never see the same shape twice. A unique shape for a unique experience! 👀 #CSS #HTML

• View post

  💡 CSS Tip! Want to know how many children your container has? We don't have children-count() yet, but we can implement it using modern CSS! https://css-tip.com/children-count/ A hacky experiment powered by Scroll-Driven Animations. How would you use it? Share your use cases 👇 #CSS #HTML

• View post

  📝 New CSS Article! With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count(). Strange? Confusing? What the heck am I talking about?! Read my latest article 👇 https://blog.master.dev/transferring-sibling-count-to-a-parent-element/ #CSS #HTML

• View post

  💡 CSS Tip! Another cool shape that works well with random(): wavy dividers! https://css-tip.com/random-wavy-shapes/ Each visitor gets their own wavy shape for a unique experience. #CSS #HTML

• View post

  More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value. curve, wave, zig-zag, arc ... Which one do you prefer? https://css-tip.com/shaped-range-slider/ 0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!) #CSS #HTML

• View post

  They just released :chrome: Google Chrome V150, and it comes with border-area (among many other cool things). What's border-area? The magic value to create gradient borders easily. https://css-tip.com/border-gradient/ Two lines of code and you are done! 🤩 #CSS #HTML

• View post

  a11y question: Let's suppose I have an empty html element somewhere on the page with 0 content, invisible*, having position:absolute (or fixed). It has no purpose in the HTML (only used for some CSS stuff). Is it a good idea to add the "inert" attribute? Or should I do nothing? * It may or may not have a size, but no style to make it visible. #A11y #HTML

• View post

  💡 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

• View post

  📝 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

• View post

  💡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

• View post

  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

• View post

  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

• View post

  💡 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

• View post

  💡 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

• View post

  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

• View post

  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

• View post

  💡 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

• View post

  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

• View post

  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

• View post

  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

• View post

  💡 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

• View post

  📝 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

• View post

  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

• View post

  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

• View post

  💡 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

• View post

  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

• View post

  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

• View post

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