对于用CSS 3D工作我已经有一些经验了,于是我的脑海里开始形成一个解决方案。我goggle搜索了像“CSS 3D cube”这样的关键词来确认我的想法,随后我回复Eugene说我可以。...我喜欢复杂的任务,所以我不能拒绝。在这一刻,我还没有意识到我正陷入其中,但我无法确定是否可以完成。...我需要展示1个像素的虚线,但看起来很糟糕模糊。 查看地址,由Anna Selezniova (@askd 在 CodePen)上编写。 我立马认识到问题出在哪了。...查看代码 ,由Anna Selezniova (@askd 在 CodePen)上编写。...我建了一个可以交互的样例,可以帮助你理解这个属性是如何工作的: 查看代码,由Anna Selezniova (@askd 在 CodePen)上编写。
class 名,届时只要直接套用到标签上就可以了,我们先用一个非常简单的案例来说明,请看下面的codepen[2]。...m:margin p:padding t:top r:right b:bottom l:left x:-right和-left y:-top 和 -bottom 若把上面排列组合就可以组合成下面的意思...my:margin-top 和 margin-bottom p:padding pt:padding-top pr:padding-right pb:padding-bottom pl:padding-left...都可以,但是现在也是一样都可以直接用预写 class 写在标签内就可以啰,像是 d-inline 或是d-block,就可以直接改值啰,看一下codepen 吧[4]。...若是有三个边要呈现,只有一个边要取消的话,可以用下面这种写法,用 border-方向-0 的方式来取消某一边。
我之所以打算自己编写框架,是因为工作中重复的东西太多,通过框架可以很好的将这些零散组件整合到一起。另一方面,写个小项目,学点新知识是一件趣事。 编写框架是去年想做的事情,但因为时间原因,拖了很久。...类命名一直是我比较纠结的地方,刚开始工作的时候为了起一个见名知意又简洁的类名总是抓耳挠腮。我在编写框架时尽量避免与 Bootstrap 的类名重叠,但也不能完全避免。...我编写的栅格系统也是默认 12 列,但是后来发现 12 列的栅格缺少最常用的列宽(比如 10%、20%、30%等),比如下面 CodePen 展示的例子用 12 列栅格是无法完成的,所以我又添加了 10...{ border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .border-left { border-left: 1px...#eee; } .border-bottom { border-bottom: 1px solid #eee; } 关于辅助类的更多内容可以阅读这篇文章《如何编写通用的 Helper Class》
因此在编写HTML结构时,将中间列节点挪到右列节点后面。...简单的「两行核心CSS代码」就能完成「十多行核心JS代码」的功能,何乐而不为呢。 简单回顾position属性值,怎样用就不说了,大家应该都熟悉。...竖向布局很常见,声明overflow:hidden;width:xpx;height:ypx就能实现,但横向布局却不能使用类似方式实现。 为了方便使用多种方式实现横向布局,以下将通用代码拆分出来。...最近笔者查看了Github上很多与间隔布局相关的CSS代码,虽然整体效果看上去无大碍,但margin/padding和结构选择器却乱用,因此笔者想从零到一纠正间距布局的正确编码方式。...声明其余节点 「G」:若希望容器顶部底部留空,使用border-top/border-bottom代替padding-top/padding-bottom 全部步骤串联起来理解可能会产生混乱,但结合以下代码理解相信就能很快熟悉
实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免或巧妙应用这种效果,但总感心虚发慌、毫无自信,因为不知晓背后的原理。...我们总希望我们的布局是自适应的,即不依赖与所处环境,当环境改变时,仍能完美工作。下面这个实例要求蓝色购买按钮水平居中,其后跟随一个链接。...为了达到自适应布局,我们不能假设父级容器宽度固定,也不能假设蓝色按钮的文案固定,所以链接元素的位置也是根据上下文环境改变的。...不设置值也是可以实现的。...run-in不能插入本身为run-in的块中,也不能插入块中已有run-in的块中。 否则,run-in框变为块框。 浏览器支持:IE8+(chrome不支持,难道是太鸡肋?)
center; transform: rotate(30deg); } 效果如下: 源代码:codepen5 不过有个问题:这种方法实现的扇形,圆心角不能超过 180 度,那么对于圆心角大于 180...剩下的工作就是调整绝对定位的偏移量以及两个三角形旋转的角度。由于计算的偏差问题,这里得到的并不是标准的五角星,但总体思路是这样。...border-top: 70px solid #36d792; left:-40px; top:70px; } 源代码: codepen16 特殊菱形(九十度角) 仍然可以采用上面的方法,但更简单的方法是绕中心旋转一个正方形...太极图 这是最终要实现的效果: 虽然它似乎是由不规则的几何图形构成的,但实际上,我们可以用规则的几何图形堆叠形成太极图。...我们可能很容易想到,两段白色圆弧都分别是一个 1/4 红色圆形的边框,所以可以用下面的方式来做: 但这种方式无疑是很麻烦的,事实上,我们用 CSS3 的 box-shadow 内阴影来做会更加简单: /
初看方案2的一堆代码可能会觉得非常难,但其实很多简单的图标都是非常容易实现的。 接下来就是妹子们最期待的茄果叔叔手把手教学时间啦。...分析一下,最外层的边框明显可以用border来做,然后用个before来做圆点也非常简单,关键是两座大山要如何绘制呢?box-shadow貌似可以做多层边框呢,然后加个旋转是不是就出来了呢?...我们在使用图标的时候,可能尺寸每次都不一样,但图标的尺寸都是有关联的,调整起来相当费劲。当然你可以会想到用zoom、scale来做缩放,但是这样的缩放线宽也会随之变化了。...图形学学的不好的话,那就比较痛苦了,如果不追求单标签的话,可以将每条边用一个标签表示,这样就很好处理了。 叔叔,我想装逼 怎么样?觉得上面这些都是小玩意?想装逼了?好,叔叔教你! 蒙娜丽莎?什么鬼?...我会告诉你这也可以用一个单标签纯CSS画出来的吗?
因此,它们彼此不同,但各自都有各自的用处。 视口单位的用例 字体大小 ? CSS 视口单位非常适合响应式排版。...您可能还需要添加多个媒体查询,但这取决于你自己,也取决于项目的上下文。 事例地址:https://codepen.io/shadeed/pe......事例源码:https://codepen.io/shadeed/pe... 响应式元素 假设我们有一个作品集来展示我们的响应式设计工作,并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。...事例地址:https://codepen.io/shadeed/pe... 垂直和水平间距 我想到的另一个有趣的用例是使用视口单位来表示元素之间的间距。...这可以与margin、top、bottom和grid-gap等值一起使用。使用时,间距将基于视口宽度或高度,这对于使布局更具动态性可能很有用。 模态框 对于模态,我们需要将它们从视口顶部推入。
不用急,这里有4种方法可以解决。...方案3:将 img 元素设置为 vertical-align: bottom 关键代码: img{ vertical-align: bottom; } 事例地址:https://codepen.io...关键代码 li:not(:last-child) { border-bottom: 1px solid #ebedf0; } 事例地址:https://codepen.io/qianlong/p.....{ border-top-color: #0097a7; } /*上*/ .triangle.top { border-bottom-color: #b2ebf2; } /*左*/ .triangle.left...这意味着容器可以被滚动,但滚动条被隐藏起来,就像它是透明的一样。
布局方法是用各种操作来控制文档流的行为。定位则不同:它将元素彻底从文档流中移走。它允许将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面,彼此重叠。...跟固定或者绝对定位不一样,不能用 top、right、bottom 和 left 改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。...可以用 top 或者 bottom,但它们不能一起用(bottom 会被忽略)。同理,可以用 left 或 right,但它们也不能一起用(right 会被忽略)。...有时可以用这些属性调整相对元素的位置,把它挤到某个位置,但这只是相对定位的一个冷门用法。更常见的用法是使用 position: relative 给它里面的绝对定位元素创建一个包含块。...第一,z-index 只在定位元素上生效,不能用它控制静态元素。第二,给一个定位元素加上 z-index 可以创建层叠上下文。
ps: 公众号内不能插入外部链接,想要更好的阅读体验可以点击文末的阅读原文 ---- 本文属于意译而非直译,为了方便理解也增加了一些自己的语言,如果存在偏差或错误还请留言指正。...可在 CodePen 上查看真实效果和编辑代码 说明你现在可以使用任何类型的html 标签创建有序列表。 counter-reset 初始化计数器,该值是计数器的名称。默认情况下,计数器从0开始。...可在 CodePen 上查看真实效果和编辑代码 浏览器支持程度 86.5% caniuse 18. 创建动态阴影 创建类似于box-shadow的阴影,但基于元素本身的颜色。...CodePen上查看和编辑代码 说明浏览器会对字体进行逐个查找,如果找到的话就是用当前的,如果找不到字体(在系统上或在CSS中定义),则继续往后查找。...可在CodePen上预览效果和编辑代码 说明 --variable-name: 用这样的格式来声明变量。 var(--variable-name) 使用此函数在整个文档中重用变量。
大多数情况下,我们会使用 top: 50% ,但是现在,使用 bottom: 50% 会使后面的操作更简单。...原始 demo 用的是普通的 CSS,我们会使用 Sass 来减少代码量。...但是在我们的例子中,我们希望渐变从 top 到 bottom ,所以我们将 x2 的值从 100% 设置为 0% 并且将 y2 的值从 0% 设置为 100% 。...这意味着我们可以给一个更大的正方形元素设置渐变,然后裁剪成实际的形状。然而做这些工作会让 element() 和 mask 来创建渐变倒影的方法更加复杂。 Edge:可以全用SVG吗?...最后一步就是用 mask 给反射添加渐变。它的方法及代码和之前都是一样的,我们不再赘述。
、bottom、left、left top、top right、bottom right或者left bottom)。...渲染容器 其本身没有单独容器概念,大小只能是元素的border-box.不能选择性的线性渐变内容盒等。 渐变角度 默认值 to bottom 等于 180deg,如果是目标的效果可以不再额外设置。...我之前的场景的话,也是类似的思路不过是利用的一个线性背景做x方向的重铺,然后中间也是用span标签做白色背景。 – 这种方案的缺点可能是什么?...这里建议给大家一种flex的布局方案也可以实现,布局更为常规,利用了flex弹性盒的原理,当然横线背景也是渐变,但span部分没有渐变也没有背景色覆盖。...代码如下:其中flex:1就是实现利用剩余时间的。
: -70px; left: 0; } 完整的示例代码,你可以戳这里 CodePen Demo -- A Signle Div heartShape 渐变 & 多重渐变 毫不夸张的说,渐变是在单标签实现图形中...刚刚已经使用了元素本身和元素的一个伪元素,剩余一个伪元素实现底部的阴影圆即可,完整的 Demo 代码你可以戳这里:A Signle Div Rainy 简单总结一下 到这里,可以简单总结一下,单标签实现图形...完整的代码你可以戳这里:A Signle Div Shield 单个标签实现一个磁带 我们再看看这个图形,一个磁带图形: ?...这样,就顺利使用单个标签实现啦,该 Demo 取自 A Single Div,完整的代码你可以戳这里:CodePen Demo -- A single Div Disk。...完整的代码你可以戳这里:CodePen Demo -- A Single Div Ghost 最后 只使用 CSS 进行单 div 绘图还是非常有意思的,也可以比较好的锻炼 CSS,虽然业务中不一定会用上
通过工作的实践总结,我觉得编写一套简单易用、通俗易懂的 helper 非常重要。本文的目的就是探讨 helper 的组成部分、编写方式以及如何精简 helper 的命名。...我认为,凡是可以量化的属性,比如 padding、margin、font-size、border-width 等,应该直接用数值表示,而对于不可以量化的属性,比如 box-shadow,用尺寸型命名比较合适...我们可以沿用之前的规则,可以量化的属性都用缩写,不可以量化的属性用简化的全称(比如 box-shadow 可以替换为 shadow)。...important; } 我觉得完全可以简化一步,用 - 表示负值,简单易懂,如下: .m-t--5 { margin-top: -5px !...总结 编写 helper 比编写框架要容易的多,但简单易用、通俗易懂的 helper 还需要严谨的思考,详细的 helper 可以参见 GitHub 源码。
用 的好处就是实现简单,兼容性强,拓展性高,但是美中不足的是标签语义化不强。...第二种就是用 来实现的。首先我们来看看效果: ?...,但是规范里并没有规定它的具体表现,所以各个浏览器厂商完全可以按照自己的喜好去定制,样式完全不可控,所以标签虽好。。...代码如下: .progress4 { display: block; font: inherit; height: 50px; width: 300px...以上 demo 都可以我的 codepen 上查看:https://codepen.io/krischan77/pen/QPezjB 点 “查看原文” 也可以看哦~
不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小,则需要将其设置为类似块级元素 display: block。...通过使用 top,bottom,left 和 right 属性,可以精确指定要将定位元素移动到的位置。...同时,元素的位置发生变化,top,bottom,left 和 right 以不同的方式在绝对定位,它们指定元素应距离每个包含元素的边的距离,而不是指定元素应该移入的分析。...: lime; top: 10px; right: 10px; } https://codepen.io/cellinlab/pen/YzeJRbW 可以使用 z-index 属性更改绝对定位元素的堆叠顺序...https://codepen.io/cellinlab/pen/xxYymGb # 固定定位 固定定位 fixed,与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于 <html
用例和事例 简单滑块 我们可以通过水平裁剪内容并使其滚动来创建快速简单的滑块。 ? 在上面的模型中,我们有水平放置的卡片,还有一个滚动条,可以滚动并显示更多内容。...border-top-left-radius: 7px; } .card-content { border-bottom-right-radius: 7px; border-bottom-left-radius...要解决该问题,我们可以主按钮添加overflow: hidden,并更改其对齐方式: .button { vertical-align: top; } 事例源码:https://codepen.io...Firefox scroll标签 在Firefox中,会向导致水平滚动的元素添加一个小标签。 ? 删除元素 有时,上述技术无效。...最后一个解决方案:使用overflow-x: hidden 最后,可以使用overflow-x:hidden解决水平滚动问题,但这一般是最后没办法的备用方案。
还有定位中的 left、top、right、bottom,它们表示了上下左右不同的方位。...在 Web 中,我们有 3 种方式可以控制文字方向: html实体 - 与 ) 与 标签 与 dir 属性 CSS 属性 direction + unicode-bidi...当然,现在这个功能完全可以用 transform 替代,但是在之前需要兼容 IE 系列的时候,不失为一个有意思的小技巧。 CSS 中的逻辑属性 下面一个章节,我们聊聊 CSS 中的逻辑位置。...然而,这种使用了 top/left/bottom/right 物理方向维度定义的属性,在不同的排版规则下,就非常容易出问题。...可以看到,无论 writing-mode 如何,padding-top 始终指代物理方向的上方。
一个非常简单的例子,上述我们创造了一个从黑色到透明渐变色,我们将它运用到实际中,代码类似这样: 下面这样一张图片,叠加上一个从透明到黑色的渐变, { background: url(image.png...CodePen Demo -- 使用 MASK 的基本使用 使用 MASK 进行图片裁切 利用上述简单的运用,我们可以使用 mask 实现简单的图片裁剪。...) bottom right, linear-gradient(45deg, transparent 15px, #fff 0) bottom left;...CodePen Demo -- MASK conic-gradient 转场 这个技巧,在张鑫旭的这篇文章里,有更多丰富的例子,可以移步阅读: 你用的那些CSS转场动画可以换一换了 运用这个技巧,我们就可以实现很多有意思的图片效果...CodePen Demo -- mask & filter & blend-mode 实际效果比截图好很多,可以点击 Demo 去看看。
领取专属 10元无门槛券
手把手带您无忧上云