100daysofcode - Day18
Hello friends , the 18th day is already here !! Let’s learn some new topics and wrap this amazing day up
.
In yesterday’s post, we talked about functions and their role in SASS. in today’s post we will dive
more into this interesting topic. To learn more how to use some built-in functions to manipulate the CSS code.
The linear-gradient() function
-
Sets a linear gradient as the background image
-
To create the linear gradient we must define at least 2 color stops.
-
So what is a color stop? Colors used to render smooth transitions among, starting point and a direction along with the gradient effect.
Example :#grad { background-image: linear-gradient(red, yellow, blue); }
-
A linear gradient that starts from the left. It starts red, transitioning to blue:
Example :#grad { background-image: linear-gradient(to right, red , blue); }
-
A linear gradient that starts at top left (and goes to bottom right):
Example :#grad { background-image: linear-gradient(to bottom right, red , blue); }
-
A linear gradient with a specified angle:
Example :#grad { background-image: linear-gradient(180deg, red, blue); }
The cubic-bezier() function
-
Define the cubic bezier curve.
-
This cubic bezier is defined by our 4 points: P0, P1, P2, P3.
-
P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.
-
The cubic-bezier() function can be used with the animation-timing-function property and the transition-timing-function property.
Example :
A transition effect with variable speed from start to end:div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); }
The max() function in SASS
-
Use the largest value, from a comma-separated list of values, as the property value.
Example :#div1 { background-color: yellow; height: 100px; width: max(50%, 300px); }
The min() function in SASS
-
Use the smallest value, from a comma-separated list of values
Example :#div1 { background-color: yellow; height: 100px; width: min(50%, 300px); }
The minmax() function in SASS
-
Defines a size range greater than or equal to min and less than or equal to max.
Example :#container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; }