纯 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 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS-用伪类制作小箭头(轮播图的左右切换btn)

4138
来自专栏编程微刊

前端css常用的选择小汇

1142
来自专栏非著名程序员

Android 自定义 view 动画按钮

昨天偶偶然看见UI 给的一个交互的效果,原图如下 ? 就是下面的loginbutton,于是大概模仿了一下, 并没有做这个UI的全部效果,有兴趣的可以完善后面...

2178
来自专栏前端知识分享

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签。搬了房子,收拾了一下东西,太累了,所以没有学很多。明天还上班,今天就先到这。

901
来自专栏Coco的专栏

【前端性能】必须要掌握的原生JS实现JQuery

1513
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

1046
来自专栏前端萌媛的成长之路

CSS常见布局

1652
来自专栏地方网络工作室的专栏

CSS3 做一个有闪光效果的进度条

CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

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

学习纲要:CSS 基础概念

571
来自专栏编程坑太多

如何开发适配安卓和iOS双平台的React Native应用

1192

扫码关注云+社区