关于 CSS 我们是不是已经走得太远?

医疗AI Agent实战:从零搭建一个能看病的智能助手(附完整代码) 本文详细介绍了如何从零搭建一个医疗AI Agent智能助手,涵盖核心架构设计、症状推理引擎开发、安全与合规实现以及系统集成等关键环节。通过完整的代码示例和实战案例,帮助开发者快速构建具备医疗咨询能力的智能Agent,提升医疗服务的效率和质量。 阅读详情

CSS 是了不起的技术,我第一次用到的时候,觉得这是我做梦都想不到的东西,随着 CSS3 的引入,圆角,阴影,旋转等等技术更将 CSS 带到前所未有的高度。然而,关于 CSS,我们是不是已经走得太远,本文以一个 Web 设计师的角度对 CSS 的一些实验性应用做了另一种思考。

那些有关 CSS 的前卫实验

几个月前,作者在 Six Revisions 发表了一篇文章,介绍了 5 个有趣的 CSS 实验:

每个实验都是用了不同的方法,其中一些,如 CSS 线图,在现实中可以找到实际的应用,其它的,如 CSS 实现的 Twitter Fail Whale 图画 ,则纯属实验,这些实验的目的仅仅为了说明 CSS 能够实现的效果,并不意味着应当这样来做。

让我们实际一点

Social media icons created entirely with CSS

上图是用纯 CSS 实现的社会媒体网络标志,很神奇不是?

我最近读了 Faruk Ateş 的文章,Pure CSS Icons: Make The Madness Stop ,文中对这一做法提出了质疑,作者表示,一些人开始尝试将 CSS 当作设计工具并迅速引发大量效仿,然而,这种做法有多少易用性可言?它并不容易集成到你的设计与开发当中,也不容易调整。

就像上面的完全基于 CSS 的社会网络标志,无非是一堆各式各样的线条的组合,固然令人印象深刻,也算有创意,但并不实用,因为创作这样一个标志可能需要几个小时的艰辛劳动,在 Photoshop 中画一个同样的图根本不费任何力气,而且效果更好(更细腻)。

Ateş 认为,这种方式生成的图标的可维护性也很成问题,调整一个图标原本只需要调整像素,现在却需要修改 CSS 定义,同时,上述 CSS 标志的设计者 Nicolas Gallagher 也表示,做这类事情,CSS 并非最适合。

降低 HTTP 请求?

These icons are created entirely using CSS

上面这幅图中的图标全部用 CSS 生成,而且作者将它们拿出来卖,40个图标卖25美金。不得不承认,这些图标设计得非常漂亮,作者设计这些 CSS 的初衷是为那些使用的网站降低 HTTP 请求数,因为这些图标不需要额外的图片文件请求。然而,一个小小的图标文件带来的 HTTP 请求真的很值得一提吗,何况,使用 CSS Sprite 技术,这些图标完全可以放在同一个图片中,靠 CSS 定位显示,这样,只需要一个 HTTP 请求就够了。而且,我实在怀疑,这些 CSS 版的图标到底能减少多少带宽。

本着语义化的精神

必须承认,我有时候会为了实现某种视觉上的需要,而额外使用 DIV 或 SPAN 等标签,这很不语义。然而 CSS 绘图是更不语义的事,CSS 的真实使命是对网页中的内容进行修饰,而不是创建内容本身。网页中的图形本身属于内容的范畴,不应该由 CSS 创建。

本文原文来源:blog.echoenduring.com Are We Taking CSS Too Far? (原文作者:Matt Ward )

中文节译来源:锐商企业CMS 网站内容管理系统 官方网站

团结引擎+OpenHarmony 2实战篇:从零构建鸿蒙应用开发环境 本文详细介绍了如何从零开始构建鸿蒙应用开发环境,重点讲解了团结引擎与OpenHarmony 2的实战配置步骤。内容包括DevEco Studio安装、OpenHarmony SDK配置、团结引擎集成及项目创建等关键环节,帮助开发者快速搭建高效的开发环境,提升鸿蒙应用开发效率。 阅读详情

相关推荐

UReport2 报表设计器 在线表格

UReport2官网 一、UReport2报表设计器 UReport2是一个开源的可视化报表设计器,功能强大,操作简单,可以实现复杂的报表统计,有各种各样的导出和打印功能,支持导入Excel表格! 1、报表设计器 2、设计一个简单的用户列表展示 二、可编辑表格 扩展了layui的表格,支持多元化数据编辑(单选,多些、日期、下拉联动),开发简单、高效、便捷。有了它就可以轻松开发类似进销存系统的表格录入功能了,用户拿来即用! 三、主从表录......

