Kayan aikin Gradient CSS na kan layi
CSS Gradient ƙaramin gidan yanar gizo ne mai farin ciki da kayan aiki kyauta wanda ke ba ku damar ƙirƙira tushen gradient don gidajen yanar gizo.
CSS gradients suna ba ku damar nuna sauye-sauye masu santsi tsakanin launuka biyu ko fiye da ƙayyadaddun launuka.
CSS ya bayyana nau'ikan gradients guda biyu:
- Linear Gradients (yana sauka / sama / hagu / dama / diagonal)
- Radial Gradients (wanda cibiyarsu ta bayyana)
CSS Linear Gradients
Don ƙirƙirar gradient mai layi dole ne ku ayyana aƙalla tasha launi biyu. Matsakaicin launi sune launukan da kuke son yin sauyi mai santsi tsakanin. Hakanan zaka iya saita wurin farawa da jagora (ko kusurwa) tare da tasirin gradient.
Daidaitawa
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
