《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)

在这里插入图片描述

文章目录

  • 6.1 使用 CSS 变量进行设计:魔法配方的调配
    • 6.1.1 基础知识
    • 6.1.2 重点案例:创建可定制的主题
    • 6.1.3 拓展案例 1:响应式字体大小
    • 6.1.4 拓展案例 2:使用 CSS 变量创建动态阴影效果
  • 6.2 calc(), min(), max() 等函数的应用:数学魔法的妙用
    • 6.2.1 基础知识
    • 6.2.2 重点案例:响应式容器大小
    • 6.2.3 拓展案例 1:动态字体大小
    • 6.2.4 拓展案例 2:复杂布局中的间距调整
  • 6.3 CSS Blend Modes 和滤镜效果:视觉艺术的魔法
    • 6.3.1 基础知识
    • 6.3.2 重点案例:创建具有混合背景的横幅
    • 6.3.3 拓展案例 1:使用滤镜创建黑白照片效果
    • 6.3.4 拓展案例 2:动态模糊效果

6.1 使用 CSS 变量进行设计:魔法配方的调配

在网页设计的炼金术中,CSS变量是那些能让我们随心所欲调配样式配方的神奇原料。就像在一瓶魔法药水中加入不同的草药会产生不同的效果一样,使用CSS变量可以让我们轻松地在整个网站中统一和修改样式。让我们深入了解这项技术,探索如何将其应用到我们的网页设计中。

6.1.1 基础知识

  • CSS变量定义:CSS变量,也称为“自定义属性”,在根元素(:root)或任何元素上定义,使用--前缀,如 --main-color: #333;
  • CSS变量使用:使用var()函数来引用变量,例如 color: var(--main-color);
  • 作用域:变量可以在定义它们的元素内部及其子元素中使用。在:root中定义的变量可以全局使用。
  • 回退值var()函数允许定义一个回退值,以便在变量未定义时使用,如color: var(--main-color, black);

6.1.2 重点案例:创建可定制的主题

假设你正在设计一个支持暗模式和亮模式的网站,你可以使用CSS变量来轻松切换主题。

  • CSS 样式
:root {--background-color: white;--text-color: black;
}[data-theme="dark"] {--background-color: black;--text-color: white;
}body {background-color: var(--background-color);color: var(--text-color);
}

通过简单切换data-theme属性,我们可以在亮模式和暗模式之间切换,无需修改大量CSS代码。

6.1.3 拓展案例 1:响应式字体大小

随着设备屏幕尺寸的变化,我们可能希望字体大小也相应调整,以提升阅读体验。

  • CSS 样式
:root {--base-font-size: 16px;
}@media (max-width: 768px) {:root {--base-font-size: 14px;}
}body {font-size: var(--base-font-size);
}

通过在不同的媒体查询中调整--base-font-size变量,我们可以实现响应式的字体大小调整。

6.1.4 拓展案例 2:使用 CSS 变量创建动态阴影效果

动态阴影效果可以给网页添加一些微妙的交互感。

  • HTML 结构
<div class="dynamic-shadow">悬停我</div>
  • CSS 样式
.dynamic-shadow {--shadow-size: 5px;box-shadow: var(--shadow-size) var(--shadow-size) 10px #ccc;transition: --shadow-size 0.3s ease;
}.dynamic-shadow:hover {--shadow-size: 10px;
}

通过改变--shadow-size变量的值,我们可以在元素悬停时创建一个动态的阴影扩展效果。

通过这些案例,我们可以看到CSS变量在网页设计中的强大作用。它们不仅使主题定制和样式调整变得轻而易举,还可以增强我们网站的交互性和视觉吸引力。掌握了CSS变量的使用,就等于拥有了一瓶能够调配出无数魔法效果的万能药水。继续探索和实验这些“魔法配方”,让你的网站在众多网页中独树一帜吧!

在这里插入图片描述


6.2 calc(), min(), max() 等函数的应用:数学魔法的妙用

在CSS的世界里,calc(), min(), max() 等函数就像是一把能够解决各种布局难题的瑞士军刀。这些函数让我们能够直接在样式表中进行数学计算,从而以一种更灵活和动态的方式来控制元素的大小、位置和间距等。让我们一起探索这些数学魔法的妙用,看看如何将它们应用到实际的网页设计中。

6.2.1 基础知识

  • calc()函数:允许在表达式中执行计算,可以使用加 (+), 减 (-), 乘 (*), 除 (/) 运算符,支持混合使用不同的单位。
  • min()函数:接受一组值作为参数,返回其中的最小值,非常适合用于响应式设计中。
  • max()函数:与min()相反,它返回一组值中的最大值,同样适合用于响应式设计。

6.2.2 重点案例:响应式容器大小

设计一个容器,它的宽度应该适应不同屏幕尺寸,但需要有一个最小和最大宽度限制。

  • CSS 样式
.container {width: clamp(300px, 50%, 800px);
}

这里我们使用了clamp()函数,它其实是min()max()的结合体,确保容器的宽度在300px和800px之间,同时宽度会动态地调整为视口宽度的50%。

6.2.3 拓展案例 1:动态字体大小

为了改善在不同设备上的阅读体验,我们希望文字大小能根据视口宽度动态调整,同时有最小和最大字体大小的限制。

  • CSS 样式
.text {font-size: clamp(1rem, 2vw + 1rem, 2rem);
}

使用clamp()函数,我们可以让字体大小在1rem和2rem之间动态变化,根据视口宽度自适应,提供更好的阅读体验。

6.2.4 拓展案例 2:复杂布局中的间距调整

假设你有一个复杂的布局,需要根据容器大小动态调整内部元素的间距。

  • CSS 样式
.item {margin: calc(5% + 10px);
}

通过calc()函数,我们可以基于容器的宽度百分比加上一个固定的间距值来动态调整元素的外边距,使布局在不同屏幕尺寸下都保持良好的视觉效果。

这些数学函数为CSS提供了前所未有的灵活性和动态性,使得响应式设计和复杂布局调整变得更加简单和直观。通过合理应用calc(), min(), max()等函数,我们可以更精确地控制网页元素的样式,创造出既美观又实用的网页设计。记住,这些工具虽然强大,但使用时也需要考虑到性能和兼容性。现在,让我们拿起数学魔法的工具,为我们的网页设计添上一抹亮色吧!

在这里插入图片描述


6.3 CSS Blend Modes 和滤镜效果:视觉艺术的魔法

在CSS的调色板中,混合模式(Blend Modes)和滤镜(Filters)是那些能够让你的网页从简单的布局转变为视觉艺术品的神奇工具。它们为我们提供了在网页上直接应用复杂视觉效果的能力,无需借助图像编辑软件。让我们深入探索如何使用这些工具来增强你的网站设计。

6.3.1 基础知识

  • 混合模式(Blend Modes):控制两个元素的颜色如何混合显示。常见的混合模式包括 multiply(正片叠底)、screen(滤色)、overlay(叠加)等。
  • 滤镜(Filters):应用于元素上的图形效果,如模糊(blur)、亮度(brightness)、对比度(contrast)等。
  • 应用方式:混合模式通常应用于 background-blend-modemix-blend-mode 属性,滤镜则通过 filter 属性应用。

6.3.2 重点案例:创建具有混合背景的横幅

假设你想设计一个网站横幅,其中包含一张图片和一个半透明的颜色层,通过混合模式增强视觉效果。

  • HTML 结构
<div class="banner"><img src="background.jpg" alt="Banner Background"><div class="overlay"></div>
</div>
  • CSS 样式
.banner {position: relative;
}.banner img {width: 100%;height: auto;
}.overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255, 0, 0, 0.5);mix-blend-mode: multiply;
}

通过设置 .overlaymix-blend-modemultiply,红色半透明层与背景图片混合,创造出丰富的视觉效果。

6.3.3 拓展案例 1:使用滤镜创建黑白照片效果

让网页上的彩色照片以黑白形式展示,增加复古感。

  • CSS 样式
.grayscale-photo {filter: grayscale(100%);
}

通过 filter: grayscale(100%);,可以将图片转换为黑白,为网站添加一种复古的视觉风格。

6.3.4 拓展案例 2:动态模糊效果

设计一个动态模糊背景的登录表单,当用户聚焦在输入框时,背景模糊,突出表单内容。

  • HTML 结构
<div class="blur-background"><form class="login-form"><!-- 表单内容 --></form>
</div>
  • CSS 样式
.blur-background {filter: blur(0);transition: filter 0.5s ease;
}.login-form:focus-within ~ .blur-background {filter: blur(5px);
}

当表单获得焦点时,.blur-background 应用 blur(5px) 滤镜,使背景模糊,从而聚焦用户的注意力到表单上。

混合模式和滤镜效果为网页设计师提供了强大的视觉表达工具。它们可以用来创造吸引人的视觉效果,增加用户的参与感和情感反应。通过灵活运用这些CSS特性,你的网站可以脱颖而出,为用户提供独一无二的浏览体验。记得,虽然这些工具强大,但在使用时也需要注意不要过度使用,保持网站的专业性和易用性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/679247.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【CTFshow】VIP题目限免 通关

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

我主编的电子技术实验手册(03)——电阻的识别与测量

本专栏是笔者主编教材&#xff08;图0所示&#xff09;的电子版&#xff0c;依托简易的元器件和仪表安排了30多个实验&#xff0c;主要面向经费不太充足的中高职院校。每个实验都安排了必不可少的【预习知识】&#xff0c;精心设计的【实验步骤】&#xff0c;全面丰富的【思考习…

AI大模型学习笔记之四:生成式人工智能(AIGC)是如何工作的?

OpenAI 发布 ChatGPT 已经1年多了&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;也已经广为人知&#xff0c;我们常常津津乐道于 ChatGPT 和 Claude 这样的人工智能系统能够神奇地生成文本与我们对话&#xff0c;并且能够记忆上下文情境。 Midjunery和DALLE 这样的AI…

随机过程及应用学习笔记(一)概率论(概要)

概率是随机的基础&#xff0c;在【概率论&#xff08;概要&#xff09;】这个部分中仅记录学习随机过程及应用的基本定义和结果。 前言 首先&#xff0c;概率论研究的基础是概率空间。概率空间由一个样本空间和一个概率测度组成&#xff0c;样本空间包含了所有可能的结果&…

服务器解析漏洞及任意文件下载

1.服务器文件解析漏洞 文件解析漏洞,是指Web容器&#xff08;Apache、nginx、iis等&#xff09;在解析文件时出现了漏洞,以其他格式执行出脚本格式的效果。从而,黑客可以利用该漏洞实现非法文件的解析。 &#xff08;1) Apache linux系统中的apache的php配置文件在/etc/apac…

【数据结构】顺序栈和链式栈的简单实现和解析(C语言版)

数据结构——栈的简单解析和实现 一、概念二、入栈&#xff08;push&#xff09;三、出栈&#xff08;pop&#xff09;四、顺序栈简单实现 &#xff08;1&#xff09;进栈操作&#xff08;2&#xff09;出栈操作 一、概念 本篇所讲解的栈和队列属于逻辑结构上的划分。逻辑结构…

综合项目---博客

一.运行环境 192.168.32.132 Server-Web linux Web 192.168.32.133 Server-NFS-DNS linux NFS/DNS 基础配置 1.配置主机名静态ip 2.开启防火墙并配置 3.部分开启selinux并配置 4.服务器之间通过阿里云进行时间同步 5.服务器之间实现ssh免密…

SpringCloud-Ribbon:负载均衡(基于客户端)

6. Ribbon&#xff1a;负载均衡(基于客户端) 6.1 负载均衡以及Ribbon Ribbon是什么&#xff1f; Spring Cloud Ribbon 是基于Netflix Ribbon 实现的一套客户端负载均衡的工具。简单的说&#xff0c;Ribbon 是 Netflix 发布的开源项目&#xff0c;主要功能是提供客户端的软件负…

MMKV:轻巧高效的跨平台键值存储解决方案

MMKV&#xff1a;轻巧高效的跨平台键值存储解决方案 引言 在移动应用的开发中&#xff0c;数据存储是一个至关重要的环节。随着移动应用的普及和功能的增多&#xff0c;应用需要存储和管理各种类型的数据&#xff0c;包括用户配置信息、缓存数据、临时状态等。传统的数据存储…

