css文本长阴影渐变混合样式

寻梦xunm| 761| 收集

3年前

超过1253天温馨提示

本文最后更新于2021年06月17日，已超过1253天没有更新，若内容或图片失效，请留言反馈。

css文本长阴影渐变混合样式

html代码

<h1 class="text-longshadow">
    Text with<br> 
    a long shadow.<br> 
    How hip!
</h1>

css样式

@import url(https://fonts.googleapis.com/css?family=Lato:700,900);
/**
 * A Long-shadow mixin, guaranteed to make your Dribbble shots 11% cooler
 * @param  string  $color_a  The darkest colour (closest the object)
 * @param  string  $color_b  The lightest colour (often the background colour)
 * @param  int     $stepnum  Number of steps
 * @param  int     $opacity  The opacity of the blend
 * @return list                Returns a list ready to drop into 'box-shadow' or text-shadow
 */
body {
  background: #e74c3c;
}

.text-longshadow {
  color: #fff;padding-top: 10%;
  font-size: 8rem;
  line-height: 8rem;
  font-family: lato;
  font-weight: 900;
  text-align: center;
  text-shadow:  1px 1px rgba(123, 25, 15, 0.5) , 2px 2px rgba(129, 28, 18, 0.51) , 3px 3px rgba(135, 31, 20, 0.52) , 4px 4px rgba(140, 33, 22, 0.53) , 5px 5px rgba(145, 36, 24, 0.54) , 6px 6px rgba(150, 38, 26, 0.55) , 7px 7px rgba(154, 40, 28, 0.56) , 8px 8px rgba(158, 42, 30, 0.57) , 9px 9px rgba(162, 44, 31, 0.58) , 10px 10px rgba(166, 45, 33, 0.59) , 11px 11px rgba(169, 47, 34, 0.6) , 12px 12px rgba(173, 48, 36, 0.61) , 13px 13px rgba(176, 50, 37, 0.62) , 14px 14px rgba(178, 51, 38, 0.63) , 15px 15px rgba(181, 52, 39, 0.64) , 16px 16px rgba(184, 54, 40, 0.65) , 17px 17px rgba(186, 55, 41, 0.66) , 18px 18px rgba(189, 56, 42, 0.67) , 19px 19px rgba(191, 57, 43, 0.68) , 20px 20px rgba(193, 58, 44, 0.69) , 21px 21px rgba(195, 59, 45, 0.7) , 22px 22px rgba(197, 60, 46, 0.71) , 23px 23px rgba(199, 61, 47, 0.72) , 24px 24px rgba(201, 62, 47, 0.73) , 25px 25px rgba(202, 62, 48, 0.74) , 26px 26px rgba(204, 63, 49, 0.75) , 27px 27px rgba(206, 64, 49, 0.76) , 28px 28px rgba(207, 65, 50, 0.77) , 29px 29px rgba(209, 65, 51, 0.78) , 30px 30px rgba(210, 66, 51, 0.79) , 31px 31px rgba(211, 67, 52, 0.8) , 32px 32px rgba(213, 67, 52, 0.81) , 33px 33px rgba(214, 68, 53, 0.82) , 34px 34px rgba(215, 69, 53, 0.83) , 35px 35px rgba(216, 69, 54, 0.84) , 36px 36px rgba(218, 70, 54, 0.85) , 37px 37px rgba(219, 70, 55, 0.86) , 38px 38px rgba(220, 71, 55, 0.87) , 39px 39px rgba(221, 71, 56, 0.88) , 40px 40px rgba(222, 72, 56, 0.89) , 41px 41px rgba(223, 72, 57, 0.9) , 42px 42px rgba(224, 73, 57, 0.91) , 43px 43px rgba(225, 73, 57, 0.92) , 44px 44px rgba(225, 73, 58, 0.93) , 45px 45px rgba(226, 74, 58, 0.94) , 46px 46px rgba(227, 74, 58, 0.95) , 47px 47px rgba(228, 75, 59, 0.96) , 48px 48px rgba(229, 75, 59, 0.97) , 49px 49px rgba(230, 75, 59, 0.98) , 50px 50px rgba(230, 76, 60, 0.99);
}

css 渐变样式阴影

0 赞 or 打赏

喜欢就打赏一点