如何构建一个 Kick-Butt CSS3 Mega 下拉菜单

通常用于电子商务或大型网站，大型菜单正变得越来越流行，因为它们提供了一种有效的解决方案来显示大量内容，同时保持干净的布局。在本教程中，我们将学习如何使用漂亮的CSS3功能构建一个跨浏览器、很棒的纯CSS下拉巨型菜单。这是您将要构建的内容： 您可以跳转到现场演示以查看它的实际效果。1.构建导航栏让我们从一个基本菜单开始，它由一个无序...

10 个 CSS 和 JavaScript 轮播案例演示

什么是轮播？当我们在UI设计方面谈论轮播时，我们指的是一种包含一组元素的模式，您可以通过手动或自动循环访问这些元素。包含的元素可以是图像、视频、文本或任何其他自定义标记。默认情况下，其中一些元素是可见的，而其他元素则以不同类型的动画（如幻灯片、淡入淡出和视差）出现。经典的Bootstrap轮播组件轮播可以支持不同类型的导航，如滑动导航、点导航...

什么是：CSS Scroll Snap？

Web开发人员很难保证良好控制的滚动体验，但幸运的是，一个名为“ScrollSnap”的CSS模块有望提供帮助。它将在滚动操作完成后强制滚动位置结束。 除其他外，该模块包含控制诸如平移等方面的功能，结合“捕捉位置”，并在滚动容器内产生特定的内容对齐方式。 W3C最近发布了ScrollSnap作为候选推荐，其中包括...

如何使用 CSS 和 JavaScript 构建非画布菜单

在本教程中，我们将通过一种简单而有效的方法来使用HTML、CSS和JavaScript创建画布外菜单。要初步了解我们将要构建的内容，请查看相关的CodePen演示（查看 更大的版本 以获得更好的体验）：SeethePen Off-CanvasMenuWithCSSandaTouch...

如何手动编码 SVG

可缩放矢量图形的一大优点（除了它们可以无限缩放而不会损失质量）是，一旦您了解了基本原理，您就可以很容易地手动编写简单的形状，而无需打开图形应用程序。 只需几行代码，您就可以拥有自己的自定义图标，并且您将确切地知道每个图标是如何组合在一起的。当您创建自己的SVG时，您可以确保以最有效的方式编写它们，并且在您的站点中使用它们时拥有最大程度...

SVG 中剪辑和遮罩的综合指南

剪切和遮罩是SVG的一项功能，它能够通过使用简单或复杂的形状来完全或部分隐藏对象的某些部分。多年来，许多开发人员已经掌握了这些能力，并将它们推向了各个方向。在本文中，我们将了解一些高级方法以及展示剪辑和遮罩效果的演示。让我们开始吧！什么是剪辑？什么是掩蔽？我们先回答这个问题：裁剪和遮罩有什么区别？为了更好地理解，我们将逐一研究。请注意，虽然规范...

如何使用纯 CSS 在浏览器中应用 Instagram 过滤器

欢迎来到另一个EnvatoTuts+快速提示；在今天的视频中，我们将讨论Instagram过滤器。如果您是Instagram用户（可能即使您不是），您会知道它为您提供了各种不同的过滤器，您可以将这些过滤器应用于您正在上传的照片。如今，您可以在浏览器中使用CSS实现类似的结果。让我们来看看！截屏Instagram.cssInstag...

如何使用 CSS 和一点 JavaScript 构建响应式标签组件

在本教程中，我们将学习如何使用CSS和一些JavaScript构建响应式标签组件。完全可以创建纯CSS选项卡组件，但是对于这个示例，让我们将JavaScript技能付诸实践。这是我们将要构建的内容，分几个大步骤：SeethePen HowtoBuildaResponsiveTabComponent...

CSS 网格布局：快速入门

我们在Web上处理布局的方式正在发生变化，而最前沿的是CSS网格布局。这个快速入门的CSS网格教程将跳过细节和细微差别，而是帮助您立即陷入困境。CSS网格布局和你的浏览器CSS网格布局（它的朋友们称之为“网格”）在过去几年里取得了长足的发展，因此你会发现现在浏览器对它的支持非常可靠。 术语最简单的这些指南或网格线，框架水平和...

如何使用 JavaScript 鼠标事件制作多预览缩略图

在本教程中，我们将通过构建一些有用且有趣的东西来享受JavaScript鼠标事件的乐趣：缩略图，当鼠标悬停在上面时，会显示一系列不同的电子书。这是我们要构建的演示（在每个缩略图上移动鼠标）：SeethePen HowtoMakeMulti-PreviewThumbnailsWithJavaScriptMous...