ejinxian的专栏 2万+

css徽章

徽章 css

qq_43307235的博客 485

AUTOSAR BswM配置实战:手把手教你用Vector Davinci Configurator搭建第一个模式管理规则

本文详细介绍了如何使用Vector Davinci Configurator工具配置AUTOSAR BswM模块,实现车身控制ECU的模式管理规则。通过实战案例,从环境准备、核心概念梳理到具体配置步骤,包括ModeRequestPort、ModeCondition、Logical Expression和Rules的构建,帮助工程师快速掌握BswM配置技巧,提升汽车电子软件开发效率。

weixin_28678831的博客 354

cssli文字隔得太远_css样式里li列表里 文字间距怎么设置?

body { font-family:Verdana; font-size:14px; margin:0;}#indexx {margin:0 auto; width:900px;}#headx { height:100px; background:red; margin-bottom:3px;}#ok { height:30px; background:#09c; margin-top:3px;...

weixin_42311530的博客 805

STM32H743IIT6上LVGL移植实战:从零到触摸屏驱动的完整配置流程

本文详细记录了在STM32H743IIT6高性能MCU上,从零开始移植LVGL图形库到7寸RGB触摸屏的完整实战流程。内容涵盖工程搭建、显示与触摸驱动配置、LVGL核心优化及常见问题排查,重点讲解了如何利用STM32H743的硬件特性(如DMA2D、LTDC)提升GUI性能,为嵌入式GUI开发提供了一份详实的配置指南。

spark7igniter的博客 563

三维重建之条纹投影结构光(三)——相位展开优化与多频外差实践

本文深入探讨了三维重建中条纹投影结构光技术的核心环节——相位展开优化。针对传统路径跟踪法存在的误差传播与路径依赖问题,重点解析了多频外差法的原理与优势,并通过详细的C++代码实践,展示了如何利用三频外差法实现鲁棒、高精度的相位展开,从而获得连续的绝对相位图,为后续三维点云生成奠定坚实基础。

weixin_29074295的博客 533

css表格文字位置调整,word表格中的文字距离表格四周太远,怎么才能调的近一些,除了调字大小。...

word表格中的文字距离表格四周太远,怎么才能调的近一些,除了调字大小。以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!word表格中的文字距离表格四周太远,怎么才能调的近一些,除了调字大小。选中要调整的单元格或者全部,右键——表格属性——单元格——选项,去掉“与整张表格相同”前的钩,将左、右值调小一点或者改成0CSS中...

weixin_42347415的博客 1677

Calibre LVS效率翻倍秘籍:用Hierarchical Flow处理亿级晶体管设计的5个关键阶段

本文详细解析了如何利用Hierarchical Flow技术提升Calibre LVS在亿级晶体管SoC设计中的验证效率。通过五个关键阶段的分层验证流程,包括顶层抽象验证、模块级独立验证等,可显著降低内存占用40-60%,缩短迭代周期50-70%,特别适用于SMIC等先进工艺节点。文章还分享了算力资源优化、并行化处理等实战技巧,帮助工程师应对大规模芯片验证挑战。

sam99的博客 770

markdown 右侧的标题栏离浏览器的边界太远了,怎么办?

markdown 右侧的标题栏离浏览器的边界太远了(文章内的右侧标题栏占用太多空间,占用了正文的浏览效果) 怎样调整右侧标题栏的大小,求助,

m0_58438075的博客 175

RK3568平台开发系列讲解(外设篇)CAN的使用

📢 本篇章带大家快速了解CAN的使用。

内核笔记 2353

RK3568平台开发系列讲解(项目篇)手写数字识别

📢 本篇章带大家基于飞桨(PaddlePaddle),完成一个简单的手写数字识别任务。

内核笔记 1183

令人难以置信的纯 CSS3 图标

尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标,那么微妙的色彩与纹理,真的难以置信。

COMSHARP CMS 专栏 4万+

最新Python爬虫实战(入门爬虫篇)——案例13:某乎热榜数据采集(详细爬虫思路截图+抓包动图演示+完整爬虫代码+详细注释)

本次案例通过Python爬虫技术,成功实现了基于Cookies认证的某乎热榜数据爬取与Excel保存。代码采用模块化设计,包含Cookies解析、HTML请求、结构化解析、Excel持久化等完整流程;通过配置浏览器请求头+Cookies认证,有效突破某乎基础反爬策略,保证请求稳定性。整个爬虫逻辑遵循“Cookies认证 → 页面请求 → HTML解析 → 数据清洗 → 保存到Excel”的标准流程,与需要会话验证的网站爬取范式高度一致。Cookies解析与认证。

