Menu
Woocommerce Menu

前端框架,2018年3月十大好玩的CODE

0 Comment


2018年3月十大好玩的CODE PEN

2018/03/06 · CSS,
JavaScript ·
CodePen

原文出处:

两行 CSS 代码实现图片任意颜色赋色技术

2017/12/21 · CSS · 6
评论 ·
颜色

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

很久之前在张鑫旭大大的博客看到过一篇
PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于
PNG 图片。

 

最佳的 JavaScript 前端框架、库和工具

2015/12/22 · JavaScript
· 1 评论 ·
工具,
库,
框架

本文由 伯乐在线 –
cucr
翻译,Heiye
校稿。未经许可,禁止转载!
英文出处:Rami
Sayar。欢迎加入翻译组。

好像几乎每隔一周就有一个新的 JavaScript
库在网络社区引起风暴!网络社区越来越充满活力,多样化且在多个方面快速发展。调查每一个主流的
JavaScript
框架和库是不可能完成的壮举。因此,我将分享一些前端开发中最著名和最有影响力的框架和库。让我们看看最佳的
JavaScript web 前端框架,库和工具以及何时使用它们。

另外:

  • 如果我没有包括你最喜欢的 JavaScript 框架,请不要生气。
  • 永远记住持续更新你的框架和库。最新版本的框架和库通常具有最好的跨浏览器和跨设备的支持。你可以使用工具, 比如scanner 来帮助判断一个旧版本是否兼容这一大批设备。

好了,让我们进入列表!

tutorialzine   译文出处:[众成翻译

betseyliu]()   

WEB开发社区总是不乏天才型的程序员、设计师和艺术家,正是由于他们不断推陈出新,
引领着WEB的发展。在codepen上,每天都有数以百计的优秀作品诞生。

这篇文章中, 我们将回顾下3月份的优秀codepen demo, 赶快来看看吧!


银河国际网址手机版 1

mix-blend-mode 与 background-blend-mode

mix-blend-mode 在我之前的一篇文章初略介绍过 — 不可思议的混合模式
mix-blend-mode,与本文的主角
background-blend-mode 一样,都是实现混合模式的。

混合模式最常见于 photoshop 中,是 PS
中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在
CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

简单区分一下这两个属性:

  • mix-blend-mode 用于多个不同标签间的混合模式
  • background-blend-mode
    用于单个标签间内背景图与渐变背景间的混合模式。

background-blend-mode 的可用取值与
mix-blend-mode一样,不重复介绍,下面直接进入应用阶段。

 

AngularJS

Angular 是流行的企业级框架,许多开发人员都在使用它来构建和维护复杂的
web 应用程序。Angular 的人气非常高,包括 Domino’s Pizza, Ryanair, iTunes
Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular
是一个由谷歌支持的开源框架。Angular 自称是 HTML
的一个扩展,用来构建复杂的 web
应用程序。另外如果你熟悉 TypeScript, Angular
2就是用它构建的。

Donut progress bar

在这个demo中, 进度条是由”辛普森家族”成员的图片组成的,每点击下箭头,
就会出现一张新的照片。


银河国际网址手机版 2

使用 background-blend-mode: lighten 实现任意图片颜色赋色技术

OK,下面进入正文。如何通过纯 CSS 技术实现任意图片的任意颜色赋色技术呢?

假设我们有这样一张图片,JPG、PNG、GIF
都可以,但是有一个前提要求,就是黑色纯色,背景白色

银河国际网址手机版 3

利用 background-blend-mode ,我们可以在图片下叠加多一层其他颜色,通过
background-blend-mode: lighten
这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。

简单的 CSS 代码示意如下:

