网站建设中可以用到的7种很棒的CSS3技术

带有HTML的CSS（层叠样式表）的发展令人难以置信。最近引入了很多功能，例如Flexbox，CSS Grid和CSS自定义属性。

它的不断发展和巨大的潜力吸引了开发人员尝试新的CSS技术并超越了其功能范围。毫无疑问，HTML 5和CSS3技术的结合是一个杀手er。

难怪一个执行良好的CSS计划几乎可以控制设计的任何方面并带来更好的用户体验，这是非常必要的。毕竟，访问者通过笔记本电脑，台式机，平板电脑或任何其他媒体查看您的网站时，会有某些期望。

但是CSS技术有哪些发展趋势？当我们谈论设计一个有吸引力的用户友好型网站时，这不是一个显而易见的问题吗？

这就是为什么我们提出一些新的CSS技术和技巧来掌握您的Web设计技能的原因。每篇文章都包含一些说明和示例代码片段。

因此，让我们直接开始吧！

1.与Flexbox垂直对齐

早期的开发人员过去在对齐文本或任何其他元素垂直居中时遇到很多困难。但是现在，在引入了新的CSS3规范Flexbox之后，事情变得更加容易了。

属性display：flex为用户提供了一种轻松的方式来使其居中对齐任何文本或元素。这是示例代码！

HTML：

CSS：

在上面的CSS代码中，display：flex描述了元素的Flexbox布局，而align-items：center; 负责文本的垂直居中。

结果：

2.响应式CSS网格

不要使网格成为例外，也要使其具有响应能力，就像设计中的其他所有事物一样。

有多种方法可以使您的网格以CSS Grid响应。使用它的最好的部分是，无论设备大小如何，您都可以创建一个更灵活的网格，以提供所需的外观。

除此之外，CSS网格还允许您使用不相等和相等的列大小。这是一项很棒的技术，其中包含各种选项，这些选项使用户可以自由控制自己的设计。

您可以使用各种断点，多个尺寸的高度以及其他位置，如下例所示。

HTML：

CSS：

上面的CSS代码中使用的小数单位（fr）是根据您的准则分隔开阔空间的灵活单位。每个fr语句均用于该列，然后您可以将这些间隙加起来并准备好网格。

结果：

 

3.文字动画

您可能已经使用CSS创建了背景动画，但是现在它还影响了用户与网站的文本元素进行交互和互动的方式。从悬停调整到使文字漂浮在空中，CCS3使其成为可能。

没有太多吸引人的元素来吸引用户的网站可以充分利用此特征。这是一个小例子。

 

HTML：

<div class="Menu">
<ul class="Menu-list" data-offset="10">
<li class="Menu-list-item" data-offset="20" onclick>
LIVE
<span class="Mask"><span>LIVE</span></span>
<span class="Mask"><span>LIVE</span></span>
</li>
<li class="Menu-list-item" data-offset="16" onclick>
LAUGH
<span class="Mask"><span>LAUGH</span></span>
<span class="Mask"><span>LAUGH</span></span>
</li>
<li class="Menu-list-item" data-offset="12" onclick>
LOVE
<span class="Mask"><span>LOVE</span></span>
<span class="Mask"><span>LOVE</span></span>
</ul>
</div>

CSS：

