如何在 CSS 中让子元素出现在其父元素的后面

过去的一种常见情况是,您在另一个元素中有一个元素,您希望它出现在父元素的后面。例如:

默认情况下会产生如下结果:

I am the parent

I am the child, but I want to be behind my parent

要使其正常工作,您必须将孩子从父母中移除,这并不总是可能的。使用现代 CSS,您可以通过沿 Z 轴平移元素来解决此问题。对于我们的示例,这需要将以下代码添加到子级和父级:

我们最终的 CSS 如下所示:

这导致孩子现在出现在父母后面:

I am the parent

I am the ch[……]

继续阅读

如何使用 WebGL 和 Three.js 创建动画卡片

最近, Apple 开始在 Apple Music 上推出有吸引力的动画卡片。像这样的动画和效果确实推动了与网站的互动,并最终带来更多的转化。

我认为这是一种非常酷的展示卡片的方式,它正在成为一种在网络上显示内容的更普遍的方式。本教程将介绍掌握此效果的要点。

链接到 CodePen 演示

步骤 1. Three.JS#

和我在 WebGL 上做的很多教程一样,我们将使用 Three.JS 来实现这个效果。我们将使用的过程看起来有点像这样:

导入 Three.js 后,我们在 JS 中设置所有内容。这里要注意的关键是可以更改并立即导致 WebGL 渲染[……]

继续阅读

什么是 CSS 中的可变字体,以及如何使用它们

可变字体于 2018 年首次实验性地引入 Chrome 和其他浏览器。如今,它对该功能的支持覆盖了 90% 以上的网络用户。不仅如此,可变字体也很棒。让我们看看它们是什么,以及如何使用它们。

什么是可变字体?#

简而言之,可变字体是真实类型字体规范的演变,这意味着所有可能的字体粗细和样式都在一个文件中可用。

这是我们使用的字体示例,Inter,带有一个滑块来调整其重量:

这是可变字体!在下面改变我的体重:

好处#

可变字体有什么好处?那么有很多:

灵活性

通常,当您使用普通字体时,您会被限制在几个固定的粗细上。使用可变字体,这不再是问题 – 您在[……]

继续阅读

使用 Swift 从零开始的 iOS:下一步该去哪里

iOS 从零开始使用 Swift系列:
探索 iOS SDK
探索 Foundation 框架
使用 UIKit 的第一步
自动布局基础
表格视图基础
导航控制器和视图控制器层次结构
iOS 上的数据持久性和沙盒
构建购物清单应用程序 1
构建购物清单应用程序 2
下一步该去哪里

在过去的几周里,你学到了很多东西,蚱蜢,此时你甚至可能会感到有点不知所措。我想给你一些建议和大量资源,以帮助你成为一名熟练的 iOS 开发人员。

需要考虑的事情

尽管 2007 年似乎是昨天,但移动领域,尤其是 iOS,已经以惊人的速度增长。很难想象没有 iPhone、iPad 和 iPod Touch 的移动环境。由[……]

继续阅读

iOS 从零开始使用 Swift:构建购物清单应用程序 2

iOS 从零开始使用 Swift系列:
探索 iOS SDK
探索 Foundation 框架
使用 UIKit 的第一步
自动布局基础
表格视图基础
导航控制器和视图控制器层次结构
iOS 上的数据持久性和沙盒
构建购物清单应用程序 1
构建购物清单应用程序 2
下一步该去哪里

在前面的lessen中,我们为购物清单的应用打下了基础。在本课的第一部分,我们通过允许用户编辑和删除列表中的项目来进一步优化应用程序。稍后,我们添加了从列表中选择项目以创建购物清单的功能。

1. 删除项目

就用户体验和整体可用性而言,从列表中删除项目是一项重要的补充。添加此能力包括:

iOS 从零开始使用 Swift:构建购物清单应用程序 1

