PPT文字篇之阴影,使用CSS3制作各种图形

PS制作金属字 (载入中...)

1、正圆形

html制作细线表格,制作细线表格

关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border="0" cellspacing="1" bgcolor="#990033"这几个值,还要给单元格单独设置背景色,例如:bgcolor="#fff"。但是关于为什么要设置这几个值,估计就没有详细的讲解了!

那么今天突然想到记录一下关于这个细线表格的原理,也是因为这几天在给学生上基础课,学生关于这个细线表格原理不是很明白,所以想初学者的话,估计都会遇到类似的问题,所以这里就说一下为什么设置这几个值。

首先我们先看看将表格的border的值设置为1的时候的效果,哪怕border="1",单元格之间的距离cellspacing="0",表格的粗细看起来还是比较粗糙:

图片 1

我们再看看通过制作细线表格方法制作出来的是什么效果:

图片 2

相比之下,后面的表格更为精致一些。

那么现在我先把制作细线表格的步骤归纳一下:

制作细线表格的步骤:

分析:table的背景色其实就是细线表格视觉上看起来的细线,因为我们将border设置为0,并且单元格之间的间距cellspacing设置为1了,那么table的背景色就是透过这一像素的空隙透出来的颜色,给单元格设置背景色,就是为了和table的背景色区分开来。为了更好理解,我这里用图片分析一下:

1、假设下面的表格border="1",显示如下:

图片 3

2、当设置单元格间距cellspacing="0"时,两个1像素的边线挨在一起,就会显得边框很粗:

图片 4

所以不能通过border="1"来设置细线效果

那我我们用细线方法来制作原理如下:

图片 5

如果本文对您有帮助,记得推荐哦

关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border="0" cellsp...

图片 6

图片 7

图片来自夏至PPT制作

具体制作步骤如下:

代码:

好难得看到我上周才更了小白的教程今天又更了,对于新来的小伙伴,我们还是先回顾下前几期的内容吧:

  让我们先找一个合适的背景。

HTML代码:

【白富美01】小白偶遇PPT(2013破解版office下载,当然前不久我已更新了2016破解版,点击可免费下载:做好PPT,首先你需要一个好的工具)

图片 8

<div class="circle"></div>

【白富美02】小白初识PPT(上)(PPT菜单功能介绍,以及一些必要的设置:嵌入字体、后悔100步)

  输入你的文字,我用的是一个大的漂亮的ExtraHeavy字体,大小460 px。

CSS代码:

【白富美02】小白初识PPT(下)(PPT菜单功能介绍,一些设置:编号、页面大小,以及注意事项:弃默认主题和版式)

图片 9

.circle {
  width: 100px;
  height: 100px;
  background-color: #1af033;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  border-radius: 60px;
}

【白富美03】小白追求PPT-1(PPT文字作用、使用,文字三要素之一字体的认识、选择、下载和安装,提供有1.14GB字体下载包、字体编辑软件、字体直接下载安装软件)

现在,按下面的图层样式设置文本。仔细检查每个设置。

  

【白富美03】小白追求PPT(文字篇)-字号、填充与边框设置(PPT文字三要素之字号、格式,其中格式只讲到了填充与边框设置,着重讲解了图片填充和渐变填充原理)

图片 10

扩展:

今日继续学习关于PPT文字格式之文本效果(需要自制文本效果源文件(且含有GIF动态版教程)的在公众号内回复:文本效果)

    运用CSS3制作圆形时,一定要设置相同的宽度和高度,然后设置border-radius属性值为宽度或高度的一半,或者直接设置为50%

关于文本效果,可以对文本进行如下设置:阴影、映像、发光、三维效果及转换。(柔化边缘是针对图片而言)

2、椭圆形

图片来自夏至PPT制作

 图片 11

由上图可以看到:

代码:

使用阴影时,有2点要注意:①阴影色需与字色和背景色成强烈对比,方可体现出阴影效果;②文字尽量不要使用彩色阴影。

HTML代码:

对于映像文字,也有2点要注意:①正文慎用;②搭配背景要有玻璃或渐变质感,才能符合自然,体现倒影效果。

<div class="oval"></div>

三维格式/棱台和旋转:一般同时设置,展示立体效果,常用于标题,醒目、有力,但正文慎用。

CSS代码:

下面进行一一讲解

.oval {
  width: 200px;
  height: 100px;
  background-color: red;
  -webkit-border-radius: 100px/50px;
  -moz-border-radius: 100px/50px;
  -ms-border-radius: 100px/50px;
  border-radius: 100px/50px;
}

阴影效果

扩展:

