本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3样式对H1标题元素进行各种设计

本文概述

本文介绍如何通过CSS 3的border、box-shadow、transform、linear-gradient样式属性以及:before、:after选择器对页面中的H1元素进行各种设计。

裁剪线

这是一种具有将纸从当中裁剪成两半的视觉效果。

样式设定关键:绘制盒元素的内部阴影,指定从上往下绘制,指定阴影的模糊半径与阴影颜色,代码如下所示。

border-top:1px dashed #aaa;
border-bottom:1px dashed #aaa;
background:#eee;
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 4px rgba(0,0,0,0.3) inset;

透明胶带


这是一种贴上透明胶带纸的视觉效果。

样式设定关键:除了绘制顶部阴影之外,使用box-shadow样式属性绘制左右两边阴影,使其呈现出胶带被贴上去的效果。

另外,使标题旋转3度,同时将其倾斜3度成平行四边形,目的是使内容与背景边框垂直,如下图所示。

具体代码如下所示:

text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
            30px 0 0 0 #f0e800,
            -30px 0 0 0 #f0e800;
transform: rotate(-3deg) skew(-3deg);

礼品装饰彩带


这是一种为标题捆绑上一条礼品装饰彩带的视觉效果。

样式设定关键:与“透明胶带”视觉效果的制作方法相类似,首先旋转与倾斜标题元素。使用:before选择器与:after选择器制作标题两边的小三角形。上下线中使用linear-gradient样式属性制作渐变效果,如下图所示。

具体代码如下所示:

#heading03{
    //部分样式代码略
    transform: rotate(-3deg) skew(-3deg);
    box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
    background-image: linear-gradient(to bottom,
            transparent 8%,
            rgba(255, 255, 255, 0.5) 8%,
            rgba(255, 255, 255, 0.5) 12%,
            transparent 12%,
            transparent 88%,
            rgba(255, 255, 255, 0.5) 88%,
            rgba(255, 255, 255, 0.5) 92%,
            transparent 92%
    );
}
#heading03:before{
    content:" ";
    position:absolute;
    top:-5px;
    left:0;
    width:0;
    height:0;
    border-width:0 0 5px 10px;
    border-style:solid;
    border-color:transparent;
    border-bottom-color:#c66;
}
#heading03:after{
    content:" ";
    position:absolute;
    top:100%;
    right:0;
    width:0;
    height:0;
    border-width:5px 10px 0 0;
    border-style:solid;
    border-color:transparent;
    border-top-color:#c66;
}

吹泡效果

这是一种类似漫画中的对话般的吹泡效果。

样式设定关键:使用border-radius样式属性制作圆角边框,使用box-shadow样式属性在标题内部及外部绘制阴影,使用:before选择器与:after选择器制作三角形,如下图所示。

具体代码如下所示:

#heading04{
    //部分样式代码略
    border-radius:18px;
    background:#fff;
    box-shadow: -7px -5px 0 0 #e8e8e8 inset,2px 3px 0 0 #000;
}
#heading04:before{
    content:" ";
    position:absolute;
    top:100%;
    left:14px;
    width:0;
    height:0;
    border-width:20px;
    border-style:solid;
    border-color:transparent;
    border-top-color:#333;
}
#heading04:after{
    content:" ";
    position:absolute;
    bottom:-27px;
    left:18px;
    width:0;
    height:0;
    border-width:14px;
    border-style:solid;
    border-color:transparent;
    border-top-color:#e8e8e8;
}

金属板效果

这是一种金属板一般的视觉效果。

样式设定关键:使用border样式属性与box-shadow样式属性制作金属边框及其阴影效果,使用渐变色制作标题背景,使其呈现出金属板效果,代码如下所示:

background-image: -webkit-linear-gradient(top,
    rgba(220, 220, 220, 1.0),
    rgba(240, 240, 240, 1.0) 25%,
    rgba(235, 235, 235, 1.0) 30%,
    rgba(240, 240, 240, 1.0) 36%,
    rgba(235, 235, 235, 1.0) 50%,
    rgba(215, 215, 215, 1.0) 80%,
    rgba(210, 210, 210, 1.0)
);

旗帜效果

这是一种红旗一般的视觉效果,样式设定关键在于使用after选择器制作旗杆,代码如下所示:

h1:after{
    content:" ";
    position:absolute;
    top:-2px;
    left:-10px;
    width:0;
    height:130%;
    border:#600 solid 2px;
    border-radius:2px;
    transform: rotate(-2deg);
}