iOS 从零开始使用 Swift系列:
探索 iOS SDK
探索 Foundation 框架
使用 UIKit 的第一步
自动布局基础
表格视图基础
导航控制器和视图控制器层次结构
iOS 上的数据持久性和沙盒
构建购物清单应用程序 1
构建购物清单应用程序 2
下一步该去哪里

在接下来的两节课中,我们将通过创建购物清单应用程序将我们在本系列中学到的知识付诸实践。在此过程中,您还将学习许多新概念和模式,例如创建自定义模型类和实现自定义委托模式。我们有很多内容要覆盖,所以让我们开始吧。

大纲

我们将要创建的购物清单应用程序有两个功能,管理物品清单和通过从清单中选择物品来创建购物清单。

我们[……]

继续阅读

iOS 从零开始使用 Swift:iOS 上的数据持久性和沙盒

iOS 从零开始使用 Swift系列:
探索 iOS SDK
探索 Foundation 框架
使用 UIKit 的第一步
自动布局基础
表格视图基础
导航控制器和视图控制器层次结构
iOS 上的数据持久性和沙盒
构建购物清单应用程序 1
构建购物清单应用程序 2
下一步该去哪里

跨应用程序启动持久化数据是大多数 iOS 应用程序的要求,从在默认系统中存储用户偏好到在关系数据库中管理大型数据集。在本文中,我们将探讨用于在 iOS 应用程序中存储数据的最常用策略。我还将讨论 iOS 上的文件系统以及应用程序沙盒如何影响数据持久性。

介绍

你已经走了很长一段路,蚱蜢,你学到了很多东西。但是我们还没有[……]

继续阅读

iOS 从零开始使用 Swift:导航控制器和视图控制器层次结构

iOS 从零开始使用 Swift系列:
探索 iOS SDK
探索 Foundation 框架
使用 UIKit 的第一步
自动布局基础
表格视图基础
导航控制器和视图控制器层次结构
iOS 上的数据持久性和沙盒
构建购物清单应用程序 1
构建购物清单应用程序 2
下一步该去哪里

在 iOS 上,导航控制器是呈现多屏内容的主要工具之一。本文通过创建用于浏览图书馆书籍的应用程序,教您如何使用导航控制器。

介绍

在上一个教程中,您了解到 UIKit 的表格视图类非常适合呈现表格或列数据。但是,当需要将内容分布在多个屏幕上时,导航控制器通常是首选工具。
该类 UINavigationContr[……]

继续阅读

iOS 从零开始使用 Swift:表格视图基础

iOS 从零开始使用 Swift系列:
探索 iOS SDK
探索 Foundation 框架
使用 UIKit 的第一步
自动布局基础
表格视图基础
导航控制器和视图控制器层次结构
iOS 上的数据持久性和沙盒
构建购物清单应用程序 1
构建购物清单应用程序 2
下一步该去哪里

表格视图是 UIKit 框架中最常用的组件之一,也是 iOS 平台上用户体验不可或缺的一部分。表视图只做一件事,它们做得很好,呈现一个有序的项目列表。该UITableView课程是继续我们的 UIKit 框架之旅的好地方,因为它结合了 Cocoa Touch 和 UIKit 的几个关键概念,包括视图、协议和可重用性。

数据源[……]

继续阅读

iOS 从零开始使用 Swift:自动布局基础

iOS 从零开始使用 Swift系列:
探索 iOS SDK
探索 Foundation 框架
使用 UIKit 的第一步
自动布局基础
表格视图基础
导航控制器和视图控制器层次结构
iOS 上的数据持久性和沙盒
构建购物清单应用程序 1
构建购物清单应用程序 2
下一步该去哪里

在上一篇文章中,我们创建了一个简单的应用程序,只有一个标签和一个按钮。尽管它很简单,但该应用程序有一些布局问题。在本教程中,您将学习如何使用 Apple 的布局系统 Auto Layout 来解决这些问题。让我们从一个新项目开始。

介绍

打开 Xcode 并创建一个新项目,选择 Single View App[……]

继续阅读