Notes for You:: CSS Gradients | CSS Linear Gradient - CSS Tutorial 85
- is used to create a background consisting of transition between two or more colors along a straight line.
Syntax:
background: linear-gradient(direction, color-stop1, color-stop2,........., last-color-stop);
OR
background-image: linear-gradient(direction, color-stop1, color-stop2,........., last-color-stop);
direction can be:
- to left, to right, to top, to bottom ,
- to top left, to top right, to bottom left, to bottom right
- or angle in degrees.
color-stop: color position
- color : color name, hex color value , rgb(0-255,0-255,0-255), rgba(0-255,0-255,0-255,0-1)
- position: px or %
Example:
background: linear-gradient(to right, red 0%, blue 100%);
background: linear-gradient(to bottom right, red 0%, blue 100%);
background: linear-gradient(90deg, red 0%, blue 100%);
background: linear-gradient(to right, red 0%, green 50%, blue 100%);
background: linear-gradient(to right, red 0%, red 25%, green 25%,green 50%,blue 50%, blue 100%);
repeating-linear-gradient:
- is used to create a repeating linear gradient.
Syntax:
background: repeating-linear-gradient(direction, color-stop1, color-stop2, ..., last-color-stop);
OR
Background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ..., last-color-stop);
Example:
background: repeating-linear-gradient(90deg,white 0px, white 20px,black 20px, black 40px);
=========================================
Follow the link for next video:
CSS Tutorial 86 - CSS Radial Gradient Background Tutorial
• CSS Gradients | CSS Ra...
Follow the link for previous video:
CSS Tutorial 84 - CSS Multiple Backgrounds | CSS Multiple Background Images
• CSS Multiple Backgroun...
=========================================
CSS Tutorials Playlist:-
• CSS Tutorials
=========================================
Watch My Other Useful Tutorials:-
HTML Tutorials Playlist:-
• HTML Tutorials
JavaScript Tutorials Playlist:-
• JavaScript Tutorials
jQuery Tutorials Playlist:-
• jQuery Tutorials
=========================================
► Subscribe to our KZitem channel:
/ chidrestechtutorials
► Visit our Website:
www.chidrestec...
=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial
Негізгі бет CSS Gradients | CSS Linear Gradient - CSS Tutorial 85
Пікірлер: 22