天邊一朵雲-書畫雙絕

時間  2019-11-12
標籤 天邊 一朵 書畫 简体版
原文   原文鏈接

上一篇文章，我擼出了一片雲。做爲一個程序員，弄出一片以假亂真的雲雖然頗有成就感，可是怎麼證實這朵雲是寫出來的而不是拍照的卻頗有些困難。並且這種技能樹好像點的有些歪，畢竟從天上拍一張也不難，爲啥要手工寫呢？我做爲一個有遠見（推眼鏡）的程序員，天然不是爲了一朵無規則的雲而大費周章，此次，我要讓雲作到書畫（seyi）雙絕，請稱呼我爲雲工程師。css

一、老方法作雲

按照上次作雲的方法，咱們先把div搞出來html

<div class="cloud" id="cloud-back">天邊一片雲</div>

再把兩個css弄出來git

.cloud {
	font-size:150px;
	font-style:oblique;
	font-weight: 900;
  position: absolute;
  top: -42vh;
  left: -31vw;
}

 

#cloud-back {
  filter: url(#filter-back);
  text-shadow:420px 240px 10px #fff; 
}

 

和上一章的box-shadow不一樣，文字須要用到的是text-shadow，但參數相似程序員

再用svg把雲的樣子弄出來github

<svg width="0" height="0"> 
  <!--Top Layer-->
    <filter id="filter-back">
      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" 
seed="0" />     
      <feDisplacementMap  in="SourceGraphic" scale="40" />
    </filter>
</svg>

這樣單層的雲就出來了。svg

但這種雲沒有層次感，因此方法也是同樣，用三層從白到黑的來覆蓋，形成明暗的光影效果。url

<div class="cloud" id="cloud-back">天邊一片雲</div>
<div class="cloud" id="cloud-mid">天邊一片雲</div>
<div class="cloud" id="cloud-front">天邊一片雲</div>

 

.cloud {
	font-size:150px;
	font-style:oblique;
	font-weight: 900;
  position: absolute;
  top: -42vh;
  left: -31vw;
}

#cloud-back {
  filter: url(#filter-back);
  text-shadow:420px 240px 10px #fff; 
}

#cloud-mid {
  filter: url(#filter-mid);
  text-shadow:410px 250px 12px rgba(158, 168, 179, 0.3);
 }

#cloud-front {
  filter: url(#filter-front);
  text-shadow:410px 250px 14px rgba(0, 0, 0, 0.2);
}

其中主要調整text-shadow的color屬性調整文字陰影的顏色（color），作到雲的層次感，而後再調整svgspa

<svg width="0" height="0"> 
  <!--Top Layer-->
    <filter id="filter-back">
      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" 
seed="0" />     
      <feDisplacementMap  in="SourceGraphic" scale="40" />
    </filter>
    <filter id="filter-mid">
        <feTurbulence type="fractalNoise"  baseFrequency="0.012" numOctaves="2" 
seed="0"/>
      <feDisplacementMap  in="SourceGraphic" scale="45" />
    </filter>
    <filter id="filter-front">
        <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" 
seed="0"/>
      <feDisplacementMap  in="SourceGraphic" scale="50" />
    </filter>
</svg>

調整svg的參數和上一章同樣，主要是SourceGraphic的值，文字是有固定形狀的，因此這個值不能太大，不然形狀腐蝕的太厲害，那就看不清楚字了，三層疊加，就成了這個樣子。3d

這樣看起來就比較真實了。code

二、我要來張圖

剛纔那種方法其實和上一章畫雲的方法沒啥區別，只是把box-shadow換成了text-shadow而已，我以爲字都作了，不妨來個雲圖試試。

《雲圖》是由華納兄弟影片公司製做的劇情片，由沃卓斯基姐弟（他們不是兄弟嗎？）與湯姆·提克威聯合執導，是一部到如今都算譭譽參半的科幻電影，我當年是衝着《黑客帝國》導演沃卓斯基兄弟（但爲何她們如今是姐妹，好萊塢真亂）看的，看完後徹底一副不明覺厲的感受，反正就是沒看懂，因此咱們開始畫雲圖（本句上下文沒有任何關聯，只是都叫雲圖）。

我仍然打算按照老套路來，搞個圖片先，我用的是透明底的剪影圖片，這種樣子的

 

固然，我原圖用的是白顏色的，只是爲了讓你們看到，用了photoshop的截圖，上了黑顏色。html的代碼仍然用box-shadow，一切輕車熟路。

<img src="girl1.png" class="cloud" id="cloud-blur-back" />

 

.cloud {
  position: absolute;
}

#cloud-blur-back {
	box-shadow:5px 2px 6px #000
}

還沒等我用上svg，就發現效果是這樣子的。

