“Trapped Alien” CSS Art & Animation

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 …


This content originally appeared on DEV Community and was authored by Ali Shata

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.


This content originally appeared on DEV Community and was authored by Ali Shata


Print Share Comment Cite Upload Translate Updates
APA

Ali Shata | Sciencx (2024-09-11T03:51:39+00:00) “Trapped Alien” CSS Art & Animation. Retrieved from https://www.scien.cx/2024/09/11/trapped-alien-css-art-animation/

MLA
" » “Trapped Alien” CSS Art & Animation." Ali Shata | Sciencx - Wednesday September 11, 2024, https://www.scien.cx/2024/09/11/trapped-alien-css-art-animation/
HARVARD
Ali Shata | Sciencx Wednesday September 11, 2024 » “Trapped Alien” CSS Art & Animation., viewed ,<https://www.scien.cx/2024/09/11/trapped-alien-css-art-animation/>
VANCOUVER
Ali Shata | Sciencx - » “Trapped Alien” CSS Art & Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/11/trapped-alien-css-art-animation/
CHICAGO
" » “Trapped Alien” CSS Art & Animation." Ali Shata | Sciencx - Accessed . https://www.scien.cx/2024/09/11/trapped-alien-css-art-animation/
IEEE
" » “Trapped Alien” CSS Art & Animation." Ali Shata | Sciencx [Online]. Available: https://www.scien.cx/2024/09/11/trapped-alien-css-art-animation/. [Accessed: ]
rf:citation
» “Trapped Alien” CSS Art & Animation | Ali Shata | Sciencx | https://www.scien.cx/2024/09/11/trapped-alien-css-art-animation/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.