酷炫,用Html5/CSS实现文字阴影

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现。她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影.

一.文字阴影
text-shadow 文字阴影
参数:
参数1 : 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
参数2 :第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
参数3 :如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
参数4 : 设置对象的阴影的颜色

text-shadow: 10px 10px 50px #000; 


二.实例

上图的效果我们怎样来实现呢?
HTML结构
CSS样式
字体样式
字体颜色
文本阴影 那我们来看一下具体代码:
HTML:

<div class="text">【千锤百炼】尚学堂div>    CSS:
.text{font: bold 100px/1.5 '微软雅黑';color: dodgerblue;
/*文本阴影*/text-shadow: 10px 10px 50px #000;/*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/
}  

  

现在我们来看看前端小美女问我的效果该怎么做..

 

其实非常简单了,我们来直接上代码~
HTML:

<div class="text">【千锤百炼】尚学堂div>    CSS:
body {background: #000;color: #fff;
}
.text{font: bold 100px/1.5 georgia, sans-serif;
/*不同颜色的,多个不同值的模糊大小*/text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}  

  

发散你的思维,其实css3样式非常有趣,有时候往往是一点点改变,就可以实现很炫的效果^.^

下一篇文章,我们再讲述同样的技术手法实现文字边框阴影。请期待

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369517.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从xtrabackup备份恢复单表【转】

目前对MySQL比较流行的备份方式有两种&#xff0c;一种上是使用自带的mysqldump&#xff0c;另一种是xtrabackup&#xff0c;对于数据时大的环境&#xff0c;普遍使用了xtrabackupbinlog进行全量或者增量备份&#xff0c;那么如何快速的从xtrabackup备份中恢复单张表呢&#xf…

CSS中的overflow属性

overflow属性 如果元素中的内容超出了给定的宽度和高度属性&#xff0c;overflow 属性可以确定是否显示滚动条&#xff0c;是否隐藏溢出部分等行为&#xff0c;规定当内容溢出元素框时发生的事情。 可能的值有&#xff1a; visible&#xff1a;默认值。内容不会被修剪&#xff…

【知识梳理1】Android触摸事件机制

前言 随着科学技术的发展&#xff0c;智能手机早已成为我们当代人身边不可缺少的“伙伴”之中的一个&#xff0c;堪比对象女友。每天我们对着手机反复的做着点击、滑动操作&#xff0c;而手机则随着我们的操作给我们展示她的精彩。… 废话到此结束。 看到这里&#xff0c;即使…

自己做的一个登录页面,纯代码!

