CSS3 & gradient & color & background

CSS3 & gradient & color & background

css background

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

Gradient Background

1. Linear Gradients (goes down/up/left/right/diagonally)
2. Radial Gradients (defined by their center)

Linear Gradients

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Diagonal 对角线

background-image: linear-gradient(angle, color-stop1, color-stop2);

rainbow

.rainbow {
  height: 55px;
  background-color: red;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  /* Standard syntax (must be last) */
}

Radial Gradients

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

size keywords

• closest-side
• farthest-side
• closest-corner
• farthest-corner

https://www.w3schools.com/css/css3_gradients.asp

---

css gradient generator

https://mycolor.space/gradient

https://cssgradient.io/

---

gradient text & gradient background

-webkit-text-fill-color & -webkit-gradient

https://wesbos.com/sanitize-html-es6-template-strings/

.post .entry-title {
    font-size: 50px;
    font-weight: 500;
    margin: 20px 0;
    border-top: 2px solid #ecd018;
    border-bottom: 2px solid #ecd018;
    line-height: 1.4;
    padding: 20px 0;
    background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

demo

https://www.cnblogs.com/xgqfrms/p/10898414.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---