【问题标题】:How to fill a text with color using CSS?如何使用 CSS 为文本填充颜色?
【发布时间】:2015-03-02 00:35:03
【问题描述】:

我正在使用这个wonderful font 来制作预测图标,当我尝试使用 CSS3 组合图标以动画它们时,我尝试使用云隐藏太阳,但我需要用颜色填充云,是否可以使用 CSS,或者我需要将其作为 SVG 或 Canvas 放置?

图片如下:

【问题讨论】:

  • 这是不可能的。云形状是开放的,没有背景。 SVG 可能是一种选择。
  • 没有 CSS 可以使用背景图像进行组合吗?为什么要投反对票?!
  • 我下载了字体。您是否知道它包含 SVG 版本的字体,并且有多个太阳和云组合的示例?
  • 有一个组合,但是这个有一个“半个太阳”,我想在云移动时为太阳设置动画
  • 在这种情况下,您必须自己制作图像或从字体中提取它们(如果其许可允许)。

标签: css fonts


【解决方案1】:

为什么不尝试自己制作图标,而不是使用图标?这是一个仅使用 css 的“云和太阳”示例的基本模型:

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.sun {
  height: 30px;
  width: 30px;
  background: yellow;
  border-radius: 50%;
  position: absolute;
  left: 55px;
  top: 10px;
  box-shadow: 0 0 2px 2px white, 0 0 4px 4px yellow;
}
<div class="wap">
  <div class="cloud"></div>
  <div class="sun"></div>
</div>

