当前位置:Gxlcms > html代码 > 现代网页设计必不可少的CSS3功能_html/css_WEB-ITnose

现代网页设计必不可少的CSS3功能_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

在过去几年,CSS 的发展是很多 Web 设计者和开发人员未能想到的。CSS3 引入了新的功能,如 border-radius , box-shadow , text-shadow , text-overflow , multiple-background , transition , flexbox 、 animation 以及媒体查询等。

然而,CSS 仍继续在改善——尽管仍有一些不知名的属性。 CSS 变得更加有效率,并更接近于我们使用 JavaScript 和其他 Web 编程语言想要实现的功能。

在这篇文章之中,我们会介绍一些现代网页设计必不可少的一些 CSS3 的功能。

多背景

CSS3 允许你使用一个简单的逗号分隔列表,将多个背景应用于某个元素上。这时背景就会堆叠成层,第一个背景位于顶端,最后一个背景处于底部。 注意 只有列表中的最后一个背景色可以显示出来。

这里有一个基础的示例:

从上面的例子中可以看出,三个背景已经堆叠。同时为了控制图片的显示,这里又应用了其它的背景属性,如 background-repeat 和 background-position 。

Background-Clip

你还记得当年你使用 Photoshop 创建基于图片的文本的日子吗?自从具有相同功能的CSS3 background-clip 新属性的出现,Photoshop 正慢慢淡出人们的视线。

现在你可以使用 background-clip 属性来剪切基于图片的文本。首先,你需要把图片的 div 元素放置在 h1 或你想要剪切的文本元素上。现在你就可以使用 background-clip 属性剪切基于文本的图片。请确保 text-fill-color 属性为 transparent 。

下面的示例展示了 background-clip 属性的工作原理:

CSS 3D 变换

使用 CSS3,你可以创建一个假想的 3D 空间。这时元素需要一个视角才可以激活 3D 空间。有两种方式可以实现激活:使用 transform 属性和 perspective 属性值。

transform: perspective(600px);

或者只是使用 perspective 属性:

perspective: 600px;

效果的实现是由你给定的值来确定的。值越小,越接近于 三维空间的 Z 平面。事实证明,示例效果最具有说服力。下面的程序演示了你如何使用 transform 属性来实现 3D 效果:

计算值

我最喜欢的 CSS3 功能之一就是,使用 calc() 函数计算元素的值。就像一个计算器,它可以执行简单的数学计算,如大小、 角度或频率。

请看下面的代码,观察其工作原理。

HTML:

This is the text inside the container!

CSS:

.container {    width: 80%; /* fallback for browsers without support for calc() */    width: calc(100% - 80px);    text-align: center;    margin-top: 20px;    position: absolute;    left: 40px;    border: 1px solid #3b3b3b;    background-color: #1dd046;     padding: 10px;}

在这个示例中,CSS 创建了一个容器盒子,其与浏览器边缘有一个 40 像素的边缘距离,并填充其余整个窗口。请看下面的图像结果 ︰

混合模式

使用 background-blend-mode 属性,你可以 使用颜色混合图像 。就像在 Photoshop 中,你可以使用不同的颜色效果改变属性(混合模式)如屏幕( screen ),叠加( overlay )、 变暗( darken )、变轻( lighten )、颜色减淡( color-dodge )、颜色加深( color-burn )、强光( hard-light )、柔光( soft-light )、差异( difference )、排斥( exclusion )、色相( hue )、饱和度( saturation )、颜色( color )和亮度( luminosity )。当然,你使用 normal 属性保留原始值。

下面是一个简单的示例:

请注意,这里我使用了混合模式属性值 screen 。这将创建图像颜色的混合效果。

text-overflow

CSS3另外一个特点就是可以使用 text-overflow 属性对溢出容器的文本进行裁剪。

text-overflow 有三个可选值:

  • clip :默认值。裁剪文本。
  • ellipsis :将使用("···")表示裁剪的文本。
  • initial :将属性设置为默认值。

注意 text-overflow 可以和 overflow 属性一起使用,将文本设置为隐藏,滚动或者自适应。你也可以使用 white-space:nowrap; 来确定文本的布局方式。如下示例所示:

CSS3 动画

之前,你仅能通过Javascript来实现动画效果。现在,即使你不了解Javascript利用CSS3同样可以实现很炫酷的动画效果。

你可以使用下面两种方式来创建一个很酷的动画效果:

  • transition : 增加对鼠标悬停状态的平稳过渡。
  • @keyframes : 这个可能有点复杂,但是可以创建出一个先进的动画效果。

让我们看看两种方法的工作原理。请看下面的示例:

如果你想更多的了解CSS3动画,请点击这里。

Flexbox

flexbox 是 CSS3 的一种布局方式,他的创建是为了加强项的对齐方式、方向以及在容器内的排列顺序。其优点是可以适应于不同大小的屏幕和设备。

灵活的的盒子模型增强了块模型,而无需使用浮动。这意味着容器的边缘不会与其内容发生坍塌现象。

让我们看一个基本的 flexbox 布局:

启用 flexbox 布局,你需要将其父元素的 display 属性设置为 flex 或者 inline-flex 。这样所有的子元素就会自动设设置为 flex 项。

Flex 方向

你可以通过使用 flex-container 和 flex-direction 属性设置flex项的方向。

flex-direction 有四个可选值:

  • row :默认值。将flex项的方向设置为从左向右和从上到下。
  • row-reverse :将flex项的方向设置为从右向左。
  • column :将flex项方向设置为垂直。
  • column-reverse :将flex项方向设置为垂直,但是是以相反的方式。

让我们看看下面这个例子.

在上面的例子中,我们将 flex-container 的 flex-direction 属性设置为了 row-reverse ,意味着 flex-items 的排列顺序为从右到左。

关于 flexbox ,有许多相关属性。如果你想要加深对其的了解,可以点击这里。

总结

CSS3 功能提供了惊人的效果,可以让一个元素逐渐从一个样式更改为另一种,并且根据于你的 托管 可以提高其加载速度。如果你不是一个程序员,对你想要创建一个简单的、 光滑的效果都非常有用。

本文根据 @Samuel Norton 的《 The Cutting-Edge CSS3 Features That Are Essential to Modern Web Design 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: https://speckyboy.com/2016/04/10/css3-features-essential-modern-web-design/ 。

静子

在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶

人气教程排行