python巧用定理判断素数

目录 判断一个数n是否是素数 求一个数的素因数个数 求大于等于指定数的最小素数 在数论中有三个非常重要的关于素数的定理 1、任何数都可以表示成若干个素数的乘积 2、任意数的一个素因子如果小于根号n&#xff0c;那么另一个与其对应的素因子必然大于根号n。 3、除了2和…

浅谈应该遵守的伦敦银交易规则

做伦敦银投资的朋友应遵守伦敦银交易规则&#xff0c;伦敦银交易规则不是指那些伦敦银交易技巧&#xff0c;而是在这个市场中要遵循的一些约定&#xff0c;下面我们就来讨论一下。 风险管理。风险管理即指投资者控制自己一笔乃至整体交易的风险&#xff0c;没有风险管理意识的投…

JavaSE——方法(1/2)-介绍、方法的各种形式、使用的要求

目录 方法的介绍 方法的其他形式 方法使用的要求 方法的介绍 方法是什么 方法是一种语法结构&#xff0c;它可以把一段代码封装成一个功能&#xff0c;以便重复调用。 方法的完整格式 修饰符 返回值类型 方法名 ( 形参列表 ) { 方法体代码(需要执行的功能代码) return…

OpenCV-36 多边形逼近与凸包

目录 一、多边形的逼近 二、凸包 一、多边形的逼近 findContours后的轮廓信息countours可能过于复杂不平滑&#xff0c;可以用approxPolyDP函数对该多边形曲线做适当近似&#xff0c;这就是轮廓的多边形逼近。 apporxPolyDP就是以多边形去逼近轮廓&#xff0c;采用的是Doug…

面试经典150题——三数之和

​"The road to success and the road to failure are almost exactly the same." - Colin R. Davis 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力方法 因为三个数相加为0&#xff0c;那么说明其中两个加数的和与另一个加数为相反数则满足题意。所以可以得到…

ClickHouse时区

clickhouse数据库的时间是UTC时间。服务器默认的是上海时间。 sudo vim /etc/clickhouse-server/config.xml clickhouse默认的时区是注释的就是UTC时间 %F 表示日期&#xff0c;格式为 YYYY-MM-DD。%T 表示时间&#xff0c;格式为 HH:MM:SS。 因此&#xff0c;formatDateT…

主干网络篇 | YOLOv5/v7 更换主干网络为 VGG13 / VGG16 / VGG19 | 对比实验必备

论文地址:https://arxiv.org/pdf/1409.1556.pdf 在这项工作中,我们研究了卷积网络深度对其在大规模图像识别环境中准确性的影响。我们的主要贡献是对使用非常小(33)卷积滤波器的架构的不断增加深度的网络进行了彻底评估,这表明通过将深度推进到16-19个权重层,可以在先前…

第72讲后台管理Container布局实现

新建layout目录 登录成功后&#xff0c;跳转layout布局容器页面 login页面&#xff1a; 导入router import router from "/router";登录成功&#xff0c;跳转后台管理页面 选用布局容器&#xff1a; <template><div class"common-layout">…

javaweb物业管理系统jsp项目

文章目录 物业管理系统一、系统演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目源码&#xff08;9.9&#xffe5;带走&#xff09; 物业管理系统 可用作javaweb项目、servlet项目、jsp项目的项目设计 一、系统演示 物业管理系统 二、项目介绍 语言&a…

Vue3中Setup概述和使用(三)

一、引入Setup 1、Person.Vue 与Vue3编写简单的App组件(二) 中的区别是&#xff1a;取消data、methods等方法,而是将数据和方法定义全部放进setup中。 <template><div class"person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h…

Acwing---839. 模拟堆

模拟堆 1.题目2.基本思想3.代码实现 1.题目 维护一个集合&#xff0c;初始时集合为空&#xff0c;支持如下几种操作&#xff1a; I x&#xff0c;插入一个数 x&#xff1b;PM&#xff0c;输出当前集合中的最小值&#xff1b;DM&#xff0c;删除当前集合中的最小值&#xff08…