纯 CSS 实现漂亮的大标题效果

简单的代码,通过特定的组合,往往能带给人意想不到的效果~

复古风格

实现代码:

  1. .vintage {  
  2.     background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;  
  3.     text-shadow: 5px -5px black, 4px -4px white;  
  4.     font-weight: bold;  
  5.     -webkit-text-fill-color: transparent;  
  6.     -webkit-background-clip: text;  
  7. }  

空心文字

实现代码:

  1. .stroke{  
  2.     color: transparent;  
  3.     -webkit-text-stroke: 1px black;  
  4.     letter-spacing: 0.04em;  
  5. }  

内阴影文字

实现代码:

  1. .press {  
  2.     color: transparent;  
  3.     background-color: black;  
  4.     text-shadow: rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;  
  5.     -webkit-background-clip: text;  
  6. }  

3D效果文字

实现代码:

  1. .threed{  
  2.     color: #fafafa;  
  3.     letter-spacing: 0;  
  4.     text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;  
  5. }  

本文作者为Agusti BR,转载请注明。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ACM小冰成长之路

51Nod-2020-排序相减

ACM模版 描述 ? 题解 还是那句话,这种题不该出现在 51Nod51Nod 题库,就算出现也不该是基础题,应该是 11 级题,和基础题的定位不符。 代码 #...

17910
来自专栏九彩拼盘的叨叨叨

学习前端 第1周第2天

682
来自专栏我和未来有约会

Silverlight制作scrollbar.

最近要用silverlight开发一个小程序.做了一个scrollbar.其实sl自己带了这个控件,但是如果要样式和自己的程序的风格完全一致的话也是有些难度的....

1727
来自专栏偏前端工程师的驿站

JS魔法堂:获取当前脚本文件的绝对路径

一、前言                           当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这...

1766
来自专栏ytkah

帝国cms搜索关键字调用标签(showsearch)怎么用

  前面ytkah介绍了如何让帝国CMS7.2搜索模板支持动态标签调用,现在我们来说说怎么调用帝国cms搜索关键字调用标签(showsearch)。在帝国cms...

2944
来自专栏十月梦想

Vue动画之使用volecity.js动画库

在vue中使用动画都要放在transition组件中,以后不再累述!我们还看上个例子!

1315
来自专栏林德熙的博客

win10 uwp 右击浮出窗在点击位置

如果需要让 Flyout 显示在指定的位置,那么请看本文。 本文主要让 MenuFlyout 出现在我们右击位置。

691
来自专栏雪胖纸的玩蛇日常

django 前端 js让一段文本中包含的网址可以被访问

1494
来自专栏Java Edge

参数检验与异常拦截器JSR303参数检验实例:校验手机号和密码字段自定义注解为了让客户端显示更加友好,需要自定义异常拦截器

56514
来自专栏软件工程师成长笔记

IE、FireFox、Chrome浏览器中关于URL传参中文乱码,解决兼容性问题!

前台用url传值中文,后台用request.getParameter接收参数。在Firefox,Chrome等浏览器中没有问题。但用IE浏览器就又会出现参数中文...

1022

扫码关注云+社区