让文字立起来之阴影效果

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量261 收藏 2
点赞数 4
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57334661/article/details/137967719
版权
本文通过HTML和CSS代码展示了如何将阴影作为一种元素来设计网页布局，通过CSS属性如`content`,`position`,`transform`,和`filter`实现文字阴影效果，并提供了详细的代码示例和效果图。
摘要由CSDN通过智能技术生成

1.转换思路：把阴影当作元素来实现

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字阴影</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #ccc;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    h1 {
      font-size: 120px;
      font-weight: 700;
    }
    h1::before {
      content: 'SHADOW';
      position: absolute;
      color: #000;
      transform: translate(-50px,20px) scaleY(0.5) skew(50deg);
      z-index: -1;
      /* 添加模糊效果 */
      filter: blur(5px);
      /* 遮罩层  使其远模糊，近清晰 */
      -webkit-mask: linear-gradient(transparent,#000);
    }

  </style>
</head>
<body>
  <h1>SHADOW</h1>
</body>
</html>

效果图如下：

小徐不会写代码
关注
CSS文字效果
bear_huangzhen的专栏
09-16 1064
这里是一些文字效果总结。 示例1（竖版从右至左的古文顺序）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖版文言文</title> <style type="text/css"> #content{ ...
H5 文字阴影效果和盒子阴影效果
qq_26323767的博客
07-28 2485
文字阴影效果 使用text-shadow: 1px 2px 3px red; 1px代表水平方向移动的数值可以为负数 2px代表垂直方向移动的数值可以为负数 3px代表模糊度 red代表阴影颜色 如果有多个阴影可以用逗号分隔开 css: p{ font-size:50px; text-align:center; /*color:red;*/ /*前两个数值为水平方向和垂直方...
WEB每日一练——CSS让你的文字立起来
Bannerparter的博客
11-06 368
如何让这个标题的文字呈现立起来的效果呢？顺便说一句：css真的强大！到这里整体效果已经完成了。
overflow文字隐藏出现竖线阴影
菜鸟Gaga的博客
03-16 245
overflow隐藏
前端如何让页面上的文字“立”起来
WLK654321的博客
10-07 480
前端如何让页面上的文字“立”起来。最近看到了一个很有意思的 CSS 效果，如下图，是一个文字立起来 + 阴影的效果，觉得比较有意思，所以分享给大家~接下来我们要把这个阴影给倾斜下去，达到阴影的真正效果，主要用到的 CSS 效果有： z-index：层级降低到主体下面 transform translate：调整阴影的水平垂直偏移 transform scaleY：调整阴影垂直的缩小 transform skew：调整阴影的倾斜角度 filter：阴影的模糊效果 -webkit-mask
TextView描边、渐变、阴影效果
热门推荐
zhaojun的博客
11-13 2万+
前段时间的需求，涉及到大量带各种效果的字体的使用，比如描边、渐变、阴影等。一般情况下，我们在Android开发中用到花里胡哨字体的情况不多。但是，拿到了这样的需求，我们还是要实现这样一款支持多种效果的字体。其实，网上也有一些实现各种效果字体的方法。这篇博客，将把描边，渐变，阴影等结合到一起，实现一款自定义的文本框。 一.撸代码前的思考 在开始动手之前，我们先明确...
前端-变形例子1-文字立起来
m0_75163045的博客
08-28 141
1.设置body的高，弹性盒子布局（文字横着分布），居中分布在排列方向上以及居中对齐。设置文字的阴影，让文字有一种在阳光下立起来的感觉。3.设置阴影的颜色，位置。移动位置以达到理想状态。2.设置文字的大小，粗细，颜色，相对位置。
文字阴影样式
weixin_30561177的博客
01-17 89
<style> h2{ line-height: 2; font:35px '华文新魏','微软雅黑' ; position: relative; } h2 span{ position: absolute; ...
qt widget显示文字效果
GeiGe123的博客
04-15 3542
先展示一下 效果 以下是源码 // client TestLabel* pTestLabel; /* 显示一段文字 */ pTestLabel = new TestLabel(this); pTestLabel->setText(tr("显示文字")); pTestLabel->setGeometry(10, 10, 120, 120); /* 显示一段文字，左对齐 */ pTestLabel = new TestLabel(this);
简洁蓝绿配色阴影效果的商务PPT模板
07-14
这是一套简洁蓝绿配色阴影效果的商务PPT模板，共31张； PPT模板使用了蓝绿配色制作。首页左侧填写PPT标题文字，右侧使用蓝绿竖条PPT背景图片。界面非常简洁。 PowerPoint模板内容页，由29张蓝绿阴影效果的PPT图表...
Qt Quick里的图形效果：阴影（Drop Shadow）
安晓辉生涯——聚焦程序员的职业规划与成长
04-01 1万+
这次来看看 Qt Quick里的 DropShow（阴影） 和 InnerShadow（内阴影） 怎么使用……
CSS3立体文字最佳实践
whqet
05-06 2万+
昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果，其中3d文字效果最为流行，限于篇幅仅仅展示了其3D实现原理，没有考虑代码的复用性和可移植性，立体字的纵深感、方向感、错落感如何实现个性定制，立体字阴影动画，彩虹字动画等等，一一道来。
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 296
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1135
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 132
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 226
遍历echarst多个图表，并添加独立的缩放函数
JavaScript的第十一天
全栈学习ing
10-31 735
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 240
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
echarts 实现3D饼状图 加 label标签显示
weixin_54372875的博客
10-31 528
最近有个页面需要渲染一个3D饼状图 带label标签显示 记录下实现代码效果主要是采用echarts-gl实现3D饼状图 再采用一个2D圆环 设置transparent 实现覆盖表面 显示label的效果 同理 也可以添加上引导线 麻木的coding中。
让h1 标题的文字有阴影效果
03-08
可以通过CSS样式来实现h1标题文字的阴影效果，具体代码如下： h1 { text-shadow: 2px 2px 4px #000000; } 其中，text-shadow属性用于设置文字阴影效果，2px和2px分别表示阴影的水平和垂直偏移量，4px表示阴影的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值