立體字風格

今天在Fb上看到justfont發了一篇文，就是他們官網上的字可以做立體的風格，我看到這個立體字，突然想到和之前long-shadow有一點點像，所以我決定來試試看sass版本的立體字。

先用上次的long-shadow套看看

很明顯，不是這樣。

如果仔細看，其實立體字的背景不是透明的，他是白色到淺灰色，所以要先把套明改掉。

立體字風格

.class
	$all: ()
	$lenght: 20
	$rgb: #000
	@for $i from 1 through $lenght
		$all: append($all, append(#{$i}px #{$i}px 0 ,rgba($rgb,0.9/$i + 0.05)),comma)
	text-shadow: $all

調整成不透明版本

恩~，有立體一點點了，但是還少了陰影。

立體字風格

.class
	$all: ()
	$lenght: 20
	$rgb: #fff
	@for $i from 1 through $lenght
		$all: append($all, append(#{$i}px #{$i}px 0 ,darken($rgb,$i/1.6)),comma)
	text-shadow: $all

完成

立體字風格

恩...，由於windows預設是明體...，有興趣還是可以自行拿去套信黑體。當然還是要送給大家@mixin。

@mixin text-cubicStyle($lenght: 15,$rgb: #dfdfdf)
	$all: ()
	@for $i from 1 through $lenght
		$all: append($all, append(#{$i}px #{$i}px 0 ,darken($rgb,$i/1.6)),comma)
	text-shadow: $all,$lenght+1px $lenght+1px 1px rgba(0,0,0,.3),$lenght+2px $lenght+2px 10px rgba(0,0,0,.6)

撰寫一篇文章需要花上非常多的時間，如果你關閉 Adblock (廣告阻擋器)，我會非常的開心 🤗。 (╭(°A°`)╮))

上一篇：CSS的小箭頭

下一篇： 網頁設計 技能樹!