先上效果图吧. 本人菜鸟入门, 请勿喷. 首先样式: 1 1 body{2 2 margin: 0;3 3 padding: 0;4 4 width: 100%;5 5 height: 100%;6 6 }7 7 8 8 .headers{9 9 width: 100%;10 10 height: 100px;11 11 }12 12 .siv-ng{13 13 width:…

ASP.NET调用cmd命令提示符拒绝访问解决方案

using System.Diagnostics; public class CmdHelper{private static string CmdPath "C:\Windows\System32\cmd.exe";/// <summary>/// 执行cmd命令/// 多命令请使用批处理命令连接符&#xff1a;/// <![CDATA[/// &:同时执行两个命令/// |:将上一个命…

Some reading, some thinking.

update&#xff1a;感谢助教0 0又学会一招&#xff0c;play 了一下CSS Part 1 Reading AuthorArticleNoteMadcola《两年波折路&#xff08;考研、工作、考研&#xff09;》"吾志所向&#xff0c;一往无前&#xff1b;愈挫愈奋&#xff0c;再接再励。"辜新星《时刻调…

CSS选择器:伪类(图文详解)

本文最初发表于博客园&#xff0c;并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我&#xff0c;一起入门和进阶前端。 以下是正文。 伪类&#xff08;伪类选择器&#xff09; 伪类&#xff1a;同一个标签&#xff0c;根据其不同的种状态&#xff0c;有不同的样式。…

DIV固定宽度和动态拉伸混合水平排列

1.效果图 2.源代码 html <h2>1.头部固定&#xff0c;尾部拉伸</h2> <div class"container" id"div1"><div class"head"></div><div class"tail"></div> </div><h2>2.尾部固定…

使用CSS设置JavaFX饼图样式

渲染图表时&#xff0c; JavaFX默认提供某些颜色。 但是&#xff0c;在某些情况下&#xff0c;您想自定义这些颜色。 在此博客文章中&#xff0c;我将使用一个示例来更改JavaFX饼图的颜色&#xff0c;该示例打算在今天下午在RMOUG Training Days 2013的演示中包括。一些基于Jav…

java 错误: 找不到或无法加载主类

这个问题应该很常见的&#xff0c;笔者经常手工编译一些测试代码或者小工具&#xff0c;经常用到 javac和java来编译并运行一些简单的小工具。 以Hello World来测试。 HelloWorld.java public class HelloWorld{public static void main(String[]args){System.out.println(&quo…

在Visual Studio Code中配置GO开发环境

一、GO语言安装 详情查看&#xff1a;GO语言下载、安装、配置 二、GoLang插件介绍 对于Visual Studio Code开发工具&#xff0c;有一款优秀的GoLang插件&#xff0c;它的主页为&#xff1a;https://github.com/microsoft/vscode-go 这款插件的特性包括&#xff1a; Colorizatio…

最受欢迎的应用服务器

这是本系列的第二篇文章&#xff0c;我们将发布有关Java安装的统计数据。 使用的数据集来自免费的Plumbr安装&#xff0c;在过去六个月中&#xff0c;我们总共收集了1,024个不同的环境。 本系列的第一篇文章分析了基础-运行JVM的操作系统&#xff0c;是32位还是62位基础架构以…

SON_EXAM考试php,通用全国少儿英语等级考试:三星笔试真题

单项选择&#xff1a;36. exciting the game was! I enjoyed every minute of it.A.What B. How C.What an B.How an37.You stay here if youve finished your work.A.neednt B.mustnt C. shouldnt D.cant38 Nanjing Road in Shanghai is always crowded peole.A.with B.by c.o…

CSS基础知识(display和visibility、overflow、文档流)

9、显示与隐藏 u display属性&#xff1a; (1)none&#xff1a;隐藏元素&#xff0c;不会再占有页面的任何空间&#xff0c;即不会影响布局。 (2)inline&#xff1a;默认值。将元素[显示]为内联元素 &#xff08;与HTML元素本身无关系&#xff09; (3)block&#xff1a…

最受欢迎的Java环境

该职位将是即将发布的系列文章中的第一篇。 我们从所使用的环境开始&#xff1a;如果您感兴趣的是最受欢迎的JVM供应商或JVM版本&#xff0c;那么32bit是比64bit更流行的体系结构&#xff0c;还是Windows 8比Windows XP更流行的体系结构-这些都将在我们的文章中介绍。 在下一个…

使用宏实现透视表部分功能,将AB列数据合并统计.

功能:1.筛选B列;2.将A列中的值按照筛选后的结果进行合计. 这个特殊点是按照月日进行筛选的. Sub count_a() Dim sh As Worksheet Set sh ActiveSheet Range("C2:D" & [D65536].End(3).Row).Clear For line_b 2 To [B65536].End(3).Row If Len(Cells(line_b, &q…

HTML基础知识(常见元素、列表、链接元素、图片元素)

1、HTML有关概念 全称: Hyper Text Markup Language&#xff08;超文本标记语言&#xff09; 其文件扩展名为“.html”或“.htm” * 超文本 - 在普通的文本基础上&#xff0c;添加超链接、图片、音频或视频等 * 标记 - 标记就是HTML中的标签(元素)&#xff0c;特点:<a> …

权限和ACL练习题

1、在/testdir/dir里创建的新文件自动属于g1组&#xff0c;组 g2的成员如&#xff1a;alice能对这些新文件有读写权限&#xff0c;组g3 的成员如&#xff1a;tom只能对新文件有读权限&#xff0c;其它用户&#xff08;不 属于g1,g2,g3&#xff09;不能访问这个文件夹。 前期准备…

CSS3的过渡和转换

CSS3的过渡和转换 1.过渡 什么是过渡呢&#xff1f;过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。 过渡的属性&#xff1a; 属性 描述csstransition简写属性&#xff0c;用于在一个属性中设置4个过渡属性3transition-property规定应用过渡的css属性的名称…

JavaEE概念简介

这篇文章旨在澄清J2EE范例中使用的首字母缩写词和概念。 J2EE代表Java to Platform&#xff0c;Entreprise Edition。 它使创建模块化Java应用程序成为可能&#xff0c;并将其部署在应用程序服务器上。 它依赖于Java SE&#xff0c;Java SE是一组Java库的核心&#xff0c;所有J…