• 滚动视差?CSS 不在话下

    Posted by : lon.y@qq.com on 2018年8月11日

    何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。 通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力。下面就让我们来见识一二: 认识 background-attachment background-attachment 算是一个比较生僻

    阅读全文...

  • 神奇的选择器 :focus-within

    Posted by : lon.y@qq.com on 2018年8月9日

    CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。 通常而言, #id:after{ ... } #id::after{ ... } 符合标准而言,

    阅读全文...

  • 神奇的选择器 :focus-within

    Posted by : lon.y@qq.com on 2018年8月5日

    CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。 通常而言, #id:after{ ... } #id::after{ ... } 符合标准而言,

    阅读全文...

  • CSS 的空格处理

    Posted by : lon.y@qq.com on 2018年8月2日

    一、空格规则 HTML 代码的空格通常会被浏览器忽略。 ◡◡hello◡◡world◡◡ 上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。为了便于识别,这里使用半圆形符号◡表示空格。 浏览器的输出结果如下。 hello world 可以看到,文字的前部和后部的空格都会忽略,内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。 如果希望空格原样输出,可以使用<pre>标签。 ◡◡hello◡◡world◡◡ 另一种方法是,

    阅读全文...

  • React/Redux打造的同构Web应用

    Posted by : lon.y@qq.com on 2018年7月31日

    大家好,我是原一成(@herablog),目前在CyberAgent主要担任前端开发。 Ameblo(注: Ameba博客,Ameba Blog,简称Ameblo)于2016年9月,将前端部分由原来的Java架构的应用,重构成为以node.js、React为基础的Web应用。这篇文章介绍了本次重构的起因、目标、系统设计以及最终达成的结果。 新系统发布后,立即就有人注意到了这个变化。   twitter_msg.png 系统重构的起因 2004年起,Ameb

    阅读全文...

  • 为什么不会有CSS4?

    Posted by : lon.y@qq.com on 2018年7月5日

    引入模块化之前 引入模块化之后 模块还会有Level 4或更高 为什么不会有CSS4了? 简单地说,就是从CSS3开始,CSS规范就被拆成众多模块(module)单独进行升级,或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更,有的只是CSS某个模块级别的跃迁。 引入模块化之前 按照CSS工作组的说法,CSS历史上并没有版本的概念,有的只是“级别”(level)的概念。比如,CSS3其实是CSS Leve

    阅读全文...

  • CSS动画:animation、transition、transform、tra…

    Posted by : lon.y@qq.com on 2018年6月20日

    前言 在平时开发过程中,由于都是自己捣鼓玩的项目,并没有UI设计给我的设计图,更没有什么特效要求,导致对css动画一直都不是很熟悉,但是作为即将进入实习单位的萌新程序员,要时刻准备着设计师要求的各种动画,于是有了这一篇文章。 容易混淆的几个css属性 css属性很多,并且有些无论是字母的拼写还是字面上的意思,都容易混淆,比如我列出来的几个属性,是不是也混淆过你~ 属性 含义 animation(动画) 用于设置动画属性,他是一个简写的属性,包含6个属性 t

    阅读全文...

  • 通过生成内容和CSS网格布局为空单元格添加样式

    Posted by : lon.y@qq.com on 2018年6月14日

    新手在使用网格布局时常见的一个问题是:如何对一个不包含任何内容的单元格添加样式。在当前的Level 1规范中还无法做到,因为无法选定空单元格或网格区域并对其添加样式。也就是说,想要设置样式必须插入一个元素。 本文我将会介绍如何使用CSS生成内容为空单元格添加样式,而不添加多余的空元素,同时会给出一些示例。 为什么不能对空区域设置样式? 网格规范的开头有提到: “本 CSS 模块定义了一个用于优化UI设计的基于网格的二维布局系统。在网格布局模型中,网格容器的

    阅读全文...

  • 爬虫攻防之前端策略简析

    Posted by : lon.y@qq.com on 2018年6月14日

    看到一篇文章,介绍在反爬虫过程中,前端工程师的各种脑洞,文章见这里。 文章里介绍了几个大的网站,在反爬虫过程中,采取的各式各样的策略,无不体现出前端工程师的奇葩脑洞。 还挺有意思的,就简单分析了一下,针对每个方案,看看有没有解决办法,于是整理成博客,记录一下。 1. 自定义字体形式 该方案是,自定义了一种字体,网页中使用乱码字符或者其他混淆字符,通过自定义字体的渲染成正确的显示数据。 代表网站有猫眼电影和去哪儿手机端。 1.1 猫眼电影 如上图,是猫眼首页

    阅读全文...

  • 使用box-shadow进行画图(性能优化终结者)

    Posted by : lon.y@qq.com on 2018年6月2日

    最近突然想做一些好玩的东西,找来找去,想到了之前曾经在网上看到过有人用box-shadow画了一副蒙娜丽莎出来 感觉这个挺有意思,正好趁着周末,自己也搞一波 前言 在线地址: 优化前的版本 优化后的版本 源码仓库地址 不建议上传大图片。。喜欢听电脑引擎声的除外 首先,并不打算单纯的实现某一张图片(这样太没意思了),而是通过上传图片,来动态生成box-shadow的数据。 所以,你需要了解这些东西: box-shadow canvas box-shadow

    阅读全文...