純css3藝術文字樣式效果代碼_ZenDei技術網路在線

純css3藝術文字樣式效果代碼

-Advertisement-

效果：http://hovertree.com/texiao/css3/1/本效果主要使用text-shadow實現.參考：http://hovertree.com/h/bjaf/css3_text_effect.htm代碼如下：超炫CSS3文字特效集錦DEMO演示 - 何問起OutlinedAOu...

效果：http://hovertree.com/texiao/css3/1/

本效果主要使用text-shadow實現.
參考：http://hovertree.com/h/bjaf/css3_text_effect.htm

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超炫CSS3文字特效集錦DEMO演示 - 何問起</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/1/css/style.css" media="screen" type="text/css" />
</head>
<body>
<!--For Firefox-->
<style>a{color:blue}
.test:after {
filter: url(#light-top);
}

.dilate:before {
filter: url(#dilate10);
}

.dilate:after {
filter: url(#dilate6);
}

.erode:after {
filter: url(#erode2);
}

.distant1:after {
filter: url(#distant1);
}

.distant-top:after {
filter: url(#distant-top);
}

.distant-front:after {
filter: url(#distant-front);
}

.diff1 {
filter: url(#diff1);
}

.bevel, .bevel:after {
filter: url(#light2);
}
</style>
<h1 class='outlinedA'>OutlinedA</h1>
<h1 class='outlinedA mid'>OutlinedA</h1>
<div>
<a href="http://hovertree.com/h/bjaf/yishuzi.htm">原文</a> <a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上彈出菜單</a>
</div>
<h1 class='outlinedB'>OutlinedB</h1>
<h1 class='hsl'>Hsl Colors</h1>
<h1 class='test'>Test</h1>
<h1 class='bottom'>Bottom Light</h1>
<h1 class='dilate'>Dilate</h1>
<h1 class='erode'>Erode</h1>
<h1 class='distant1'>Distant Light</h1>
<h1 class='distant-top'>Distant Top</h1>
<h1 class='distant-front'>Distant Front</h1>
<h1 class='diff1'>Diffused Light</h1>
<h1 class='bevel'>Bevel</h1>
<h1 style="font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink">何問起</h1>
<h1 style="font-family:cursive;text-shadow:6px 2px 2px #666666;">hovertree.com</h1>
</body>
</html>

參考：

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Meta標簽中的viewport屬性及含義

最近在學習移動網頁開發，首先看到head裡面設置了下麵這個屬性：通過搜集資料，大體瞭解了viewport屬性的含義。一、什麼是Viewport手機瀏覽器是把頁面放在一個虛擬的“視窗”（viewport）中，通常這個虛擬的“視窗”（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的視窗中，也不...
聖杯佈局小結

聖杯佈局，很久之前就聽過，但是從來都沒深入瞭解過，最近因為做了一個項目，借鑒了薪人薪事這個公司的產品頁面，才第一次用到這種佈局方式。於是就花了點時間，測了下它所有分欄佈局的代碼，每段代碼都非常簡單，但佈局效果很完美，比我以前用的方式好用不少。本文是對它實現方式的一些總結，希望可以把這種技術推薦給跟我...
youku的js腳本的工具函數和初始化方法

定義日誌輸出函數(function(){ if(window['console']){ return; } window['console'] = { log: function(){} ,clear: function(){} ,debug: function(){} ,error: ...
CSS 佈局實例系列（三）如何實現一個左右寬度固定，中間自適應的三列佈局——也聊聊雙飛翼

今天聊聊一個經典的佈局實例：實現一個三列佈局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽器寬度的變化而自適應變化可能很多朋友已經笑了，這玩意兒通過雙飛翼佈局就能輕鬆實現。不過，還請容我在雙飛翼之外，循序漸進地介紹一下我們可以如何實現一個三列佈局。1. 首先，使用浮動佈局來實現一下See ...
jQuery 取選中的radio的值方法

var val=$('input:radio[name="sex"]:checked').val();附三種方法都可以：$('input:radio:checked').val()； $("input[type='radio']:checked").val();$("input[name='rd.....
鍵盤代碼對應的數字

適合EXT keycode的查詢A 65B 66C 67D 68E 69F 70G 71H 72I 73J 74K 75L 76M 77N 78O 79P 80Q 81R 82S 83T 84U 85V 86W 87X 88Y 89Z 900 4...
談談網頁的字體的設置

設置全站的字體一直是一個簡單而又不簡單的事，因為深入下去，這裡面牽扯到太多的東西。本文主要是想說說對於一個普通的網站，如何根據自己的需求選擇字體。1、必備知識首先，我們應該明確，並不是你設置了這種字體，用戶電腦便會以這種字體顯示。如果用戶電腦沒有安裝這種字體，那麼它便會以你設置的第二種字體來渲染。看...
關於HTML語義化的一些理解

語義化這個詞我想大家都看到了無數次，特別是在一些招聘廣告上。其實我自己也是，不過每次看到都覺得是那些招聘公司複製的，其實他們根本說不清語義化是什麼，而且也根本不看重。所以我一直也沒把這東西當回事過。然而最近當我再次看到這個詞時，我想我應該好好思考下這問題了。就寫篇博客記錄下。一、什麼是語義化?在解釋...