《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.kler.cn/a/235064.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ STL string类使用及实现详解

1. string简介 C语言中&#xff0c;可以用字符数组来存储字符串&#xff0c;如&#xff1a; char ch[] "hello world"; C中&#xff0c;可以使用string类对象来存储字符串&#xff0c;使用起来比C语言中的字符数组要方便得多&#xff0c;而且不用考虑容量的问题。…

第73左侧菜单实现

layout下面新建menu layout index.vue导入menu import Menu from /views/layout/menu菜单实现&#xff1a; <template><el-menuactive-text-color"#ffd04b"background-color"#2d3a4b"class"el-menu-vertical-demo"default-active&quo…

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

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

Spring Native 解放 JVM

一、Spring Native 是什么 Spring Native可以通过GraalVM将Spring应用程序编译成原生镜像&#xff0c;提供了一种新的方式来部署Spring应用。与Java虚拟机相比&#xff0c;原生镜像可以在许多场景下降低工作负载&#xff0c;包括微服务&#xff0c;函数式服务&#xff0c;非常…

分布式缓存

分布式缓存 – 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 0.学习目标 1.Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xf…

Qt中程序发布及常见问题

1、引言 当我们写好一个程序时通常需要发布给用户使用&#xff0c;那么在Qt中程序又是如何实现发布的呢&#xff0c;这里我就来浅谈一下qt中如何发布程序&#xff0c;以及发布程序时的常见问题。 2、发布过程 2.1、切换为release模式 当我们写qt程序时默认是debug模式&#x…

【原创 附源码】Flutter安卓及iOS海外登录--Facebook登录最详细流程

最近接触了几个海外登录的平台&#xff0c;踩了很多坑&#xff0c;也总结了很多东西&#xff0c;决定记录下来给路过的兄弟坐个参考&#xff0c;也留着以后留着回顾。更新时间为2024年2月12日&#xff0c;后续集成方式可能会有变动&#xff0c;所以目前的集成流程仅供参考&…

unity学习案例总结

动态标签 GitHub - SarahMit/DynamicLabel3D: Simple dynamic labels for a 3D Unity scene

案例:CentOS8 在 MySQL8.0 实现半同步复制

异步复制 MySQL 默认的复制即是异步的&#xff0c;主库在执行完客户端提交的事务后会立即将结果返给给客户端&#xff0c;并不关心从库是否已经接收并处理&#xff0c;这样就会有一个问题&#xff0c;主节点如果 crash 掉了&#xff0c;此时主节点上已经提交的事务可能并没有传…

c语言求多边形面积

多边形有现成的面积公式&#xff0c;直接套用即可。area函数接受两个参数&#xff1a;顶点坐标&#xff0c;顶点个数。 #include <stdio.h> #include <math.h>struct point {int x;int y; };float area(point p[], int n) {int i;float sum 0.0;for (i 0; i <…

labelImg和labelme区别

LabelImg和LabelMe是两种常用的标注工具&#xff0c;用于创建标注数据集以供机器学习和计算机视觉任务使用。虽然它们都具有相似的目标&#xff0c;即方便用户进行图像标注&#xff0c;但在某些方面存在一些区别。下面将介绍LabelImg和LabelMe的区别及联系&#xff0c;同时提供…

Win10截图的四种方式

截图不一定要依靠通讯软件&#xff0c;现在系统自己就带有这些功能。 1.Win Shift S组合键&#xff1a;选择微信截图&#xff0c;部分截图&#xff0c;随心所欲&#xff1b; 2.Win W组合键&#xff1a;呼出屏幕右侧的工作区&#xff0c;选择屏幕草图&#xff0c;支持裁剪、编辑…

Java基础:值传递和引用传递

Java在给方法传递参数时&#xff0c;有值传递和引用传递两种方式。 基本概念 值传递&#xff1a;传递对象的一个副本&#xff0c;即使副本被改变&#xff0c;也不会影响源对象&#xff0c;因为值传递的时候&#xff0c;实际上是将实参的值复制一份给形参。 引用传递&#xf…

【C语言】C的整理记录

前言 该笔记是建立在已经系统学习过C语言的基础上&#xff0c;笔者对C语言的知识和注意事项进行整理记录&#xff0c;便于后期查阅&#xff0c;反复琢磨。C语言是一种面向过程的编程语言。 原想在此阐述一下C语言的作用&#xff0c;然而发觉这些是编程语言所共通的作用&#…

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…

第三节 zookeeper基础应用与实战2

目录 1. Watch事件监听 1.1 一次性监听方式&#xff1a;Watcher 1.2 Curator事件监听机制 2. 事务&异步操作演示 2.1 事务演示 2.2 异步操作 3. Zookeeper权限控制 3.1 zk权限控制介绍 3.2 Scheme 权限模式 3.3 ID 授权对象 3.4 Permission权限类型 3.5 在控制台…

springboot181基于springboot的乐享田园系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

【AIGC风格prompt深度指南】掌握绘画风格关键词,实现艺术模仿的革新实践

[小提琴家]ASCII风格&#xff0c;点&#xff0c;爆炸&#xff0c;光&#xff0c;射线&#xff0c;计算机代码 由冰和水制成的和平标志]非常详细&#xff0c;寒冷&#xff0c;冰冻&#xff0c;大气&#xff0c;照片逼真&#xff0c;流动&#xff0c;16K 胡迪尼模拟火和水&#x…

Visual Studio使用Git忽略不想上传到远程仓库的文件

前言 作为一个.NET开发者而言&#xff0c;有着宇宙最强IDE&#xff1a;Visual Studio加持&#xff0c;让我们的开发效率得到了更好的提升。我们不需要担心环境变量的配置和其他代码管理工具&#xff0c;因为Visual Studio有着众多的拓展工具。废话不多说&#xff0c;直接进入正…

假期刷题打卡--Day26

1、MT1212乘法表 请编写一个简单程序&#xff0c;输出九九乘法表。输入n&#xff0c;就输出乘法表到n的地方。 格式 输入格式&#xff1a; 输入整型 输出格式&#xff1a; 输出整型。形式如&#xff1a;1*11 样例 1 输入&#xff1a; 5输出&#xff1a; 1*11 2*12 …
最新文章