自带的阴影效果设置,选择文本内容【文本效果设置】,可对阴影效果进行设置。

    椭圆是正圆的一个规则变体,设置椭圆形的CSS样式时,高度要设置为宽度的一半,border-radius属性也要做相应的改变:水平半径设置为宽度的一半,垂直半径设置为高度的一半(详情可查看:border-radius属性值参数详解)

图片来自夏至PPT制作

3、三角形

自带的阴影效果设置,还有一个快捷方式:一键设置,在【开始】菜单栏中的“S”符号

图片 12

图片来自夏至PPT制作

代码:

当然有很多时候,自带文字阴影的设置调整不太熟练,我们还可以自制阴影效果

HTML代码:

图片来自夏至PPT制作

<div class="triangle"></div>

图片来自夏至PPT制作

CSS代码:

图片来自夏至PPT制作

.triangle {
    width: 0;
    height: 0;
    border-bottom: 100px solid #236453;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

映像效果

扩展:

图片来自夏至PPT制作

创建一个CSS三角形,需要使用border属性,通过设置不同边的透明效果,可以制作出三角形的现状。注意,在制作三角形时,宽度和高度要设置为0。(详情可查看:利用border制作三角形原理)

这个设置很简单,唯一需要注意的是,根据实际应用场景调节映像的距离、模糊度(文字本身距离倒影面边缘的距离=倒映距离倒影面边缘的距离),使其符合倒影的自然规律

4、菱形

图片来自夏至PPT制作

图片 13

发光效果

代码:

图片来自夏至PPT制作

HTML代码:

系统自带的发光字效果,发光颜色设置只能选择单色,无法设置渐变色,那么我们可不可以设置渐变色的发光字了?看下面荧光字的效果设置:

<div class="diamond"></div>

图片来自夏至PPT制作

CSS代码:

图片来自夏至PPT制作

.diamond {
  width: 100px;
  height: 100px;
  background-color: #ff5db8;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

三维格式效果

扩展:

图片来自夏至PPT制作

    运用CSS制作菱形的方法有很多种,这里使用的是transform属性和rotate相结合:先制作出一个正方形,然后旋转45°就得到了一个菱形,也可以使用其他方法实现,比如border

利用三维格式,我们还可以衍生一种叫扁平文本阴影的效果,来看怎么在制作的:

5、梯形

图片来自夏至PPT制作

图片 14

文本转换效果

代码:

图片来自夏至PPT制作

HTML代码:

利用文本转换效果,可以设计一些比较有特色的字,可以根据对文字本身的理解,进行不同转换形式的设置,让其更具有文字的含义。

<div class="trapezium"></div>

同时,还可以利用转换效果设置光影拉长倒影。

CSS代码:

图片来自夏至PPT制作

.trapezium {
    width: 100px;
    height: 0;
    border-bottom: 100px solid #236453;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

此次没法上传动态GIF教程,因为GIF教程过大。

扩展:

**需要自制文本效果源文件(且含有GIF动态版教程)的在公众号内回复:文本效果**

    运用CSS制作梯形的方法和border有些类似,只要弄明白了border制作三角形的原理,就可以很好理解了:梯形是三角形的一个变体,CSS制作梯形时,设置左右两条边框,并且给它设置一个宽度。

6、平行四边形

图片 15

代码:

HTML代码:

<div class="parallelogram"></div>

CSS代码:

.parallelogram {
  width: 100px;
  height: 100px;
  background-color: #ff5db8;
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  transform: skew(30deg);
}

扩展:

    平行四边形的制作和菱形的制作非常类似,菱形是正方形进行旋转,而平行四边形则是对矩形进行倾斜度的设置

5、五角星

图片 16

代码:

HTML代码:

<div class="star"></div>

CSS代码:

.star {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #ffd200;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
.star:before {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #ffd200;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
.star:after {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #ffd200;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

扩展:

    星形的实现方式相对比较复杂,主要是先制作出三角形,然后使用transform属性来旋转不同的边,再使用定位方法整合成一个五角星(详情可见上面的分解图)

6、心形

图片 17

代码:

HTML代码:

<div class="heart"></div>

CSS代码:

.heart {
    position: relative;
    left: 70px;
    width: 70px;
    height: 115px;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    -ms-border-radius: 50px 50px 0 0;
    -o-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: red;
}
.heart:after {
    position: absolute;
    display: block;
    content: "";
    width: 70px;
    height: 115px;
    left: 22px;
    top: 23px;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    background: red;
}

扩展:

    心形的制作不是特别复杂,制作两个一样的矩形,然后把顶部都做成椭圆,再进行相应的旋转,定位合并就完成了

 

本文由官方彩票手机投注网站发布于摄影资讯,转载请注明出处:PPT文字篇之阴影,使用CSS3制作各种图形

您可能还会对下面的文章感兴趣: