用 css 做web图形化处理

简介: 图片来自 CHRIS COYIER 在前端开发中,你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容,为的就是更加熟悉了解它们,以便更好的使用它们。
img_b77a9f01248f2c125ae37fb845845b7f.jpe
图片来自 CHRIS COYIER

在前端开发中,你或多或少都会接触到css图形。之前我整理过 伪元素&伪类 的内容,为的就是更加熟悉了解它们,以便更好的使用它们。同时也也使用它一做了一些动画。 css3-animate

这里说的用css做图形,其实是使用一个html元素,结合它的伪元素 ::before & ::after (不需要其他额外的非伪元素的html元素),然后定义样式来生成所需的图形。

这里不是说不可以使用其它的html元素,只是这样的好处是在html方便引入,而不需要每次引入都需要添加大量的html片段(夸张说法)。

主要方法

可以使用的样式属性如下:

* border
* border-radius
* transform
* box-shadow

为了兼容性,使用pseudo-elements(::before, ::after) 和上面样式属性中的一种或几种随机组合。

当然,在前端我们经常使用的时svg和font-icon。

还用一种是css3的shape-outside实现文本环绕的效果。

这种单元素的css图形还是比较实用的。

图形分类

  1. 几何图形。如:三角形,正方形,矩形,平行四边形,五边形,六边形等
  2. 星形
  3. 卡通图形。如:吃豆人等
  4. 图标。 如:心形,箭头,锁,放大镜等。

具体的图形列表和代码可参考github

相关文章
|
1天前
|
前端开发
|
4天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
13天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
13天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
13天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
14天前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?
|
15天前
|
前端开发 容器
【Web 前端】css选择器有哪些?
【4月更文挑战第22天】【Web 前端】css选择器有哪些?
|
15天前
|
编解码 前端开发 开发者
【Web 前端】CSS常用尺寸单位有哪些?应用场景?
【4月更文挑战第22天】【Web 前端】CSS常用尺寸单位有哪些?应用场景?
|
15天前
|
前端开发 JavaScript UED
【Web 前端】css的引用有哪些,link和@import的区别?
【4月更文挑战第22天】【Web 前端】css的引用有哪些,link和@import的区别?
|
15天前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?