css文字效果

一、凸版印刷效果

出现在底部的浅色投影（或者出现在顶部的暗色投影）会让人产生物体是凹进平面内的错觉。同理，出现在底部的暗色投影(或者出现在顶部的浅色投影）会让人产生物体从平面上凸起的错觉。这种方法之所以奏效，是因为我们在现实世界中早已习惯了光源总是悬在头顶。在这样的环境里，凸起物的下方会产生阴影，而凹陷的底部边缘则会被打亮。

<style>div {width: 100px;font-size: 12px;padding: 5px;box-sizing: border-box;}.box {background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);}.box1 {background: hsl(210, 13%, 40%);color: hsl(210, 13%, 75%);text-shadow: 0 1px 1px black;}
</style>
<main><!-- 浅色背景 --><div class="box">the only way to get rid of a temptation is to yield to it</div><!-- 深色背景 --><!-- 深色背景的情况下给文字顶部加深色投影是最佳方案 --><div class="box1">the only way to get rid of a temptation is to yield to it</div></main>

二、文字发光效果

<style>div {padding: 5px;}.box {background: #203;color: #ffc;text-shadow: 0 0 .1em, 0 0 .3em;}
</style>
<main><div class="box">css</div></main>

三、文字3D凸起效果

<style>div {padding: 5px;}.retro {color: white;width: 100px;height: 40px;font-size: 24px;background: hsl(0, 50%, 45%);text-shadow:1px 1px black, 2px 2px black,3px 3px black, 4px 4px black,5px 5px black, 6px 6px black,7px 7px black, 8px 8px black}
</style>
<main><div class="retro">Retro</div>
</main>

使用scss可以这样写

<style lang="scss">
@function text-retro($color: black, $depth: 8) {$shadows: (1px 1px $color,);@for $i from 2 through $depth {$shadows: append($shadows, ($i * 1px) ($i * 1px) $color, comma);}@return $shadows;
}.retro {color: white;width: 100px;height: 40px;background: hsl(0, 50%, 45%);text-shadow: text-retro();font-size: 24px;
}
</style>

css文字效果（凸版印刷，发光，3D）相关推荐

css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）
原文:css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等-) 记录几种常见的文字效果示例查看:http://pangyongsheng.github.io/cssFont/ 一. ...
漂亮的css文字效果
效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
那些炫酷的CSS文字效果之诗词《兔》
不知不觉已经迈入2023年,今年是兔年,想到兔子就会联想到玉兔,中秋,胡萝卜,兔子不吃窝边草,这就越扯越远了,今天的主题是用纯CSS来实现各种不错的文字效果,文字则摘录古诗词中有关<兔>相 ...
精通CSS+DIV网页样式与布局——CSS文字效果
一.文字样式 1.1字体 font-family:黑体; 1.2字体大小. font-size: 0.5px; 1.3字体颜色. color:#333333; 1.4文字粗细. font-weight ...
[css] 用css3实现伪3D的文字效果
[css] 用css3实现伪3D的文字效果 <!DOCTYPE html> <html lang="en"><head><meta cha ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
3D旋转木马--文字效果(源码)
html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
html中加艺术字体,CSS实现漂亮的大标题文字效果
CSS实现漂亮的大标题文字效果 10月 22, 2013 评论 (6) Sponsor 现在CSS3和HTML5已经开始流行,很多网页视觉效果是可以使用CSS来完成的,今天向大家展示一下如何用CSS来 ...

css文字效果（凸版印刷，发光，3D）

css文字效果

一、凸版印刷效果

二、文字发光效果

三、文字3D凸起效果

css文字效果（凸版印刷，发光，3D）相关推荐

最新文章

热门文章