许,你认为 CSS 只能用来控制网页的结构与样式,但它的功能和应用却超乎你的想象。从逼真的图像到特效动画,优秀的开发者利用它已创造了无数种可能。
在本文中,我们精选了纯 CSS 实现的滤镜以及各种效果,与大家分享。它们都是开源的网页设计相关项目。除了体验之外,有兴趣的话,你还可以尝试来实现它们。
哇!如果你对太空场景情有独钟,那么一定会被这个 CSS 实现的太阳系动画所震撼。作为空间学与物理学爱好者,作者参照了太阳系轨道运行的真实时间进行设计,意味着每个行星都有相对地球年的时间,准确的围绕太阳公转。
项目地址:
https://codepen.io/kowlor/pen/ZYYQoy
对于网站性能来说,动画是众人皆知的问题引发者。如果优化不佳,它们会直接影响页面的打开速度。而这个 CSS 实现的漂亮的渐变动画,却相当的轻量,不仅易于编辑,而且支持自定义颜色。
项目地址:
https://codepen.io/P1N2O/pen/pyBNzX
实现一款简单的游戏,并不一定需要 JS 的帮助,纯 CSS 也能够创造一款界面漂亮的 Stack 游戏。当然,游戏看似容易,背后的设计并非那么简单。
项目地址:
https://codepen.io/finnhvman/pen/xJRMJp
这是一款漂亮、轻量、易于定制的进度条开源项目。进度条采用 3D 制作,同时拥有清澈的外观,你甚至可以将它们变成迷你 3D 图表!
项目地址:
https://codepen.io/rgg/pen/QbRyOq
故障风格的文本总会让人有眼前一亮的感觉,而这个项目就是纯 CSS 实现的故障效果。如果你想为网站增添酷炫的故障效果,那么不妨多了解下。
项目地址:
https://codepen.io/lbebber/pen/ypgql
CSS 的能量超乎你想象,你甚至还可以利用它制作出艺术品效果。Francine 就是一个纯 CSS 制作、展示的 18 世纪风格的绘画作品。或许,你会惊讶 CSS 实现的效果竟能如此逼真。
项目地址:
https://github.com/cyanharlow/purecss-francine
这个项目与《Francine》有异曲同工之处,它仅使用 CSS 和 HTML 便实现了手机界面效果,而且效果可以同网站照片相媲美。如果你有兴趣,可详细的了解其实现的过程。
项目地址:
https://codepen.io/Wujek_Greg/pen/LmrweG
利用 JS 创造一个简单的 3D 地图?不用那么复杂,纯 CSS 就可以搞定。怎么样,看上去还不错吧!
项目地址:
https://codepen.io/onediv/pen/NrNebj
想为你的网站添加一些 Instagram 风格的图片滤镜效果?那么,纯 CSS 实现的 Instagram 风格的滤镜库 —— Instagram.css 一定是你的菜。它的灵感来源于 CSSgram.
项目地址:
https://picturepan2.github.io/instagram.css/
这是一个纯 CSS 实现的渐变幽灵按钮。漂亮的动画和渐变效果,是不是很酷呢?相信,它可以很好的融入到任何网站之中。
项目地址:
https://codepen.io/ARS/pen/vEwEPP
如果你想在网站增添 iPhone X、iPhone 8 等移动设备用于展示的话,那么一定不要错过 Devices.css. 它是一个使用了纯 CSS 实现主流移动设备的库,并以现代设备为模版。
项目地址:
https://picturepan2.github.io/devices.css/
这是一个很酷的纯 CSS 实现的项目。你只需要通过电脑自带的选色器,就能轻松地更换图像的颜色,来试试吧!
项目地址:
https://codepen.io/noahblon/pen/ZbjmbK
利用 JS,我们能实现各种让人惊叹的页面/动画效果,但 JS 并不是最轻量的解决方案。如果合理使用 CSS,你依然可以实现一些炫酷的效果,并且它对性能的影响会小得多。当然,无论你使用哪种方式(JS or CSS),你都可以创造出创意且有趣的作品。
以上的作品,你最喜欢哪一个?欢迎评论与我们分享。
感谢你的阅读。若你有所收获,欢迎点赞与分享。
注:
英文原文:12 Incredible Pure CSS Experiments
作者:Brenda Stokes Barron
译者:IT程序狮
译文地址:
https://zhuanlan.zhihu.com/p/58424141
ss是前端领域的一个难缠户,一提到css,没有人会说难,也没有人愿意承认自己不会写,甚至在面试的过程中css相关的内容都很少提及,足以说明大家对css的不重视。你真的会写css吗?
关于css有两类问题值得我们重视:样式和工程。样式问题指的是具体的效果实现,能否实现某个效果,同一个效果有多种实现方式,如何抉择;工程问题是如何在大型项目中写出可维护性、可读的css。
在各种论坛中经常看到关于css是否是一门编程语言的争论。在我看来,最好用对待编程语言的态度来看待css,不要忽视css,否则,在项目后期,你会发现,你的css越来越混乱,important会越来越多,不同位置的类名互相冲突覆盖,改一个类的样式,要检查整个项目的页面是否受到影响,项目内部的css共享完全依赖拷贝……从这个角度来说,你敢说css不是编程语言?它完全有了像编程语言一样能把你搞得焦头烂额的能力。而这一切都来源于你在一开始对她的忽视与不屑。出来混,总要还的啊!
盲目的定义基础样式
在项目开始之初,拿到UI设计稿,信心满满地开始定义css的全局基础样式,谢天谢地,css对这一点支持得很彻底,一处定义,所有页面都可以引用。
先来一个color-red。
.color-red {
color: red
}
这样,在整个项目中,都可以给任意元素添加一个color-red类,美滋滋,我真是个小机灵鬼!
几个迭代过去,你已经把color-red这面红旗插满了整个项目。UED说,咱们改个版,所有红色的文本改为蓝色,红色的link不变!
哔!——(你发出的声音)
你又得屁颠屁颠地把一个一个的红旗拔出来,再插上蓝色的旗子(因为你不敢不干呀)。
命名冲突
在一个页面,你定义了一个.header,写了个完美的特效,发布到dev一看,就是不管用,横看竖看,本地是好的啊,神奇(生气)!过了若干时间的排查,另一个同事在另一个地方也写了一个.header,完美的覆盖了你的。把你头打歪!
编辑器可不会提醒你哦!
慢慢你会发现,这种命名冲突可太频繁了呀!头大,要不要用上css modular啊?
子类覆盖
有的小伙伴聪明地将类名嵌套定义,这就不会冲突了吧?嘿嘿,你想多了!
/* in article.css */
.article .title {
border-bottom: 1px solid;
font-size: 1.5em;
}
/* in widget.css */
.widget .title {
color: gray;
text-transform: uppercase;
}
如果在dom树里面,article和widget在一棵树的路径上,你说title是冲突呢还是不冲突呢?
以上的这些问题,在项目中相信大家都遇见过,并且项目越大,出现的概率就越高,最后就会演变成一座[屎]山。
“大家都别动,牵一发而动全身哦!”
“这就是蝴蝶效应吧???”
难道css这些问题就没法解决了吗?当然不是,我们来看看大神们是如何解决这些问题的。
BEM是Block、Element、Modifier的缩写,是一个类命名的规范。
首先我们来看一个例子:
/* Block */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}
相信小伙伴们已经有了一个初步的认知:
Block是一个独立的组件(元素),定义的了“组件是什么,按钮?还是菜单?”。
Element是属于Block,是依赖于Block的元素,描述的是“Block里面的什么?比如,文本?图标?”
Modifier用于描述Block或者Element的外在表现,比如大小、颜色、状态等。
看一个例子:
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button search-form__button_size_m">Search</button>
</form>
search-form是Block;
search-form_theme_islands是Modifier,描述了theme为islands的search-form;
search-form__input是Element,描述的是search-form内部的input元素;
search-form__button是Element,描述的是search-form内部的button元素;
search-form__button_size_m是Modifier,描述的是size为m的search-form__button;
这样写css是不是非常的清晰?瞬间就提高了可读性和可维护性?
概念如此简单,还不赶紧多了解一下?
另外,可能有些小伙伴也注意到了,Block和Element使用双下划线分隔,和Modifier是用中划线分隔,这也不是一成不变的,可以按照自己的喜好来决定如何分割。
有些小伙伴可能会有疑问,BEM和Saas、Css Module有什么区别?解决的问题是一样的吗?
Sass是css的预处理器,在写css的时候定义了一套规范,经过编译处理后输出为css,和BEM是两个不同的概念。使用saas或less也能实现BEM。BEM其实是不推崇类名的嵌套定义的,如果想像sass那样嵌套的写出标准的BEM,可以使用@at-root。
Css Module解决的问题是多个模块的css的命名冲突问题,个人觉得是傻瓜式解决方案,在应用层的css-in-js应用比较多,适合css入门选手。要想写好css,还是得从根本上入手呀!
最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基础入门到深入学习。这些项目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 课程的一部分,但是如果你已经拥有了一些基础,不妨试着看一下源码,然后模仿实现吧
判断输入的表单字段是否合法
一个简单的电影座位预定演示项目
一个简单的网页视频播放器
计算不同货币的兑换汇率
练习如何操作 DOM 数组
练习如何弹出登录注册窗口,以及滑动弹出菜单
练习如何判断隐藏字符是否正确
简单的点餐查询应用
简单的购物车结算应用
简单的网页音乐播放器
网页无限向下滚动实现
简单的打字输入游戏
文本阅读器
测试记忆的记忆卡片
网页歌词搜索器
模拟呼吸的节奏
简单的网页破冰游戏
网页新年倒计时
网页财富榜单
说出数字,猜测数字
今天我们给大家分享了,20 个 JavaScript+Html+CSS 练手小项目,大家觉得哪个最简单,哪个最复杂呢?赶紧去 Github 仓库拉取项目,码上行动吧
欢迎关注公众号:KnowHub 知识加油站!
[1]
vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects
*请认真填写需求信息,我们会在24小时内与您取得联系。