下雨了吗?

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.rain {
  height: 30px;
  width: 55px;
  transform:rotate(10deg);
  background: -moz-linear-gradient(left,  rgba(108,144,252,1) 0%, rgba(108,144,252,0) 1%, rgba(108,144,252,0) 9%, rgba(108,144,252,1) 10%, rgba(108,144,252,0) 11%, rgba(108,144,252,0) 19%, rgba(108,144,252,1) 20%, rgba(108,144,252,0) 21%, rgba(108,144,252,0) 29%, rgba(108,144,252,1) 30%, rgba(108,144,252,0) 31%, rgba(108,144,252,0) 39%, rgba(108,144,252,1) 40%, rgba(108,144,252,0) 41%, rgba(108,144,252,0) 49%, rgba(108,144,252,1) 50%, rgba(108,144,252,0) 51%, rgba(108,144,252,0) 59%, rgba(108,144,252,1) 60%, rgba(108,144,252,0) 61%, rgba(108,144,252,0) 69%, rgba(108,144,252,1) 70%, rgba(108,144,252,0) 71%, rgba(108,144,252,0) 79%, rgba(108,144,252,1) 80%, rgba(108,144,252,0) 81%, rgba(108,144,252,0) 89%, rgba(108,144,252,1) 90%, rgba(108,144,252,0) 91%, rgba(108,144,252,0) 99%, rgba(108,144,252,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(108,144,252,1)), color-stop(1%,rgba(108,144,252,0)), color-stop(9%,rgba(108,144,252,0)), color-stop(10%,rgba(108,144,252,1)), color-stop(11%,rgba(108,144,252,0)), color-stop(19%,rgba(108,144,252,0)), color-stop(20%,rgba(108,144,252,1)), color-stop(21%,rgba(108,144,252,0)), color-stop(29%,rgba(108,144,252,0)), color-stop(30%,rgba(108,144,252,1)), color-stop(31%,rgba(108,144,252,0)), color-stop(39%,rgba(108,144,252,0)), color-stop(40%,rgba(108,144,252,1)), color-stop(41%,rgba(108,144,252,0)), color-stop(49%,rgba(108,144,252,0)), color-stop(50%,rgba(108,144,252,1)), color-stop(51%,rgba(108,144,252,0)), color-stop(59%,rgba(108,144,252,0)), color-stop(60%,rgba(108,144,252,1)), color-stop(61%,rgba(108,144,252,0)), color-stop(69%,rgba(108,144,252,0)), color-stop(70%,rgba(108,144,252,1)), color-stop(71%,rgba(108,144,252,0)), color-stop(79%,rgba(108,144,252,0)), color-stop(80%,rgba(108,144,252,1)), color-stop(81%,rgba(108,144,252,0)), color-stop(89%,rgba(108,144,252,0)), color-stop(90%,rgba(108,144,252,1)), color-stop(91%,rgba(108,144,252,0)), color-stop(99%,rgba(108,144,252,0)), color-stop(100%,rgba(108,144,252,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c90fc', endColorstr='#6c90fc',GradientType=1 ); /* IE6-9 */

  position: absolute;
  left: 18px;
  top: 35px;
 }
<div class="wap">
  <div class="cloud"></div>
  <div class="rain"></div>
</div>

雷声?

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.thunder {
  height: 20px;
  width: 20px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;
  transform: rotate(55deg);
  position: absolute;
  left: 15px;
  top: 40px;
}
.thunder:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 5px;
  height: 20px;
  width: 30px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;
<div class="wap">
  <div class="cloud"></div>
  <div class="thunder"></div>
</div>

【讨论】:

  • @Abdelouahab:这只是一个快速的模型。但是仍然有很多可用的改进(这在掌握之中)。 - 您甚至可以轻松添加悬停和动画!
  • 你甚至可能对this cloud shape too感兴趣
  • 太棒了!打雷打雷,下雨打线,把戏!这就是 CSS3 的惊人力量 ;)
  • @Abdelouahab:更新了云,还添加了其他符号以显示自定义
【解决方案2】:

如果字体不包含实心云图,则无法在 CSS 中执行此操作。

使用 SVG 图像可以做到这一点。幸运的是,字体下载包含许多示例和字体的 SVG 版本,所以也许您可以从那里提取图像并根据需要进行修改。

实际上,由于您所需要的只是云和太阳之间的白色背景,因此您可能会使用一两个 CSS 基本圆形形状,而使用字体本身来制作更详细的云和太阳形状。

【讨论】:

    【解决方案3】:

    由于已经给出了答案,这仅用于最终使用 text-shadow 的好奇部分。

    运行下面的 sn-p 以了解它的内容或玩这个 codepen

    @font-face {
    	font-family: "iconvault";
    	src: url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot");
    	src: url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
    	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.woff") format("woff"),
    	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.ttf") format("truetype"),
    	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.svg#iconvault") format("svg");
    	font-weight: normal;
    	font-style: normal;
    }
    	
    	
    	
    
    [class^="icon-"],
    [class*=" icon-"] {
      font-family: 'iconvault';
      font-weight: normal;
      font-style: normal;
      text-decoration: inherit;
      -webkit-font-smoothing: antialiased;
      font-size: 86px;
    
    }
    
    
    
    
    
    body {
      background:lightblue;
      font-size:1.25em;
    }
    
    
    
    /* -----Cloud----- */
    .icon-cloud{
    position:relative;
    }
    	.icon-cloud::after {
    	content: "\f106";
    	color:rgb(204, 204, 204);
    	position: absolute;
        text-shadow:0 0 2px #aaa;
    
    	}
    .icon-cloud::before {
    	content: "\f106";
    	color:rgb(204, 204, 204);
    	position: absolute;
    font-size:0.55em;
    top:.45em;
    left:.45em;
    text-shadow:2px 0 , -2px 0, 2px 2px, -2px -2px, 0 2px , 0-2px,
    4px 0 , -4px 0, 4px 4px, -4px -4px, 0 4px , 0-4px,
    6px 0 , -6px 0, 6px 6px, -6px -6px, 0 6px , 0-6px,
    8px 0 , -8px 0, 8px 7px, -8px -8px, 0 7px , 0 -8px,
    11px 0 , -11px 0px, -12px 5px, -14px 0px, -10px 3px , -9px 3px,
     0 -6px , 0 -10px , 0 -11px, 2px -11px, 4px -11px;
    font-weight:bold
    
    	}
    .inherit.icon-cloud::before {
      color:inherit;
    }
    .yellow.icon-cloud::before {
      color:yellow;
    }
    .purple.icon-cloud::before {
      color:purple;
    }
    .red.icon-cloud::before {
      color:red;
    }
    .white.icon-cloud::before {
      color:white;
    }
    .transparent.icon-cloud::before {
      color:transparent;
    }.cotton.icon-cloud::before {
      text-shadow:5px 5px 10px gray,-5px -5px 10px gray,-5px -5px 20px gray,-5px -5px  20px gray;
    }
    div {
      display:inline-block;
    }
    li {
      list-style-type:none;
    }
    <div class='two columns'>
      <ul>
        <li class="icon-cloud"></li>
        <p>Cloudy</p>
      </ul>
    </div>
    <div class='two columns'>
      <ul>
        <li class="icon-cloud cotton transparent"></li>
        <p>Cloudy</p>
      </ul>
    </div>
    <div class='two columns'>
      <ul>
        <li class="icon-cloud red"></li>
        <p>Cloudy</p>
      </ul>
    </div>
    <div class='two columns'>
      <ul>
        <li class="icon-cloud purple"></li>
        <p>Cloudy</p>
      </ul>
    </div>
    <div class='two columns'>
      <ul>
        <li class="icon-cloud yellow"></li>
        <p>Cloudy</p>
      </ul>
    </div>
    <div class='two columns'>
      <ul>
        <li class="icon-cloud inherit"></li>
        <p>Cloudy</p>
      </ul>
    </div>
    <div class='two columns'>
      <ul>
        <li class="icon-cloud white"></li>
        <p>Cloudy</p>
      </ul>
    </div>
    
    <div class='two columns'>
      <ul>
        <li class="icon-cloud transparent"></li>
        <p>Cloudy</p>
      </ul>
    </div>

    【讨论】:

    • 绝妙的把戏!所以这个想法是制作阴影并使它们变厚!谢谢你^_^
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-01
    • 1970-01-01
    • 2018-11-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多