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

相关文章

来自专栏儿童编程

正能量猫,到哪哪亮——Scratch发光猫实验

偶然想起一句话“请保持你心里的光,因为你不知道谁会借此走出黑暗。”心里小感动,决定用Scratch表达一下,于是有了本案例中走哪哪亮的正能量猫。 效果如下:

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

CSS常见布局

1452
来自专栏编程微刊

前端css常用的选择小汇

1112
来自专栏腾讯社交用户体验设计

实现下划线的N个姿势

1454
来自专栏GIS讲堂

Openlayers4中的全屏

Openlayers4中,ol.control.FullScreen()可实现地图的全屏展示,可是当地图的初始化宽度和高度都不是100%的时候,全屏的时候只会宽...

743
来自专栏前端说吧

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

3738
来自专栏前端知识分享

第9天:CSS精灵图

“CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背...

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

学习纲要:CSS 基础概念

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

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

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

2108
来自专栏姬小光

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

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

956

扫码关注云+社区