DEV Community: Ali Shata

Create an INFINITE CSS Carousel🤖 w/ Negative animation-delay !

Ali Shata — Fri, 19 Jun 2026 21:09:22 +0000

The main idea of a Carousel isn't just about moving a bunch of elements from left to right because there must be a smoothly infinite movement, this can be done by duplicating the element, but wouldn't it be a waste of time and resources to do so.

So the best solution would be rather than moving the whole element, we just move each element on a time based manner, all elements will have the animation but each element will have a unique (incremented) index, by which we will delay its start, and if we made this delay negative, we will have a smooth movement without any lagging

adding a will-change will make a separate compositing layer to make the animation run on gpu rather than cpu

below is a demo by which, you can understand the effect

You can reach me (if you had any problems with the effect):
X / twitter "where I post a lot!"
LinkedIn

Colorful Binocular Navbar

Ali Shata — Sun, 29 Sep 2024 20:01:13 +0000

Inspired by a Framer Project, just by using simple positioning calculations of getting the center of an item and moving from it in all directions, then using those coordinates to transform the binocular bar, along with getting the current item to clip the whole binocular to a specific item

Blurry Fill Avatar Card 💎

Ali Shata — Fri, 27 Sep 2024 15:41:09 +0000

Inspired by a Figma design!

JavaScript setInterval to update data.
CSS for the rest👏

Blurry Card with Parallax Effect 💳

Ali Shata — Sun, 22 Sep 2024 23:31:23 +0000

inspired by @jh3yy but without image duplication.
just a pure blurry backdrop that is linearly masked.
used gsap to achieve parallax effect

Click the ALIEN for more stuff !

Slidy Growing Nav

Ali Shata — Fri, 20 Sep 2024 19:35:57 +0000

made using CSS only [one custom property, sticky positioning, scroll-driven animation]

Gradual Blurred Gradience Triangles [CSS Only ! 🤩]

Ali Shata — Fri, 20 Sep 2024 19:34:41 +0000

Gradual Blurred Gradience Triangles [CSS Only ! 🤩]

using the power of clip path along with masking and backdrop-filter

CSS-only Shining Stroke ✨!

Ali Shata — Fri, 20 Sep 2024 19:33:02 +0000

Inspired by a Post on X/Twitter on creating a shining stroke in figma, I thought that I can create it using CSS multi layered background images that are blended on a color-dodge mode, and masking them along with clipping those masks and compositing them in subtract to show only the border, also used css custom properties to manage the gradient direction, border-size, square size

"Trapped Alien" CSS Art & Animation

Ali Shata — Wed, 11 Sep 2024 03:51:39 +0000

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

I'm showing a 2D Alien Trapped in a Space hole, with Space Texture behind him to create some depth and parallax also it's interactive to mouse hover, all is my Original Work and made using CSS Only, Inspired by Cartoons especially the simple shape cartoon characters along with Alien & UFO Culture.

Demo

Journey

CSS Art isn't something new to me, I made some css art back then when I was starting learning about CSS, However this challenge allowed me to refresh my knowledge and deepen it with the unpredictable possibilities of CSS, the one thing that was completely new to me was: Updating a custom CSS property in an animation and using it to transition and element from a state to another.

"Insect Particlizer" an Experiment of combining Pixel Manipulation with CSS.

Ali Shata — Sat, 31 Aug 2024 04:56:08 +0000

Canvas..what a beautiful name that doesn't express how much I love this API, although it was terrible for me at the beginning, but after some trial and error, I understood it, even tried to create uncommon stuff with that crashed my IDE several times. This experiment here is just a one of an uncountable number of experiments that I'm doing quite often in my Frontend journey, here I used Canvas API to get the data of the insect's image, then handled this data in one CSS property (yeah one!)to produce this particles effect.

Question here is, how this could be possible..how one CSS property could handle the image's data (an array of 100000 arrays btw)?

I 'really encourage you my reader to discuss with me in the comments, even try to brainstorm some ideas, maybe you can come up with a better answer than mine.

Cartoon Character in a Login Form !

Ali Shata — Sat, 31 Aug 2024 04:49:01 +0000

This is an Experiment inspired by some good codepens that showed how CSS could create cartoons (even 3Ds), after I came across those pens I managed to build one, and although this my first cartoon character I draw on CSS, it turned out very impressive

When Hovering on a Text becomes Sticky as GUM! 😱

Ali Shata — Sat, 31 Aug 2024 04:18:40 +0000

When it came to hovering on text elements, or any other elements, we by default including me change colors, opacity, font-size, padding, font-weight, even make some good use of transforms, but I'm always searching for the next level, So I came up with this effect that I call the "Fisheye Text Effect", it also could work for images but.. (this will be an upcoming showdev post later!).

What do you think of it? any suggestions, improvements, even negative opinions are welcomed!

Make Every Second have a Theme! ⏰ using @property and hsl()

Ali Shata — Wed, 28 Aug 2024 16:48:14 +0000

🌟 Introduction

Have you ever wanted to create a clock that does more than just tell time? What if every second that ticks by could bring a fresh new theme? With CSS @property and the power of hsl() color manipulation, you can! In this article, I'll walk you through the creating process of a dynamic and visually engaging "Theme Clock" that changes its colors (aka its theme) every second, bringing a new life to each moment!.

🕰️ The Concept

The idea behind the "Theme Clock" is simple yet captivating: as time passes, the clock’s appearance changes. We’ll leverage CSS custom properties to animate the hue of colors (well it's an angle in degrees) and update the clock's theme every second (also for every minute and hour as wel). The result? A seamless, ever-changing clock that is as mesmerizing as it is functional.

💻 Demo & Code

Well, here’s the full code for the "Theme Clock." I'll break it down to understand how each part contributes to the overall effect.

🧩 Breaking Down the Code

1.CSS Custom Properties and @property: The magic behind this theme-changing clock lies in the use of CSS custom properties and the @property rule. We define a custom property --angle that controls the hue of the clock’s colors using the hsl() function. By animating this property over 60 seconds with the @keyframes rule, we achieve a continuous color transition.

Custom Property --angle: This controls the hue of the hsl() color, dynamically changing the theme. and also makes the custom property animatable, allowing smooth transitions.
CSS @keyframes anim: This animation rotates the hue value from 0 to 360 over 60 seconds, cycling through the entire color spectrum.

2.Dynamic Theme Switching: The toggle button allows users to switch between light and dark themes. The button click toggles a dark class on the html element, altering the clock’s appearance.

Light/Dark Mode Toggle: The theme can be switched with a button that dynamically updates the clock’s appearance.
Container Rotation Animation: The clock container spins when the theme changes, adding a subtle transition effect.

3.Clock and Time Update: The JavaScript portion of the code handles the updating of the clock’s hands and the digital time display. The setTime function recalculates the positions of the hour, minute, and second hands every second, while also updating the time and date display.

"scale" Function: Converts the current time into corresponding degrees for the clock hands rotation.

- Real-Time Updates: The clock hands and digital time are updated every second to match the current time.

🚀 Bringing All parts together

By combining the power of CSS custom properties, hsl() color manipulation, and the @property rule, we've created a clock that not only tells time but also evolves in appearance with every passing second. This project is a great example of how CSS can be used to create interactive and visually appealing web elements with minimal JavaScript.

Drop a like ❤️, and Follow for more alishata128