DEV Community: Ali Shata

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

Creating a Dynamic CSS 🌐Orb with Custom Properties and Gradients (One Element)!

Ali Shata — Tue, 27 Aug 2024 23:05:20 +0000

👋 Introduction

CSS has evolved tremendously over the years, giving developers the power to create stunning visuals with just a few lines of code. One of the most exciting aspects of modern CSS is its ability to use custom properties (with the help of @property of course!) and advanced gradients such as conic gradient to craft interactive and dynamic effects.

In this post , I'll walk you through the process of creating a dynamic, orb effect using CSS only. I'll break down each part of the code so you can understand how everything works together to produce this mesmerizing effect.

🚀 Live Demo

Before I dive into the details of the effect, check out this live demo of the orb effect

🧩 Breaking Down the Code

🛠️ Custom Properties (@property)

also known as CSS variables, allow us to define values that can be reused throughout our stylesheets. In my orb effect, I used @property to create animatable properties like --blur, --spread, --color, --angle and others. These properties make it possible to create smooth transitions and dynamic effects that are otherwise difficult to achieve with traditional CSS.

@property --blur: Controls the blur radius of the orb's shadow.
@property --spread: Manages the spread radius of the shadow.
@property --color: Defines the primary color of the orb, which changes throughout the animation.
@property --lighter-color & --darker-color: Derived from --color, these properties create a gradient effect by mixing the primary color with white and black.
@property --angle: Sets the starting angle for the conic gradient, adding rotation to the orb's appearance.

🎨 Gradiental Magic

The appearance of the orb is primarily created through the use of CSS gradients. Here's how each gradient contributes to the final effect:

radial-gradient: Two radial gradients are used to create the core and glow of the orb, giving it depth and dimension.
conic-gradient: This gradient adds a dynamic, rotating highlight effect that makes the orb appear to have a reflective surface.
color-mix: This CSS function blends colors to create smooth transitions between light and dark areas on the orb.

These gradients are layered together using background-blend-mode to create a rich, 3D look that changes over time.

🎞️ Animations

Here comes the part where magic happens 🔮!. There are 2 key animations work together to bring the orb to life:

🌈 change-color : This animation cycles through a spectrum of colors, giving the orb its dynamic, ever-changing appearance.
🌀 orb: This animation alters the blur and spread of the orb's shadow, as well as the angle of the conic gradient, creating a pulsating effect.

On hover ✨, there is a reset animation that brings the orb back to a neutral grayish state , providing a satisfying interaction for users.

💡 Final Thoughts

This orb effect is just the beginning. There are plenty of ways to take it further, such as:

-🖱️ Interactivity: Add mouse or touch-based interactions, such as changing the orb's color based on cursor position or making it follow the user's movements.
-🎮 UI Integration: Use this orb effect as part of a larger UI component, such as a loading spinner, button hover effect, or background animation.
-🔲🔺 Experimenting with Other Shapes: Try applying the same principles to other shapes, like squares, triangles, or even custom SVG paths.

🎉 Conclusion

In this article, we've explored how to create a dynamic CSS orb using custom properties, gradients, and animations. This effect showcases the power of modern CSS, allowing us to build rich, interactive visuals without relying on JavaScript or external libraries.

I encourage you to experiment with this code and make it your own. Whether you're a seasoned developer or just starting out, CSS offers endless possibilities for creativity. Keep pushing the boundaries of what's possible, and happy coding !

Drop a like ❤️, and Follow for more alishata128