Do It Yourself – Website Tutorials

Hey Designers! In this Elementor CSS tutorial, I teach you how to add CSS transitions, transformations and animations to any Section/Column/Widget.

Custom Css tutorial: https://youtu.be/NphoBQPyG_U
Rotate/Scale/Transform Tutorial: https://youtu.be/WHEgqAGOwck
Background gradient tutorial: https://youtu.be/8lwJ8iqXdUg
Positioning tutorial: https://youtu.be/3tCOMrvaGto
CSS animations tutorial:https://youtu.be/J5HhdaiuQms

**Some Important Links**
Elementor Custom Breakpoints Tutorial:

Join the Facebook Group: https://www.facebook.com/groups/designschoolwp

Design your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIUWYcJE0r2oFjRxMLxPBLFt

Build your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIXBIpyRqq8nrjb6Z14l-7gs

Customise your website:

Find the Code for applying various transitions below:

**Code for background color transition**
selector{
-webkit-transition:background-color 4s ease-in 2s;
transition:background-color 4s ease-in 2s;
}
/*Other values are ease, ease-out, ease-in-out, linear*/

selector:hover{
background-color: blue;
}
/*Code ends above*/

**Code for Background gradient transition**
selector{
-webkit-transition:background-image 4s ease-in 2s;
transition:background-image 4s ease-in 2s;
}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
background-image: linear-gradient(to right,red,blue,yellow);
}
/*Code ended above*/

**Code for Box shadow transition**
selector{
-webkit-transition:box-shadow 4s ease-in 2s;
transition:box-shadow 4s ease-in 2s;

}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
box-shadow: 4px 4px 4px blue,5px 5px 5px red, 6px 6px 6px yellow;
}

/*Code ended above*/

**Code for Border transition**
selector{
-webkit-transition:border 4s ease-in 2s;
transition:border 4s ease-in 2s;

}
/*Other values are ease, ease-out, ease-in-out, linear*/

selector:hover{
border: 5px dotted blue;
}
/*Code ended above*/

**Code for position transition**
selector{
-webkit-transition:position 4s ease-in 2s;
transition:position 4s ease-in 2s;

}
/*Other values are ease, ease-out, ease-in-out, linear*/

selector:hover{
position: relative;
top:20px;
left:20px;
}
/*Code ended above*/

**Code to rotate Transition**
selector{
-webkit-transition:position 4s ease-in 2s,-webkit-transform 4s ease-in;
-moz-transition:position 4s ease-in 2s,-moz-transform 4s ease-in;
-o-transition:position 4s ease-in 2s,-o-transform 4s ease-in;
transition:position 4s ease-in 2s,transform 4s ease-in;

}
/*Other values are ease, ease-out, ease-in-out, linear*/

selector:hover{
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
position: relative;
top:20px;
left:20px;
}
/*Code ends above*/

**Code to scale transitions**
selector{
-moz-transition:position 4s ease-in 2s,-moz-transform 4s ease-in;
-o-transition:position 4s ease-in 2s,-o-transform 4s ease-in;
-webkit-transition:position 4s ease-in 2s,-webkit-transform 4s ease-in;
transition:position 4s ease-in 2s,transform 4s ease-in;

}
/*Other values are ease, ease-out, ease-in-out, linear*/
selector:hover{
-moz-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
position: relative;
top:20px;
left:20px;

}

source