【整理】20个让你效率更高的CSS代码技巧

2019-06-21
阅读 7 分钟
5.5k
在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。

CSS没有边界的裁剪路径 - Clip Paths

2019-06-13
阅读 3 分钟
3.8k
随着浏览器对shape-outside和clip-path等属性的支持增加,CSS Shapes越来越受到关注。有几种方法可以使用CSS Shapes,特别是clip-path属性,乍一看我们并不知道这个属性如何使用,下面就来详细的介绍它。

CSS :placeholder-shown伪类实现输入框浮动文字效果

2019-06-12
阅读 3 分钟
5.3k
在这篇文章中,我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果,使用纯CSS实现。 浮动的文字标签 当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的: label标签是关联表单元素,提供说明信息最适合的元素。 输入框的placeholder属性允许您指定没有输入内容时出现在...

使用CSS创建一个炫酷的球体动画效果

2019-06-11
阅读 4 分钟
7.3k
我最近看到了一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍。 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade,我们不用一个一个的写出200个div。 以下的代码创建了一个容器.mommy和200个div: {代码...} 添加一点CSS确认一...

如何反转CSS中的贝塞尔曲线

2019-06-06
阅读 4 分钟
3.9k
首先来看一看我之前写的一个CSS轮播动画效果,为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词,而使用了cubic-bezier(贝塞尔)函数。

浅谈CSS calc()函数的用法

2019-06-05
阅读 3 分钟
22.7k
CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

CSS开关按钮三例

2019-06-04
阅读 5 分钟
6.1k
很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbox,并在提交表单后获取checkbox值,以查看用户是否已经选中或取消选中该checkbox。我们都知道默认的的checkbox长啥样,而且还不能通过纯CSS的方式来设置checkbox的样式。这种元素的样式由每个浏览器引擎单独管...

跳起来:你不知道的CSS Animation新的Steps()值

2019-06-03
阅读 3 分钟
5.1k
CSS动画中有一个animation-timing-function属性,它的取值除了ease,linear,cubic-bezier之外,还有一个steps()阶跃函数,这篇文章我们来讨论steps()函数新增的四种取值。到目前为止,这新增的几个取值仅在Firefox 65+中可用,也就是说在其他浏览器实现之前,演示只能在Firefox中实现。

六种组织CSS的方式

2019-06-03
阅读 4 分钟
3.3k
Ben Frain曾经说过,写css代码很容易,但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。 OOCSS OOCSS 意为面向对象的CSS。这种方法有两种主要 观点: 结构与设计分离 容器和内容分离 使用这套结构,开发者能得到可以在不同地方使用的一般类。 在这一步,会存在两点(通常就好和坏): 好: 通过重复利用减少代...

10个有趣的javascript和css库(2019年5月最新)

2019-05-31
阅读 2 分钟
4k
强大的javascript(节点和浏览器)库,用于从图像中提取文本。它能自动检测文本的位置和方向,识别60多种语言,包括中文、阿拉伯语和俄语等。

CSS3实现柱状图的3D立体动画效果

2019-05-31
阅读 9 分钟
5.8k
这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网站的一篇文章,它介绍了如何在网页中使用CSS、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后,我想挑战一下,尝试使用纯CSS来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体,而后面的难点在于如何创建一个完整的带有动...

CSS3实现炫酷的切片式图片轮播效果

2019-05-24
阅读 8 分钟
5.3k
今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素(label)来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄弟选择器来定位每张图片。

【整理】18种推荐的CSS命名和书写规范

2019-05-23
阅读 5 分钟
8.8k
选择器的命名规范 1.模块化命名 例如: 与布局相关的样式以“g”为开头。如“g-content”和“g-header”; 与挂钩相关的样式以“j”为开头。如“j-open”和“j-request”; 与元件相关的样式以“m”为开头。如“m-dropMenu”和“m-slider”; 与状态相关的样式以“s”为开头。如“s-current”和“s-selected”; 与工具相关的样式以“u”为开头。如...

CSS自定义属性+CSS Grid网格实现超级的布局能力

2019-05-22
阅读 4 分钟
2.4k
我在工作中使用CSS Grid已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在,我真的无法想象没有Grid的CSS!

❤520,就用CSS给你的她(他)送颗心❤

2019-05-20
阅读 4 分钟
3.1k
今天是520。一句温柔的问候,一束美丽的鲜花,一段真情的告白。但是作为一名与众不同的程序员,我们可不仅仅拥有上面的传情方法,别忘了每个人的手上可是都有其他人不具备的神奇技能,就是我们每天辛辛苦苦敲下的代码。

善用CSS伪类,不用JS也能做出选项卡功能

2019-05-17
阅读 3 分钟
3.5k
讲到选项卡(Tabs)功能时,大多会想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery实现的(其实网络上有很多用jQuery开发的Tab);但其实不用jQuery或JavaScript技术,就能实现高效能且易维护的Tabs元件,让我们来看看是怎么办到的:

CSS实现两个球相交的粘粘效果

2019-05-14
阅读 4 分钟
5.4k
这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了)。

CSS box-sizing与background-clip解决背景显示范围的问题

2019-05-13
阅读 3 分钟
3.9k
过去在学习CSS的时候,首要任务就是要理解“box model”,因为box model是CSS里头很重要的模型概念,描述了padding、margin、border与content的空间定位,今天的项目竟然卡在一个简单的小问题,因此就用一篇文章做个纪录提醒自己不要忘记,也避免之后遭遇到又会卡住了。(下图就是CSS的box model)

实现点击按钮后CSS加载效果

2019-05-09
阅读 3 分钟
5.3k
由于自己公司产品里头,有个按钮在点击之后,会有一两秒的等待时间(寄认证信),因此为了避免点击后一两秒的加载时间空窗,就做个loading动画来强化使用者体验,原本想说直接用张gif来解决,但又想借着这个机会练功,就使用了CSS的渐变效果来达成,没想到效果还满好的,而且不需要额外增加div之类的元素,单纯修改CSS和...

深入解析CSS FlexBox

2019-05-08
阅读 7 分钟
1.5k
第一步要来看Flexbox的盒子模型,根据W3C文章所描述,flex的盒子模型如下图所呈现,与一般的盒子模型不同的地方,在于Flexbox的盒子模型具有水平的起点与终点(main start、main end),垂直的起点与终点(cross start、cross end),水平轴与垂直轴(main axis、cross axis),然后元素具有水平尺寸与垂直尺寸(main si...