.pic { width: 200px; height: 200px; background-image: url($img);
background-size: cover; } .pic1 { background-image: url($img),
linear-gradient(#f00, #f00); background-blend-mode: lighten;
background-size: cover; }

1
2
3
4
5
6
7
8
9
10
11
12
.pic {
    width: 200px;
    height: 200px;
    background-image: url($img);
    background-size: cover;
}
 
.pic1 {
    background-image: url($img), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}

效果如下:

银河国际网址手机版 4

注意,上面 CSS 这一句是关键
background-image: url($img), linear-gradient(#f00, #f00);
,这里我叠加了一层渐变层 linear-gradient(#f00, #f00)
,实现了一个纯红色背景,而不是直接使用 #f00 实现红色背景。

 

这个作者的更多文章

  • 构建一个基于 Node.js 的聊天室 Web
    App:远程调试
  • 构建一个基于 Node.js 的聊天室 Web App:通过 WebSockets
    连接

Angular 是一个 MVC
类型的框架。它提供了模型和视图之间的双向数据绑定。该数据绑定允许每当数据改变时,两边自动更新。
 它使你能够构建可复用的视图组件。它提供了一个服务框架,使得后端-前端服务通信更容易。最后,它只是普通的
JavaScript。

何时使用
AngularJS?当你正在构建一个复杂的 web
前端应用程序,同时需要一个模块化的框架来处理一切时。

GitHub: 
当前版本: 1.4.7/1.2.29
网址: angularjs.org

Energy 3

这个充满魔性的demo展示了很多射向不同方向的线条的运动轨迹以及颜色变化,
动画很炫, 动作很酷, 颜色也很抓眼球哦! animations, amazing movements
and eye-catching colors.


银河国际网址手机版 5

使用 background-blend-mode: lighten 实现主色改为渐变色

这个方法更厉害的地方在于,不单单可以将纯色图片由一种颜色改为另一种颜色,而且可以将图片内的黑色部分由单色,改为渐变颜色!

简单的 CSS 代码如下:

.pic { background-image: url($img), linear-gradient(#f00, #00f);
background-blend-mode: lighten; background-size: cover; }

1
2
3
4
5
.pic {
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
}

可以得到这样的效果:

银河国际网址手机版 6

OK,看到这里,大家伙肯定会有疑问了,这是怎么实现的呢?

这里就有必要解释一下 lighten
这个混合模式了。变亮,变亮模式与变暗模式产生的效果相反:

  1. 用黑色合成图像时无作用,用白色时则仍为白色
  2. 黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式

CodePen Demo —
纯色图片赋色技术尝试

 

React

React 是今年最受欢迎的 JavaScript
项目!每个人都似乎在谈论
ReactJS。去年我参加的每一个会议,至少有好几个议题是关于 React
和同家族的其他库(Flux, Redux)的。React
是开源软件,主要由 Facebook
开发,其他大型科技公司也有贡献。React 自称是一个用于构建用户界面的
JavaScript 库。

React 主要是 MVC 中的
V。它的重点完全在 MVC 的 V
部分,忽视应用程序架构的其余部分。它提供了一个组件层,使得创建 UI
元素,组合元素变得更容易。它使用虚拟 DOM,因此优化了渲染,且允许从
node.js 渲染
React。此外,它实现了单向响应的数据流,因此比其他框架更容易理解和使用。

作为 MVC 中的 V,很多项目将 React 结合
Angular 或 Ember 这样的框架使用。

何时使用
React?
当你想要一个强大的视图层,但不需要在应用程序的其余部分使用一个复杂的框架,或者你在
Angular、Backbone 或 Ember
应用上需要一个视图层时。当你正试图建立一个同构 web 框架时。

 

GitHub: 
当前版本: v0.14.0
网址: Facebook.github.io/react/

Just an illusion

通过点击和拖动鼠标就就可以在这个demo里面绘制出一串小球体,
他们之后会围绕着Y轴旋转, 组成带有3D效果的图像。
你可以添加任意多的球体,发挥你的想象力吧!


银河国际网址手机版 7

局限性尝试 — 使用透明底色图片

上述方法要求了图片本身内容为纯色黑色,底色为白色。那么如果像 PNG
图片一样,只存在主色,而底色是透明的,是否能够同样实现效果呢?

假设我们有一张这样的 PNG 图片(灰色主色,透明底色):

银河国际网址手机版 8

按照上面的方式实现一遍,结果如下:

银河国际网址手机版 9

任意颜色赋色技术尝试 — PNG图片

 

很遗憾,当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。所有,这个技术也就存在了一个使用前提:

  • 图片的底色为白色,主色为黑色

当然主色也可以是其他颜色,只是这个时候叠加需要考虑颜色的融合,没有使用黑色直观。

 

Backbone

Backbone 是一个著名的简易框架,适合单个 JavaScript 文件。Backbone
已经存在有一段时间了,是以 CoffeeScript 和 Underscore 闻名的 Jeremy
Ashkenas 所开发的。对于一些为小型 web
应用寻找一个结构简单的框架,而不想引入如 Angular 或 Ember
这些大型框架的团队,Backbone 特别受欢迎。

银河国际网址手机版,Backbone 提供一个完整的 MVC
框架以及路由。模型允许键-值绑定和数据变化的事件处理。模型(和集合)可以连接到RESTful
API。视图具有声明式事件处理,路由在处理 URL
和状态管理上做的很出色。它包含你创建一个单页面应用程序所需要的一切,且没有提供太多东西,没有不必要的复杂度。

何时使用 Backbone?Backbone
是我创建简单 web 应用程序的首选框架。

GitHub: 

当前版本: 1.2.3
网站: backbonejs.org

Look Alive

这是一个使用WebGL和Threejs创建的人眼3D模型,
眼球可以跟随着你的鼠标箭头移动。 眼球的真实度很高,
同时阴影和光照效果也很棒!


银河国际网址手机版 10

background-blend-mode 实现图片任意颜色赋色技术总结

综上,我们确实只需要两行代码就可以实现白色底色黑色主色图片的任意颜色赋色技术。

{ background-image: url($img), linear-gradient(#f00, #00f);
background-blend-mode: lighten; }

1
2
3
4
{
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
}

其中,background-image
的第二值就是你希望赋值给的渐变色(当然,渐变色可以生成纯色)。

我们同时给一个标签设置了背景图片和渐变色,然后利用了
background-blend-mode:lighten 这个关键属性,达到了类似 PS
里的混合模式效果。

看起来 background-blend-mode 名为混合模式,但似乎表现上更像是 PS
当中的一种的剪切蒙板,混合模式是修改图片本身,蒙版跟遮罩都是在图片上一层通过叠加其他层对图像进行调整。

那么由此方法本身可以想到,一些能对图形进行色彩调整的 CSS
属性是否也能达到同样的功能呢?诸如:

  • filter 滤镜
  • mask-image
  • mask-clip

感兴趣的读者可以自行尝试,在接下来的文章我也会继续进行探讨。

黑色纯色,背景白色可能局限了这个技巧的使用场景,但是在很多白色底色的页面中,这个方法还是可以很好的发挥作用,许多
ICON 图片不再需要两个或者更多个颜色的版本!

 

Ember

Ember 是一个固执的 web
应用程序框架,关注程序员的工作效率。Ember
比较流行,它的核心团队包括像曾是 Ruby on Rails 和 jQuery 核心团队成员的
Yehuda Katz 的聪明人。Ember 自称是“一个用于创建大规模 web
应用程序的框架”,且不浪费你的时间。它很固执,为你提供了很多选择。

Ember 也是一个 MVC
框架。它包括一个模板和视图引擎,当数据变化时自动更新,就像
Angular,Backbone 和 React
一样。它包含 web组件 的思想,让你使用自己标签扩展 HTML(就像
Angular 一样)。它也有一个知道如何与你的 RESTful API
一起工作的路由和模型引擎。

何时使用 Ember?当你只需要一个可以运行的框架时。当你因为预算紧张或工期很短而不需要灵活性时,请使用
Ember。

GitHub: 
当前版本: 2.1.0
网站: emberjs.com

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图