随笔分类 - 编码技巧
摘要：在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis，在最后，还会讲解使用 background 模拟文字下划线的一些有趣的动效。 text-decoration
阅读全文
摘要：今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点 我们都知道，到今天（2021/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。 对于单行文本，使用单行省略： { width: 200px; white-space: nowrap; overflo
阅读全文
摘要：之前有些过两篇关于字体的文章，是关于如何定义字体的： 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。 Google Font 在写各种 DEMO 的
阅读全文
摘要：在很久之前的一篇文章，有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起，谈谈 CSS 继承 inherit -webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。 上一次写它，它的兼容性还非常非常的惨淡，
阅读全文
摘要：本文其实应该叫，Web 用户体验设计提升指南。 一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于： 急速的打开速度 眼前一亮的 UI 设计 酷炫的动画效果 丰富的个性化设置 便捷的操作 贴心的细节 关注残障人士，良好的可访问性 ... 所谓的用户
阅读全文
摘要：开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样： 可以看到，在滚动的过程中，会出现一条阴影： 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 positi
阅读全文
摘要：在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 但是，有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中： 这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。 hover 时弹出框提
阅读全文
摘要：最近一直在使用 css-doodle 实现一些 CSS 效果。 css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。后续几篇文章可能都会与之有关。 当然，本文的主角并不是
阅读全文
摘要：写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？ 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构： 修改 outline-o
阅读全文
摘要：不同于传统的 PC Web 或者是移动 WEB，在腾讯视频客厅盒子端，接大屏显示器（电视）下，许多能流畅运行于 PC 端、移动端的 Web 动画，受限于硬件水平，在盒子端的表现的往往不尽如人意。 基于此，对于 Web 动画的性能问题，仅仅停留在感觉已经优化的OK之上，是不够的，想要在盒子端跑出高性能
阅读全文
摘要：box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法，其实还存在许多不为人知的奇技淫巧。 喜欢 markdown 版本的可以戳这里 。 box-shadow 常规用法 说到 box-shadow ，首先想到的必然是它能够生成阴影，所以称之为 sh
阅读全文
摘要：作为前端，每日与 URL 打交道是必不可少的。但是也许每天只是单纯的用，对其只是一知半解，随着工作的展开，我发现在日常抓包调试，接口调用，浏览器兼容等许多方面，不深入去理解URL与URL编码则会踩到很多坑。故写下此篇文章，详解一下 URL 。 URL 与 URI 很多人会混淆这两个名词。 URL：(
阅读全文
摘要：这篇文章实在是很难下笔，因为网上相关文章不胜枚举。 巧合的是前些天看到阮老师的一篇文章的一句话： “对我来说，博客首先是一种知识管理工具，其次才是传播工具。我的技术文章，主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西，那些我精通的东西，往往没有动力写。炫耀从来不是我的动机，好奇才是。"
阅读全文
摘要：很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？ 是的，明显原生JS要更快，因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西，考虑通用性必然会导致性能的损耗。 当然，我不是提倡写代码纯用原生JS实现，我记得淘宝玉
阅读全文
摘要：引言 在现在的前端页面中，尤其是移动端，经常会需要将<header>或者是<footer>模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。 “回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。 实现这样的功能当然是利用position:fixed。但
阅读全文
摘要：记得在面试腾讯实习生的时候，面试官问了我这样一道问题。 当初只知道两种声明方式一个是函数声明一个是函数表达式，具体有什么不同没能说得很好。最近正好看到这方面的书籍，就想好好总结一番。 在ECMAScript中，有两个最常用的创建函数对象的方法，即使用函数表达式或者使用函数声明。对此，ECMAScri
阅读全文
摘要：什么是短路表达式？ 短路表达式：作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。这是这两个操作符的一个重要属性。 一个最简单的例子： 这行代码是什么意思？答案： 在javascript的逻辑运算中，0、""、
阅读全文