CSS Designs and Animation

what we are going to cover in this session ?

border:-

The CSS border properties allow you to specify the width, style and color of an element's border.

Shorthand property-

border: 3px solid #ffc201;

border-radius :-

The border-radius property is used to add rounded corners to an element.

Shorthand property-

border-radius: 10px;

Lets Jump, to some Live examples using border and border-radius.

Demo- border and border-radius

box-shadow:-

The box-shadow property attaches one or more shadows to an element.

Shorthand property-

box-shadow: 2px 2px 100px 10px rgb(70, 215, 175);

Animation-

The animation property in CSS can be used to animate transitions from one CSS style to another. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property.

Define Animation-

                @keyframes pulse {
                      0% {
                        background-color: #001F3F;
                      }
                      100% {
                        background-color: #FF4136;
                      }
                }
            

Shorthand animation property-

animation: pulse 5s ease 3s alternative infinite;

Lets Jump, to some Live examples using combination of border, border-radius, box-shadow and animation.

Demo - Animations

Complementary Example

Demo - Wrist Watch

If you like this session then plz try to make this one-

Assignment - Andhera kayam rahe