努力让自己发光,对的人才能迎着光而来 33万+

前端是不是没有地位?

最近的,最远的最近,或者说在过去的几个月里,我与几个前端同事,一直在讨论一个话题:『作为一个前端开发人员,我们面临怎样的困境?又该如何去解决?』。 而在较老的一次历史讨论(可能是在 6 小时以前)里,我便想重新理清...

clhq71932的博客 193

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

CSS3--perspective属性

CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持,IE10支持。 只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单: 只能选择透视方式,也就是近大远小的显示方式。镜头方向只能是平行Z轴向屏幕内,也就是从屏幕正前方向里看。可以调整镜头与平面位置: a) perspective属性

u012038144的专栏 1万+

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

css块网格,css 网格

创建css网格将任何HTML元素的display属性设置为grid,即可将其变成网格容器。这使您能够使用与CSS Grid关联的所有其他属性。注意:在CSS Grid中,父元素称为容器,其子元素称为items。将container类的div的显示更改为grid。.container {font-size: 40px;100%;background: LightGray;/* Only change...

weixin_34508497的博客 177

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

CSS3 perspective 属性

CSS3 perspective 属性 语法 perspective: number|none; 值 描述 number 元素距离视图的距离,以像素计。 none 默认值。与 0 相同。不设置透视。 实例 设置元素被查看位置的视图: #div1 { position: rela

ssisse的博客 3932

WebPack打包CSS文件

来看看都需要甚麽为甚麽要准备这些?一、建立并配置文件webpack.config.js1.所需loader的安装2.引入NodeJS模块获取绝对路径2.module exports对象内部配置二、开始打包CSS文件总结 为甚麽要准备这些? WebPack无法解析CSS代码,我们需要安装loader(loader负责完成WebPack无法完成的那部分工作,以便WebPack的工作能进行下去.)来辅助WebPack完成这项工作. 我默认您已经安装好了Node & WebPack & Webpa

白瑕 的博客 1002

写出完美CSS代码的5个重要方面

每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。我在博客中也一直与大家讨论,学习CSS编码与CSS技巧。但是CSS还 可以更好吗?开始用这5个Tips改进你的CSS吧! 一、关于 CS...

weixin_39037804的博客 96

快速写出较好CSS的5种方法

1. Reset<br />Photo by redux<br />真的,要一直使用一个reset ,无论是使用Eric Meyer Reset 、YUI Reset 、或者你自己的定制的reset,一定要使用。<br />这可以简单到仅仅将所有元素中的margin和padding属性去掉:html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table

尝试坚持 999

CSS Frameworks的概念

最近看到N多介绍CSS框架,前些天我说过一句话:“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”,当然也可能是我的视野太小了,或者是说世界太大了,我自己还是感觉还有一大堆我看不到的东西。 先来看一下一个我比较认同的概念: 框架可分为白盒(White-Box)与黑盒(Black-Box)两种框架。 基于继承的框架被称为白盒框架。所谓白盒即具备可视性,被继承的父类的内部...

justJavaC的专栏 225

css网页布局_儿童网页设计:CSS布局

欢迎来到我们的儿童网页设计系列CSS布局的第六课! 在这里,我们将所有元素准确地放置在屏幕上所需的位置。 为此,我们将同时添加HTML和CSS文件。 为了提醒自己, 请看一下我们正在建立的网站 。 您可以在这里下载本课程的文件,并且不要忘记在本页底部的“评论”部分中提出任何问题。 开始之前 在进入布局之前,我们需要了解几件事。 在第一部分中,我们将研究如何保持井井有条。 我们将介绍...

Web design 教程小屋 443

css和div的使用吗,包含div和div的CSS?

我在CSS中找不到我的错误。我想创建的两个按钮应该有5px的余量。但按钮太远了。我的错误在哪里?.box{background-color: #dcdcdc;border:;border-radius: 15px;padding: 5px;margin-right:5%;margin-left:auto;margin-top: 10%;min-width: 50%;max-height: 60%;...

weixin_42347660的博客 167

css grid_为什么显示:内容不是CSS Grid Layout子网格

css gridYou won’t get far through a conversation about subgrid in CSS Grid Layout without someone suggesting that display: contents solves most of the problems anyway, so do we really need subgrid? Th...

cundai5745的博客 437
上一篇: 数据之美(十一):30 套 Infographics 作品欣赏
下一篇: 令人难以置信的纯 CSS3 图标
comsharp
博客等级 码龄20年 1475粉丝 41原创
评论 22
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值