25 Days of CSS Highlights
It was the first day of 2019 and I was not where I wanted to be. I felt at my peak when learning something new. The n...
For further actions, you may consider blocking this person and/or reporting abuse
To get inspiration, this one may be of interest to you:
uimovement.com/all-designs/
I like the ideas there and since it's only for inspiration and not actually coded (I believe), a few could be a good challenge.
Thank you for sharing! I just book marked this. I'm excited to visit this site for UI inspiration!
You can even receive the top 5 designs of the week in your inbox ;)
Thanks for this article! I love CSS and all that creative part. Always wanted to try a full css animation like those you've shown here. Your challenge motivates me to start one 💪
Awesome realizations 😍👏
Thank you so much! Good luck and have fun with your challenge! 💪🔥
oooohhh how beautiful and inspiring! I want to be able to create such fantastic animations! But my problem is more the difficulty to stay focused. Before starting a new project (there I quickly find myself in the "flow" as gamers would say) I get distracted easily, and more than a little scared. There are sooo many interesting things to learn and create, I never really know where to start
Thank you! Haha I totally hear you. I can be the same way. What I found helpful is tailoring work to what you're passionate about, in your case it could be gaming! That way you're motivated to problem solve and find resources to help you with your next project. Working on something gaming related motivates me too :D
Yeah you're right. of course I could reply that maybe I am a bit too much passionate :D In fact that's probably my biggest problem, finding time to do everything I want ;) like I'm involved in a lot of local groups in my town, mostly in ecology. I have many ideas for that and so little time
Brilliant and inspirational article!
How did you have all the time for this? I'm guessing you didn't have a full time job at the time? And did you do all 25 days in a row, or was this like a weekly project?
Thanks so much!
Since there wasn't room in my schedule to spend 25 consecutive days on this, I allotted time on days where I was free to work on this. That way I still worked on this for 25 days.
Oh my god , I proud of you. I hope i have the same way that help me to learn New skills .
I will try the same steps to learn CSS motion.
My new Arabic project " ask and answer community mohamadkhalil.com/
Thank you for the kind words! Best of luck with your CSS journey as well!
I personally think that this is one of the best ways to learn new things - build fun and interesting for you projects. You can devote a small project like these to one thing or a concept and finish it in a couple of evenings or so.
Then, when you gain more skills in this area, you can combine them into something much more substantial.
The most fun part here is that there are no rules! You can do anything you want. You can let your imagination roam free and just code whatever you like, however you like.
Nobody is going to stand behind your shoulder and complain about missing requirements or strict deadlines.
Thanks for sharing this.
Well said. This is exactly how I felt while pursuing this, and it really paid off. Since finishing my challenge I noticed that I’ve been much more mindful about my CSS usage since this helped me understand properties at a deeper level. Now I work as a frontend engineer and and I’ve been able to pick up my companies code axe and conventions very easily. I’m also helping rewrite our CSS documentation too. Passion projects really do pay off.
Love your work and efforts.
I also go to codepen and find awesome css motions that I want to code myself.
But I'm never able to I try.
I always get stuck with random numbers and how to decide what angle will or what degree will be correct.
Any tips how can I also learn what you learned in 25days.
These are amazing! 🦄😍
Thank you! ❤️🦄
Any good animation tutorials? Everything I find is basic animations, but all these examples feel so intimidating. 😅
That's a good question. Most of what I learned about animation was from reading MDN's Keyframes post and W3Schools' articles on keyframes and the animation article.
Before viewing these I used W3Schools and MDN to learn how to shape elements and position them in different ways since each shape is an HTML element! CodePen was also phenomenal for seeing it put into practice.
I did however just come across an illustration and animation by Agathe Cocco after my challenge. It's a great read and a great place to get started!
Best of luck! I hope this helped answer your questions.
Thanks for taking the time to put an answer together, and congrats on this blowing up! I've seen it everywhere. 😊
These are so cool!
Thank you so much!
Thank you for creating such a great platform. This has been a good one to be apart of and share what I've learned.
This is both, the most ingenious, and down right neatest blog post of Twenty '19.
Thanks for inspiring and reminding us.
Off to code-learning, head scratching, and browser tab accumulating.
We promise not to flatulate.
It is likely though--Yeah? Unfortunately so; We will definitely exacerbate.
> I'm late!
> I'm late!
😁
(Practicing MD cause we suck at this whole structure thing 😪)
This article is very inspirational. The results look awesome and I appreciate how openly you mention the doubt you had during your learning process. From an outside perspective it seems like your time was very well spent :)
Great job Tee.
But I don't understand how you learned all these CSS concepts like keyframes, transitions, transformations, blend modes, clipping, masking, media queries, pseudo-elements, flex boxes?
What book you can recommend exploring these issues in CSS?
This was very inspiring, thank you! Loved the "Intermission", I could totally relate with the reflection you made there. I feel a bit more encouraged after reading your article. Your work is beautiful, and I really really liked the sketch for Day 10 (I liked it even more after seeing the result! 🤩). I hope you post more sketches! :)
Thank you so much! I'm happy to read that the intermission was relatable. I tend to forget that everyone goes through this from time to time. Since everyone doubts themselves from time to time it felt right to share my solution for overcoming those feelings. Thank you again for reading and for sharing your thoughts! 😄
You already know that I think your work is fantastic! Great post 🙂 You definitely have a talent for this stuff, have you spent much time in the past doing any design work or just art in general?
Thank you! 😊I really enjoyed your recent post as well.
Back in high school I used to draw and paint a little for fun. I didn't do it as much during college, nor did I do design work before hand. I started studying UI/UX principles and best practices on my spare time and looked to Dribbble and Behance for inspiration. I'm looking forward to doing more UI work in the future.
I cannot describe how amazing this is. I've been wanting to level up my CSS skills but never felt confident enough to do this much animation. Maybe this can give me some motivation. Thanks for sharing!
@acupoftee these are amazing! 3 questions:
This is incredibly awesome and some of them are so detailed. The amount of time it must have taken to get all the in-sync animation easing right is crazy. Amazing work.
Thank you! It was definitely quite the process to sync everything. It's feels great when it all comes together nicely.
WOW you're amazing! My mind is blown with some of these. You have inspired me to really dig into css animations now, thank you Tee!
Thank you so much! It's my pleasure. Good luck, have fun, and I look forward to seeing what you make!
Really amazing ! Congrats !
woahh!!! these are sooo good 😭🌻🦄🦄
Haha thank you! 😄It's a fun medium for sure
Absolutely impressive!
Nice article!
Thank you!
<3
One word, Wow!
WOW
These are absolutely incredible
What an incredible post
Thank you so much! And thank you for creating this community and sharing this on your platforms as well! This has been a wonderful community and I'm happy to be apart of it.
This makes me want to be better
Wish I had more motivation and creativity like you do! Great article btw. I enjoyed reading it ☺️
Thank you! CSS animations are incredible. Definitely would recommend CodePen if you're interested in seeing more of them. It's a great platform for inspiration.
I just want to say that your work is insanely good.
Keep doing it! 😄
Thank you so much! I definitely look forward to working on more of them 😄
Great job that was useful.
I have a questions and I wanted to know with which app you created
Sketch for Day 10 I mean photo?
Thank you!
I took a picture of a notebook sketch with my iPhone. Then in the default editor I increased the brilliance, shadows, contrast, brightness, and black point, and decreased the highlights.
Awesome work! I'm blown away how much you learned in such a short amount of time. Keep up the great work!
Thank you! Will do! It's amazing how much depth there is to CSS. Learning more of its ins and outs will be exciting.
Damnn these are so cool 😍
Thank you! 😊
This legit impressed me
Thank you so much! I'm happy to hear!
If you are also comfortable in After Effects, you can translate your animations to SVG using lottie.js
github.com/airbnb/lottie-web
And there is a community lottiefiles.com/
Thanks for sharing! This looks incredible and would love to use this for future projects.
nice post. native web animation is the best way to start. for my part, I try js libraries like greensock. have you ever experienced this kind of tool ?
Thank you! I haven't used it before. I just looked it up and I like how it makes it easier to adjust animation timelines. I'll give it a try!
woah these are amazing 🎉
That is freaking awesome for inspiration, Thank
Thank you so much for sharing! This week I want to learn animations both SCSS and Javascript. This is really helpful
This is sooo good and inspirational to read. Keep it up buddy..
Great work! I've always love CSS art! It's always something overlooked by many
This is awesome! I really want to improve on CSS animations and this post is very inspirational to me. ❤️
Thanks for sharing, Tee! These are awesome and you've inspired me to learn more CSS animations.
I loved and enjoyed your post, amazing! (and cute!)
I love these. They make my kawaii, designer heart happy.
Inspirational article!
I always wonder if some day we can have a (great) software like Ae to export css/svg animations. We need explore this potential on artists.
I love the creativity in how you created the scenes with divs. 25 days very well spent. Well done!
Wow! These look really cool.
It's so cool lessons, Tee. Thanks a lot for sharing with us.
Hi Tee! Thank you so much for sharing your experience. I am now ready to begin my path in Css Animations. I think I was waiting for a challenge like this one.
Amazing work and very inspiring
Very inspiring work. I'd love to try something like this in 2020. Thank you for posting!
You're an inspiration! What a great post and awesome walk through your process! Thank you so much!!
That's what we call animations!😍cool
I don't usually comment here, but wow! Pokemon animations are super cool. Great work!
so good , very nice , It made me think again.
This is amazing work and so inspiring 🙌🏻
I know I am not the first person to say it but you are on another level. If you could do this in 25 days, I can't imagine what you can do in a year. Salute to your work ethics and determination.