专栏首页鱼头的Web海洋【Hello CSS】第八章-CSS图形

【Hello CSS】第八章-CSS图形

  • 作者:陈大鱼头
  • github: KRISACHAN

前言

上一节留了一个问题:“为什么 currentColor 是驼峰命名?”。

其实也有小伙伴答对了,原因就是因为 currentColor 是作为 SVG 的属性值存在,因此在 CSS 里就保留了这个驼峰写法,顺便提一个冷知识:“ currentcolor 这种全小写的方式也是允许的。

小知识分享完,本章开始分享 CSS图形,通过 CSS 不同属性间的组合,可以勾勒出怎样的图形呢?下面我们就简单分享几个简单的DEMO。

免责声明:由于鱼头技术有限,所以如果DEMO不得各位大佬的心,请轻喷,喷重了鱼头会嘤嘤嘤的。

有趣的图形

通过不同的CSS属性,我们能组合出很多有趣的 CSS 图形。

粘连效果

效果如图:

链接在此:

https://codepen.io/krischan77/pen/dEOBbg

砖头效果

效果如图:

链接在此:

https://codepen.io/krischan77/pen/VOmJzO

CSS图标

效果如图:

链接在此:

https://codepen.io/krischan77/pen/oRYKaY

图片美化

CSS也是可以实现美图秀秀的滤镜跟倒影效果滴。

滤镜

链接在此:

https://codepen.io/krischan77/pen/QRdLbP

倒影

链接在此:

https://codepen.io/krischan77/pen/JqEVOP

原生组件美化

在我们使用原生组件的时候,是否觉得样式不能满足我们的开发需求呢?没关系,让CSS来给你优化。

自定义滚动条

链接在此:

https://codepen.io/krischan77/pen/VOPRbq

表单控件

链接在此:

https://codepen.io/krischan77/pen/VOPoOm

后记

本章主要是分享一些用CSS属性实现简单的效果,虽然不是什么让人惊艳的东西,但其实也说明了只要我们肯发挥想象,CSS一定会有回应的,大家不妨多思考如何用不同的属性组合成有趣的图形吧。

【Hello CSS】系列

【HelloCSS】是以 CSS基础概念为主题的系列文章,旨在帮助大家更深刻地了解并且提高 CSS在各位开发者心目中的地位。由于鱼头我水平有限,文笔有限,如果各位在文章中发现有任何不合理,不正确的地方,还烦不吝指出,我会非常感谢的;如果通过文章有任何想法或疑问,也希望各位能积极留言,我们互相探讨;如果通过本系列文章有所收获,这就让鱼头我喜不自胜了!

如果你也喜欢 CSS,喜欢探讨技术,或者对本文,本系列有任何的意见或建议,鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。如果你有兴趣,请添加鱼头微信(krisChans95),添加时注明 “加群”,Mmmm,最后,如果觉得我的文章还不错,请加个关注跟点个“在看”呗!

本文分享自微信公众号 - 鱼头的Web海洋(krissarea),作者:陈大鱼头

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS Conf -《新时代CSS布局》学习总结

    CSS布局经常是令前端开发者头痛的一块工作。但是近几年来,浏览器不断发展,开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局...

    陈大鱼头
  • 【Hello CSS】第一章-CSS的语法与工作流

    在上一篇 【HelloCSS】的序章CSS起源中介绍了 CSS的诞生原因以及发展历史,了解了 CSS的存在意义。从正篇篇开始将会正式开始介绍 CSS这门语言的特...

    陈大鱼头
  • 来自新时代的CSS

    最近听说TypeScript3.7添加了对Optional Chaining[2]的支持,然后就想着给鱼头的脚手架ying-template[3]的TS版本升级...

    陈大鱼头
  • Web真相: CSS不是真正的编程

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:

    疯狂的技术宅
  • 什么是CSS预处理器

    小胖
  • awesome-css-cn命名习惯和方式参考其他资源原文链接

    CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

    琯琯
  • 前端开发,从草根到英雄(第一部分)

    我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

    用户1667431
  • 【CSS】515- 如何通过CSS向JS传参的

    CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。

    pingan8787
  • CSS Conf -《新时代CSS布局》学习总结

    CSS布局经常是令前端开发者头痛的一块工作。但是近几年来,浏览器不断发展,开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局...

    陈大鱼头
  • 前端修仙之路:从“路人”到大神,走对这几步很重要

    HTML 与 CSS基础 前端的领域里,任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式...

    BestSDK

扫码关注云+社区

领取腾讯云代金券