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

news/2024/4/23 13:40:58/文章来源:https://blog.csdn.net/qq_41340258/article/details/136093459

在这里插入图片描述

文章目录

  • 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.ldbm.cn/p/343311.html

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

相关文章

【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总

【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总 前言请看此正文预训练 Pre-Training无监督学习 unsupervised learning概念&#xff1a;标签PCA 主成分分析&#xff08;Principal Component Analysis&#xff09;降维算法LSA 潜在语义分析&#xff08;…

Github 2024-02-07 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-02-07统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Rust项目2TypeScript项目2Python项目2Ruby项目1HTML项目1NASL项目1Go项目1C项目1Svelte项目1C项目1 React Nat…

【MySQL】——数值函数的学习

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-Z1fAnfrxGD7I5gqp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

阿里云带宽计费模式怎么选?如何收费的?

阿里云服务器带宽计费模式分为“按固定带宽”和“按使用流量”&#xff0c;有什么区别&#xff1f;按固定带宽是指直接购买多少M带宽&#xff0c;比如1M、5M、10M、100M等&#xff0c;阿里云直接分配用户所购买的带宽值&#xff0c;根据带宽大小先付费再使用&#xff1b;按使用…

React Native开发iOS实战录

文章目录 背景环境准备基础工具&#xff1a;xcode安装主要工具安装CocoaPods 基本步骤采用Expo go运行iOS模拟器运行安装在真机上测试发布到苹果商店 原生模块与编译链接问题静态库和 Frameworkuse_frameworks!和use_modular_headers! 常见问题ruby3在macOS上编译失败import of…

bert-vits2本地部署报错疑难问题汇总

环境&#xff1a; bert-vits2.3 win 和wsl 问题描述&#xff1a; bert-vits2本地部署报错疑难问题汇总 解决方案&#xff1a; 问题1: Conda安装requirements里面依赖出现ERROR: No matching distribution found for opencc1.1.6 解决方法 需要在 Python 3.11 上使用 Op…

Stable Diffusion 模型下载:RealCartoon-Realistic - V13

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十

STM32 寄存器操作 GPIO 与中断

一、如何使用stm32寄存器点灯&#xff1f; 1.1 寄存器映射表 寄存器本质就是一个开关&#xff0c;当我们把芯片寄存器配置指定的状态时即可使用芯片的硬件能力。 寄存器映射表则是开关的地址说明。对于我们希望点亮 GPIO_B 的一个灯来说&#xff0c;需要关注以下的两个寄存器…

《CSS 简易速速上手小册》第8章:CSS 性能优化和可访问性(2024 最新版)

文章目录 8.1 CSS 文件的组织和管理8.1.1 基础知识8.1.2 重点案例&#xff1a;项目样式表结构8.1.3 拓展案例 1&#xff1a;使用BEM命名规范8.1.4 拓展案例 2&#xff1a;利用 Sass 混入创建响应式工具类 8.2 提高网页加载速度的技巧8.2.1 基础知识8.2.2 重点案例&#xff1a;图…

react中hook封装一个table组件 与 useColumns组件

目录 1&#xff1a;react中hook封装一个table组件依赖CommonTable / index.tsx使用组件效果 2&#xff1a;useColumns组件useColumns.tsx使用 1&#xff1a;react中hook封装一个table组件 依赖 cnpm i react-resizable --save cnpm i ahooks cnpm i --save-dev types/react-r…

多机多卡运行nccl-tests和channel获取

nccl-tests 环境1. 安装nccl2. 安装openmpi3. 单机测试4. 多机测试mpirun多机多进程多节点运行nccl-testschannel获取 环境 Ubuntu 22.04.3 LTS (GNU/Linux 5.15.0-91-generic x86_64)cuda 11.8 cudnn 8nccl 2.15.1NVIDIA GeForce RTX 4090 *2 1. 安装nccl #查看cuda版本 nv…

腾讯云4核8G服务器可以用来干嘛?怎么收费?

腾讯云4核8G服务器适合做什么&#xff1f;搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以&#xff0c;腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM&#xff0c;轻量服务器和标准型CVM服务器性能是差不多的&#xff0c;轻…

NAT——网络地址转换、NAPT

网络地址转换 NAT (Network Address Translation) 1994 年提出。 需要在专用网连接到互联网的路由器上安装 NAT 软件。 装有 NAT 软件的路由器叫做 NAT路由器&#xff0c;它至少有一个有效的外部全球 IP 地址。 所有使用本地地址的主机在和外界通信时&#xff0c;都要在 NA…

【MATLAB源码-第137期】基于matlab的NOMA系统和OFDMA系统对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 NOMA&#xff08;非正交多址&#xff09;和OFDMA&#xff08;正交频分多址&#xff09;是两种流行的无线通信技术&#xff0c;广泛应用于现代移动通信系统中&#xff0c;如4G、5G和未来的6G网络。它们的设计目标是提高频谱效…

【RT-DETR有效改进】计算训练好权重文件对应的FPS、推理每张图片的平均时间(科研必备)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的改进机制是利用我们训练好的权重文件计算FPS,同时打印每张图片所利用的平均时间,模型大小(以MB为单位),同时支持batch_size功能的选择,对于轻量化模型的读者来说,本文的内容对你一定有…

PE 特征码定位修改程序清单 uiAccess

requestedExecutionLevel level"asInvoker" uiAccess"false" 可以修改这一行来启用禁用原程序的盾牌图标&#xff0c;似乎作用不大。以前没事写的一个小玩意&#xff0c;记录一下。 等同于这里的设置&#xff1a; 截图 代码如下&#xff1a; #include …

跨境电商新风潮:充分发挥海外云手机的威力

在互联网行业迅速发展的大环境下&#xff0c;跨境电商、海外社交媒体营销以及游戏产业等重要领域都越来越需要借助海外云手机的协助。 特别是在蓬勃发展的跨境电商领域&#xff0c;像亚马逊、速卖通、eBay等平台&#xff0c;结合社交电商营销和短视频内容成为最有效的流量来源。…

Stable Diffusion 模型下载:majicMIX reverie 麦橘梦幻

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十

每日一练:LeeCode-654、最大二叉树【二叉树+DFS+分治】

本文是力扣LeeCode-654、最大二叉树【二叉树DFS分治】 学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其…

精品springboot疫苗发布和接种预约系统

《[含文档PPT源码等]精品基于springboot疫苗发布和接种预约系统[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#xff1a;…