8个有用的 CSS 技巧:视差图像，sticky footer 等等

Rango 发布于2019-08-30 15:43 / 2179人阅读

摘要：在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习过程中的关键进展。当用户将鼠标悬停在上面时，图像会稍微放大，但其尺寸保持不变。为了达到这个效果，需要用标签包裹标签。的范围是从到，其中从白色变为黑色。

CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。

在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习CSS过程中的关键进展。本文并不是要演示CSS可以变得多么复杂。相反，它分享了一些在大多数CSS教程中不太可能找到的有用技巧。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

1. Sticky Footer

这个非常常见的需求,但对于初学者来说可能是个难题。

对于大多数项目，不管内容的大小，都希望页脚停留在屏幕的底部—如果页面的内容经过了视图端口，页脚应该进行调整。

在CSS3之前，如果不知道脚的确切高度，就很难达到这种效果。虽然我们称它为粘性页脚，但你不能简单地用 position: sticky 来解决这个问题，因为它会阻塞内容。

今天，最兼容的解决方案是使用 Flexbox。主要的做法是在包含页面主要内容的
div 上使用不太知名的 flex-grow 属性，在下面的示例中，我使用的是 main 标签。

flex-grow 控制 flex 项相对于其他 flex 元素填充其容器的数量。当值为 0 时，它不会增长，所以我们需要将它设置为 1 或更多。在下面的示例中，我使用了简写属性 flex: auto，它将 flex-grow 默认设置为 1。

为了防止任何不必要的行为，我们还可以在 footer 标签中添加 flex-shrink: 0。flex-shrink 实际上与 flex-growth 属性相反，控制 flex 元素收缩到适合其容器的大小，将它设置为 0 刚防止 footer 标签收缩，确保它保留其尺寸。

// html

  
    Everything apart from the footer goes here
    Add more text here, to see how the footer responds!
  
  
    The footer goes here

// css
#document { 
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
  flex: auto;
}

footer {
    flex-shrink: 0;
}

/* Other styling elements, that are not necessary for the example */

* {
  margin: 0;
  font-family: Candara;
}

h1, p {
  padding: 20px;
}

footer {
  color: white;
  background: url(https://images.unsplash.com/photo-1550795598-717619d32900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80);
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
}

footer > h1 {
  text-shadow: 1px 1px 4px #00000080;
}

查看演示

2. Zoom-on-Hover

zoom-on-hover 效果是将注意力吸引到可点击图像上的好方法。当用户将鼠标悬停在上面时，图像会稍微放大，但其尺寸保持不变。

为了达到这个效果，需要用 div 标签包裹 img 标签。

要使此效果生效，需要设置父元素的 width 和 height ，并确保将 overflow 设置为 hidden，然后，你可以将任何类型的转换动画效果应用于内部图像。

// html

// css
.img-wrapper {  
  width: 400px;
  height: 400px;
  overflow: hidden; 
}

.inner-img {
  transition: 0.3s;
}

.inner-img:hover {
  transform: scale(1.1);
}

查看演示

3. 即时夜间模式

如果你正在寻找一个快速的方法来应用“夜间模式”皮肤到你的网站，可以使用 invert 和 hue-rotate 过滤器。

filter: invert() 的范围是从 0 到 1，其中 1 从白色变为黑色。

filter: hue-rotate() 改变元素的颜色内容，使它们或多或少保持相同的分离水平, 其值范围为 0deg 至 360deg。

通过将这些效果组合在 body 标签上，可以快速试用网站的夜间模式（注意，为了影响背景，你必须给它一个颜色。）

使用这些设置，我们可以给谷歌的主页一个即时改造:

4.自定义的要点

要为无序列表创建自定义项目符号，可以使用 content 属性和 ::before 伪元素。

在下面的 CSS 中，我使用 .complete 和 .incomplete 两个类来区分两种不同类型的项目符号。

ul {
  list-style: none;
}
ul.complete li::before {
  content: "

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116009.html

8个有用的 CSS 技巧:视差图像，sticky footer 等等

摘要：在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习过程中的关键进展。当用户将鼠标悬停在上面时，图像会稍微放大，但其尺寸保持不变。为了达到这个效果，需要用标签包裹标签。的范围是从到，其中从白色变为黑色。 CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。在本文中，我将分享一些有用的技巧和技巧，它们代表了我在学习CSS过程中...

Godtoy 2019-08-23 16:23 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
CSS Sticky Footer

摘要：这样下来我们就可以测试代码了，然后发现如果内容多到一定程度之后小叉虽然被挤出屏幕外了，但是却挡在了文字前面，所以我们这里在里面的内容器加上了一个这样文字就不会再被挡住了。最近碰巧再看网上那一套火的不得了的高仿饿了么的视频，正巧看到一个css技巧，看了一下觉得挺简单，但是却又非常精髓，而平时公司项目和自己练手的项目里面都没有这样的需求，在这里就简单的讲述一下这个技巧（你就当我在这里做个...

wemall 2019-08-30 15:52 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0