Vanilla CSS Cartoon
One of the first websites I built whilst learning CSS
Project Information
- Category: Creative Coding
- Project Date: March 2020
- URL: mathewkennedy.com/css-portfolio
Project Overview
Vanilla CSS Cartoon is an experiment built for the love of CSS when I was first learning. On mobile and portrait screens, where the view isn't fixed but pans from left to right instead, I put in some perspective shifts and layout changes. I plan on writing a blog post with some tricks for some of the more challenging shapes.
Key Features
- Responsive Perspective and Layout Shifts: In portrait, when the narrow view moves from left to right, there are perspective and layout shifts.
- Vanilla CSS Only: All shapes and images were achieved using only vanilla CSS with the purpose of the challenge and learning.
- JavaScript Interactivity: As I was also beginning to learn JavaScript at the time, I added interactivity to the animation - you can pull down the blinds, toggle the fairylights, and adjust fan speed, among other things.
Technologies Used
- Frontend: HTML5, CSS3, JavaScript
- Deployment: AWS EC2 Ubuntu instance running Apache (LAMPP)
🔗 Visit the project here.