Optical illusions with CSS [Project Tutorial for Beginners]

Welcome to another CSS animation tutorial for beginners. Today we will build animated background effect together. In this series I help you to learn front end web development by taking you step by step through all different kinds of creative HTML and CSS projects.

This tutorial is part of a series – CSS 3 Creative Coding Experiments https://www.youtube.com/playlist?list=PLYElE_rzEw_t2O2DvfopIoq-diTgefVzV

I have always loved opticall illusions, they reveal interesting things about how our brain pieces visual input together to make sense of what we are looking at. I also like HTML CSS and front end web development in general and I have always wanted to create a project where I put these two things together. In today’s CSS animation tutorial for beginners we will build our own optical illusion and make it into interactive animated background effect. We will learn how to animate gradients with CSS and how to use 2 uncommon CSS3 selectors – adjacent sibling combinator (+) and general sibling combinator (~).

Latest offers and packages for Adobe Creative Cloud (Adobe Photoshop, Illustrator etc.) https://bit.ly/3e60cI0

You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

Relevant links:
https://archive.nerdist.com/5-optical-illusions-that-show-you-why-your-brain-messes-with-the-dress/ https://www.washingtonpost.com/news/wonk/wp/2015/02/27/12-fascinating-optical-illusions-show-how-color-can-trick-the-eye/

Have fun 😀

Leave a Reply