陰影是針對圖片這個方框的，和我想象的有很大出路啊。看來此路不通。難道我只能放棄？

----------------------------一個漫長搜索谷歌的分割線--------------------

終於讓我找了一個更好的辦法，那就是直接用svg，拋棄掉目前全部的shadow樣式。仍然是圖片。

<img src="girl1.png" class="cloud" id="cloud-blur-back" />

 

#cloud-blur-back {
  filter: url(#filter-blur-back);
}

我使用svg的feGaussianBlur filter

<svg width="0" height="0"> 
    <filter id="filter-blur-back">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
    </filter>
</svg>

feGaussianBlur其實和咱們以前用的feTurbulence和feDisplacementMap師出同門，都是svg的filter，看名字中有blur，就知道是作模糊化的。並且參數也很簡單，就是in和stdDeviation。

  • in這個參數咱們目前只用到SourceGraphic就能夠了，具體的內容，請自行查看這裏
  • stdDeviation這個參數就更簡單了，就是模糊化，數字越大越模糊。

咱們看下效果如何：

效果不錯哦。並且不像以前用shadow的方法，還要把原體移除窗口外，只顯示陰影，這個方便多了。我繼續輕車熟路的把feTurbulence加上，想看下雲化的效果。

<svg width="0" height="0"> 
    <filter id="filter-blur-back">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="5" seed="0"/>     
      <feDisplacementMap  in="SourceGraphic" scale="30" />
    </filter>
</svg>

毫無效果，場面一度很尷尬

結果只有feGaussianBlur 的模糊化效果，feTurbulence的效果一點都沒有，看來前路有坑啊。

--------------------------一個漫長的各類嘗試的分割線--------------------

終於，我找到了解決辦法，把feGaussianBlur 和feTurbulence分拆成兩個filter，代碼是這樣的。

<svg width="0" height="0"> 
    <filter id="filter-blur-back">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
    </filter>
    <filter id="filter-div-back">
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="5" seed="0"/>     
      <feDisplacementMap  in="SourceGraphic" scale="30" />
    </filter>
</svg>

filter-blur-back和filter-div-back的順序不一樣，效果也會有不一樣：

#cloud-blur-back {
	filter: url(#filter-blur-back) url(#filter-div-back);
}

 

filter-blur-back在前，filter-div-back在後

#cloud-blur-back {
	filter: url(#filter-div-back) url(#filter-blur-back) ;
}

filter-blur-back在後，filter-div-back在前

上面那種看起來更象雲一些，咱們就用這種啦。我繼續個人雲圖創做，把三層效果加上，完整的代碼是這樣的

<html>
<head>
<style type="text/css">
	body {
  width: 100vw;
  height: 100vw;
  background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);
  padding: 1%;
}

.cloud {
  position: absolute;
}

#cloud-blur-back {
  filter: url(#filter-blur-back) url(#filter-div-back);
}

#cloud-blur-mid {
	transform:scale(0.95);
  filter: brightness(90%) url(#filter-blur-mid) url(#filter-div-back);
  left: 1vw;
  top: 1vw;
}

#cloud-blur-front {
	transform:scale(0.9);
  filter: brightness(80%) url(#filter-blur-front) url(#filter-div-back);
left: 1vw;
  top: 1vw;
}

</style>
</head>
<body>
	<img src="girl1.png" class="cloud" id="cloud-blur-back" />

	<img src="girl1.png" class="cloud" id="cloud-blur-mid" />

	<img src="girl1.png" class="cloud" id="cloud-blur-front" />


<svg width="0" height="0"> 
    <filter id="filter-blur-back">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
    <filter id="filter-div-back">
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="5" seed="0"/>     
      <feDisplacementMap  in="SourceGraphic" scale="30" />
    </filter>
    
    <filter id="filter-blur-mid">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
    </filter>
    <filter id="filter-div-mid">
      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="3" seed="0" />     
      <feDisplacementMap  in="SourceGraphic" scale="25" />
    </filter>
    
    <filter id="filter-blur-front">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <filter id="filter-div-front">
      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="0" />     
      <feDisplacementMap  in="SourceGraphic" scale="20" />
    </filter>
</svg>
</body>
</html>

最後看到的效果以下：

爲了調節層次感，我加上了縮放的調節，transform:scale()。

爲了調節三層的明暗，我加上了filter: brightness()來調節圖片使其變暗。

請你們欣賞下我搞的幾張圖（就這破玩意我能換圖玩一下午）。

這些圖片須要白色透明底的png圖片，我都是從阿里巴巴的矢量圖標庫找的，裏面有不少這種圖，你們能夠本身試試，也能夠去調調參數，會有不一樣的效果。

源代碼地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程