在CSS中反映具有渐变效果的文本

时间:2015-09-18 12:06:08

标签: css css3 linear-gradients

我需要用CSS反射文本并为其添加渐变。我想要的Here is an example。但是我不希望淡出png图像的alpha透明度因为body有背景

enter image description here

https://jsfiddle.net/9318Ltkp/

.slogan {
  font-size: 30px;
  line-height: 121px;
  position: relative;
  float: right;
  margin-right: 115px;
  text-transform: uppercase;
  color: #f00;
}
.slogan::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -26px;
  left: 0;
  display: block;
  content: 'comming soon';
  transform: scaleY(-1);
  opacity: .5;
}
<div class="slogan">comming soon</div>

2 个答案:

答案 0 :(得分:4)

  

注意:我无论如何都无法找到能够跨浏览器工作的内容,而且我认为根本没有办法。如果您需要单独支持WebKit驱动的浏览器,那么您可以使用以下内容。

在此方法中,从透明到半透明黑色的渐变被指定为伪元素的背景(产生反射效果),然后剪切背景以使其仅在文本的边界内WebKit的-webkit-background-clip

不幸的是,其他浏览器存在没有等效属性。在其他浏览器中,我们可以为元素指定线性渐变背景,使文本颜色透明,但这与它有关。无法将背景剪辑为文本内部。它将适用于整个元素。

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
div {
  position: relative;
  display: inline-block;
  font-size: 24px;
}
div:after,
div:before {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
}
div:after {
  content: attr(data-content);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

跨浏览器解决方案:

这是我能找到的最佳跨浏览器解决方案,但它涉及通过在父级上放置overflow: hidden而不是优雅渐变来硬切割反射文本。

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
div {
  position: relative;
  display: inline-block;
  font-size: 24px;
  height: 1em;
  padding-bottom: .5em;
  overflow: hidden;
}
div:after {
  position: absolute;
  content: attr(data-content);
  width: 100%;
  height: 1em;
  top: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
  opacity: 0.3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

原始答案:

您可以通过在:before伪元素顶部覆盖渐变背景的:after伪元素来实现此目的。

只有当背景为纯色(任何纯色)时,此方法才会起作用。所有需要做的就是更改渐变中的颜色以匹配它。但是,当与图像或渐变背景一起使用时,这将不起作用。

div {
  position: relative;
  display: inline-block;
  font-size: 24px;
}
div:after,
div:before {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  transform: scaleY(-1);
  transform-origin: bottom;
}
div:after {
  content: attr(data-content);
}
div:before {
  content: '';
  background: linear-gradient(to bottom, rgba(0, 128, 0, 1) 30%, rgba(0, 128, 0, 0.7) 70%);
  z-index: 2;
}
body {
  background: rgb(0, 128, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-content='Reflected Text'>Reflected Text</div>

答案 1 :(得分:0)

对于渐变我已经设计了这个请在下面的代码中找到: - 对于反映我认为这也是一个简单的任务,svg旋转180度,渐变从上到下透明到白色。如果这会导致其他一些影响,那么请使用clip svg这对你有帮助。

<html>
<body>

<svg height="150" width="400">
  <defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          </linearGradient>
  </defs>

  <text fill="url('#grad2')" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>


</body>

</html>