$perspective:     60rem;
$font-size:       5.25rem;
$split-position:  50%;
$split-thickness: 3px;
$split-color:     #FF2C75;
%font-settings {
font-family: "Comic Sans MS", system-ui, sans-serif;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-webkit-font-kerning: normal;
-webkit-text-size-adjust: 100%;
}
html,
body {
  width: 100vw;
  height: 100vh;
}
body {
  @extend %font-settings;
  background: linear-gradient(45deg, #02001F,#008080);
  transform-style: preserve-3d;
  transform: perspective($perspective);
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center; 
}
.Menu-list {
  font-size: $font-size;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateX(-10deg) rotateY(20deg); // overwritten by JS
}
.Menu-list-item {
  position: relative;
  color: transparent;
  cursor: pointer;
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: $split-position;
    left: -10%;
    right: -10%;
    height: $split-thickness;
    border-radius: $split-thickness;
    margin-top: -($split-thickness / 2);
    background: $split-color;
    transform: scale(0);
    transition: transform .8s cubic-bezier(.16,1.08,.38,.98);
    z-index: 1;
  }
}
.Mask {
  display: block;
  position: absolute;
  overflow: hidden;
  color: $split-color;
  top: 0;
  height: $split-position;
  transition: all .8s cubic-bezier(.16,1.08,.38,.98);
  span { display: block; }
}
.Mask + .Mask {
  top: $split-position - 0.1;
  height: 100 - $split-position + 0.1;
  span { transform: translateY(-$split-position); }
}
.Menu-list-item:hover,
.Menu-list-item:active {
  .Mask { color: #FFF; transform: skewX(12deg) translateX(5px); }
  .Mask + .Mask { transform: skewX(12deg) translateX(-5px); }
  &::before { transform: scale(1); }
}

这样，您还可以为您的网站创建几个动态文本元素。不好玩吗

结果：

4.列布局

通常，基于列的布局是使用Javascript创建的，这非常复杂且耗时。但是CSS带来了一种减轻开发人员和Web设计人员任务的方法。

以下是CSS列规则，您可以通过该规则为网站进行基于列的布局。

HTML：

<div class="container">
Place a container component in order to start building the format. Sometimes you may be able to get rid of the container later, but getting the container component makes it easier to handle across different web browsers for most fixed-width layouts. It defines how wide the content of the web page will be, as well as any external margins and inside padding.
</div>

CSS：

.container {
  /* Old Chrome, Safari and Opera */
  -webkit-column-count: 3;
  -webkit-column-gap: 40px;
  -webkit-column-rule-style: solid;
  -webkit-column-rule-width: 4px;
  -webkit-column-rule-color: orange;
  /* Old Firefox */  
  -moz-column-count: 3; 
  -moz-column-gap: 40px;
  -moz-column-rule-style: solid;
  -moz-column-rule-width: 4px;
  -moz-column-rule-color: orange;  
  /* Standard syntax */
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 4px;
  column-rule-color: orange;
}

结果：

5.屏幕方向

许多人认为屏幕方向和设备方向都可以达到相同的目的。但是事实并非如此。屏幕的方向与设备有所不同。

即使设备无法检测其方向，屏幕也始终可以。而且，如果该设备也能够运行，那么最好控制屏幕方向，以便您可以维护或更改网站的界面。

有两种方法可以处理屏幕方向；CSS或Javascript。但是，使用CSS Orientation Media Query进行操作很容易。由于它使内容能够调整其格式，无论浏览器窗口处于横向模式还是纵向模式。为了更好地理解，让我们看下面的示例。

HTML：

 

<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
<p>If you want a button bar to stretch along the device's longest display dimension. You can do that quickly and automatically by using a media query.</p>

CSS：

/* First let's define some common styles */

html, body {
  width : 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font   : 1em sans-serif;
  margin : 0;
  padding: .5em;
}

ul {
  list-style: none;

  font   : 1em monospace;
  margin : 0;
  padding: .5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin : 0;
  padding: 0.5em;
  background: white;
}
/* For portrait, we want the toolbar on top */

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/* For landscape, we want the toolbar stick on the left */

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: .5em;
  }
}

结果：

6.逗号分隔列表

毫无疑问，项目符号列表在书写中非常常用，可以更准确，清晰地传达任何信息。但是，大多数人都在努力的一件事是在列表的每一点上添加逗号。

使用下面提到的代码片段，您可以轻松地在列表中添加逗号（最后一个除外）。

HTML：

CSS：

结果：

7.动画复选框

好吧，大多数人都非常了解CSS背景和文本动画。但是，很少有人知道复选框动画。

是的，除了背景和文字之外，您还可以使复选框部分在视觉上更具吸引力。很好吗？

以下是您可以参考的示例：

HTML：

CSS：

结果：

如果深入研究，那么CSS和HTML的可能性将是无限的。因此，我们希望上述实现的技术可以帮助您获得一些知识，并对您设计一个出色的网站有所帮助。