cnblogsArticle
cnblogsArticle copied to clipboard
chokcoco
自己博客园一些写得比较好的文章移植，欢迎订阅。
从 Chrome 99+ 开始，新增了一个非常有用的 function -- **showPicker()**，它能够让多个 input 类型元素使用 **showPicker()** 方法。它们是： + `type=date` + `type=month` + `type=week` + `type=time` + `type=datetime-local` + `type=color` + `type=file` OK，那么新增的 **showPicker()** 到底有什么作用呢？ 我们以 `type=color`...
前几天在公众号转发了好友 `Vajoy` 的一篇文章 -- [巧用 CSS 把图片马赛克风格化](https://juejin.cn/post/7068982477917782047)。 核心是利用了 CSS 中一个很有意思的属性 -- [image-rendering](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image-rendering)，它可以用于设置图像缩放算法。 ## 何为 image-rendering？ [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。 语法比较简单： ```CSS { image-rendering: auto; // 默认值，使用双线性（bilinear）算法进行重新采样（高质量） image-rendering: smooth; // 使用能最大化图像客观观感的算法来缩放图像。让照片更“平滑”...
https://stackoverflow.com/questions/44668257/different-looks-on-scrollbars-when-using-usb-mouse-vs-wireless-trackpad-in-os-x
本文将介绍 HTML5 规范中，比较有意思的一个标签 ``，通过它，我们可以 1. 快速构建下拉选框 2. 快速构建可输入过滤选项的下拉选框 ## 什么是 `` 经常制作表单的同学一定对下拉选框不陌生。 传统的下拉选框 [select](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select)，类似于这样： ```HTML Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish ``` ...
写这篇文章的缘由是因为看到了这个页面：  [糯米-未来大学 3D View 页面](https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1) 运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。 并且掌握原理之后制作起来也并不算废力，好好的研究了一番后将一些学习过程共享给大家。下面进入正文。 ## 3D 效果示意 先直观感受一下上述我所说的效果的简化版本：  [CodePen Demo -- 3D View](https://codepen.io/Chokcoco/pen/mAyRGv) 这里我使用了带背景色的 Div 作为示例，我们的视角处于一个正方体中，正方体的旋转动画让我们有了 3D 的感觉。 那么原本的图长什么样呢？我们把距离拉远，一探究竟：...
本文其实应该叫，Web 用户体验设计提升指南。 一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于： + 急速的打开速度 + 眼前一亮的 UI 设计 + 酷炫的动画效果 + 丰富的个性化设置 + 便捷的操作 + 贴心的细节 + 关注残障人士，良好的可访问性 + ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着**以用户为中心的思想**的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。 良好的用户体验设计，是产品每一个环节共同努力的结果。 除去一些很难一蹴而就的，本文将就**页面展示**、**交互细节**、**可访问性**三个方面入手，罗列一些在实际的开发过程中，积攒的一些有益的经验。通过本文，你将能收获到： 1. 了解到一些小细节是如何影响用户体验的 2....
## 层的一些基本概念 ## 什么是 stacking context stacking context 意为层叠上下文。 在浏览器的元素渲染过程中，除了水平的布局，还有一条沿着相对于用户的假想 Z 轴。 在水平的布局中，有块级上下文(BFC)等绘制规则，而在 Z 轴上，有层叠上下文(stacking context)的绘制规则。 层叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。 在某些时候，我们对某些元素使用 z-index ，导致某些元素的呈现顺序受其 z-index 值影响。发生这种情况是因为这些元素具有特殊的属性，这些属性导致它们形成了层叠上下文。从而可以根据 z-index...
承接上一篇：[【CSS3进阶】酷炫的3D旋转透视](https://github.com/chokcoco/cnblogsArticle/issues/9) 。 本文通过一个 3D Web 动画的实例，详细的捋一捋浏览器整个渲染页面的过程及原理。 CSS3 3D 行星运转 demo 页面请戳： [Demo - CSS3 3D 行星运转](http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html) 。 嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等待一会） ## CSS3 3D 行星运转效果图  随机再截屏了一张：  强烈建议你点进 [Demo -...
 想写一篇关于 SVG 滤镜的文章已久，SVG 滤镜的存在，让本来就非常强大的 CSS 如虎添翼。让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼。题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- [CodePen Demo -- Cloud (SVG filter + CSS)](https://codepen.io/yuanchuan/pen/mGWrJp)。 系列另外两篇： + [有意思！不规则边框的生成方案](https://github.com/chokcoco/iCSS/issues/106) + [震惊！巧用 SVG 滤镜还能制作表情包？](https://github.com/chokcoco/iCSS/issues/107) ## 什么是 SVG...
本文接上篇文章。[从零开始学习以太坊编程（一）-- 环境准备与基础知识](https://github.com/chokcoco/cnblogsArticle/issues/23) 好的技术文章很难写，简单地介绍原理让大家都能懂的，也就仅仅只能局限于知道个原理，浮于表面。直接细读源码的，看似深入，实际上容易让人乏味，食之无味，枯燥的很，直接会把 90% 的人挡在门外。 我期望我的产出即是阳春白雪，又可如下里巴人，门外汉看得下去，凑个热闹学点基础，专业人士也可以从中学到很多东西。也希望大家多多支持。 OK，下面开始正文。 阅读本文，你需要： 1. 最好你是程序员，或者有一点点编程基础； 2. 对软件的系统/架构以及数据结构稍微有所了解； 3. 提前了解一下 merkle tree 的基本概念？ 本文将会是基础知识以及代码的混搭风格串讲。 ## 智能合约（Smart Contract） 早些时候，BTC 诞生之初。是没有智能合约这一说的，也就是我们传统所说的区块链1.0时代。 > 区块链1.0是以比特币为代表的分布式（去中心化）的数字货币数字货币应用。其场景包括支付、流通等货币职能。 > 区块链1.0的其中一个重大局限在于，只满足数字货币的交易和支付功能使得该应用不能被大范围地普及到生活中，给日常生活带来的益处十分有限，区块链的概念也难以深入人心。 直到 ETH 的出现，对智能合约的普及（也就是我们常说的区块链2.0时代）改变了区块链技术仅能类似...