Menu
Woocommerce Menu

Github资源收集,PNG格式小图标的CSS任意颜色赋色技术

0 Comment


PNG格式小图标的CSS任意颜色赋色技术

2016/06/08 · CSS · 1
评论 ·
PNG

原文出处:
张鑫旭(@张鑫旭)   

Github资源收集

2015/08/30 · CSS,
HTML5,
JavaScript ·
Github

原文出处:
leozdgao的博客   

Github上已经给别人点了很多赞了,觉得有必要开始整理起来。这里用于整理我在Github中的starred项目,方便之后检索
,同时分享出来。本文将会不断更新和整理。

用“MEAN”技术栈开发web应用(一)AngularJs前端架构

2015/09/09 · CSS,
HTML5,
JavaScript · 1
评论 ·
MEAN

原文出处:
吕大豹   

一、眼见为实

CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo

上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的:

图片 1

下面,我们随意选择一个颜色,例如紫色,然后:
图片 2

图片 3

是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了。

SVG, icon fonts等技术似乎也不是那么耀眼了。

HTML/CSS

  • html5-boilerplate
  • html5demos
  • web项目启航包
  • CSS术语表
  • ES5 shim
  • html5shiv
  • Respond(Media Query
    polyfill)
  • Modernizr
  • normalize.css
  • bootstrap
  • Semantic-UI
  • amazeui
  • masonry 栅格布局库
  • lost 栅格布局库
  • bootmetro win8 metro风格UI库
  • CSS模拟各种设备
  • CSS spinners
  • css-loaders
  • loaders.css
  • animate.css
  • velocity
  • dashboard(Bootstrap模板)
  • 雪碧图生成工具
  • svg-sprite-polyfill
  • Snap.svg
  • SVG图标集
  • 纯css图标
  • Font-Awesome
  • material-design-icons
  • Material Design
    Lite
  • Material风格css框架
  • fullPage.js
  • Fullpage原生实现
  • bootstrap-daterangepicker
  • bootstrap-additions
  • pjax
  • Ace(Cloud9的文本编辑器)
  • quill 文本编辑器
  • plupload
  • postcss
  • three.js
  • stage.js

前言

不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb、express、angularjs、nodejs,由于这几项技术涵盖了从前端到后端再到数据库,可以用他们完整的开发一个web应用了,所以成了一个非常牛逼的组合,颇有当年LAMP的气势。前端要从切图仔迈向全栈的路上,这几门技术必须得有所涉猎。本系列文章利用自己虚构的一个小项目为例,对“使用MEAN技术栈开发web应用”做一个入门级的介绍。

二、原理其实很简单

原理其实很简单,使用了CSS3滤镜filter中的drop-shadowdrop-shadow滤镜可以给元素或图片非透明区域添加投影。

如果对drop-shadow不是很了解,建议先看看前些时间写的“CSS3
filter:drop-shadow滤镜与box-shadow区别应用”一文!

对于背景透明的png小图标而言,如果我们施加一个不带模糊的投影,不就等同于生成了另外一个颜色的小图标了吗?

然后,我们把原始图标隐藏在容器外面,投影图标在容器中间,不见给人感觉是赋色效果了?

比方说本文的demo,如果把icon父级的的overflow:hidden去掉,原始的图标就暴露出来啦!

图片 4

可能是常用的工具库

  • moment
  • lodash
  • highland 流式风格工具库
  • handlebars.js
  • FileAPI
  • CryptoJS加密库
  • Esprima(ECMAScript语法解析)
  • jison 语法解析器生成器
  • bowser 判断浏览器
  • reqwest(Ajax实现)
  • superagent
  • es6-promise
  • core-js(各种js
    pollyfill集合)
  • svgo SVG优化工具
  • stateman 前端路由
  • dragdealer
  • pdf.js
  • filesize.js
  • berserkJS
  • umd
  • requirejs

AngularJs的争议

angular,简称ng,是google出品的优秀框架,在2013~2014年大红大紫,但是国内好像慢一拍,我从2015年才看到使用ng的项目大量出现。ng自出现伊始就有人诟病太难上手了,完全不同的开发方式,团队开发更是不知道如何组织代码。不过随着jquery这位老大哥逐渐被抛弃,大家开始慢慢接受mvvm这样的编程思维。然而一个不好的消息是,ng团队打算重构的angular2.0版本要发生重大变革,与1.0不能同日而语,虽然官方有1.0向2.0迁移的方案,但额外的工作总是不太好的,而且使用2.0还要付出更多的学习成本。

再加上今年又有react这个实力派雄起,ng的风头顿时被抢过去了,人们又开始研究react下的编程方式。不过我估计react的真正实用也得等到一两年后。眼下angular1.x也仍然是一个不错的选择。尽管有2.0的变革,但是1.4还是一个稳定版本,我们使用稳定版本肯定是不会有问题的。

所以我的结论是,但用无妨,不会存在白学了这种事情,就算将来angular1.x废弃了,你学到的编程思维还是在的。

本文讨论如何使用AngularJs进行前端的架构,对于ng的基础知识不做讲解,需要了解的同学可以看我之前写过的一个系列

三、实现的时候实际有难度

原理如上面,我一开始实现的时候,以为很简单,因为分分钟可以实现自己的想法,后来发现有些天真了,Chrome浏览器怎么都显示不出来;FireFox浏览器却可以!咦,究竟发生了什么。

在Chrome浏览器下,drop-shadow有一个如下的呈现特性:

在Chrome浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其drop-shadow是不可见的;实体部分哪怕有1像素可见,则drop-shadow完全可见。

所以,我试过:

  • text-indent负值隐藏原始图,无投影,失败!
  • clip剪裁隐藏,无投影,失败!
  • margin负值隐藏原始图,无投影,失败!
  • left负值隐藏原始图,无投影,失败!

通通不行,实现遇到了巨大的阻碍。

后来,灵光一现,如果我实体部分也在可视区域内,但是是透明的,会怎样呢(反正不会有投影出来)?

于是,我就试了下曾经立下无数战功的透明边框,卧槽,又立功了,成了!

因此,下面这一个CSS声明是千万不能少的:

border-right: 20px solid transparent;

1
border-right: 20px solid transparent;

代码处理工具

  • babel
  • traceur-compiler
  • webpack
  • node-browserify
  • amdclean
  • gulp
  • grunt

练手项目简介

为了系统的学习“MEAN”技术栈,我虚构了一个小项目,先做一个介绍。

QuestionMaker,是一个用于生成调查问卷的系统,用户可以编辑试题(选择题、填空题),并可以实时预览编辑结果。然后还可以编辑一份试卷,为试卷添加试题,然后保存为一分完整的调查问卷。有点类似于调查派。先上一张截图吧:

图片 5

项目的功能主要是CRUD操作,所以非常适合angular的应用场景,双向绑定对于实现实时预览这样的功能简直是信手拈来。

项目的前后端是完全分离的,后端不渲染页面,只提供数据接口,前端使用ng的动态模板来渲染页面,通过ajax请求来获取所需数据。

项目我已经开源到github,有兴趣的同学可以查看:

四、关于兼容性

IE13+支持,Chrome和FireFox浏览器支持,移动端iOS支持,Android4.4+支持。也就是,基本上,移动端现在可以使用这种技术了。

既节约了流量,也让我们的开发更简单,维护更方便了。

移动端

  • Swipe
  • mobileTech
    移动端资源收集

前端目录结构

用ng来构建一个项目应该如何安排目录结构呢?为了不人工增加复杂度,我这里没有用bower来管理依赖库,也没有其他文章中介绍的那样用yeoman来生成项目,只是单纯的手动来创建目录,这样可以把我们的注意力集中到项目的核心上,目录结构是这样的:

前端的代码都在src目录下,包括入口文件index.html,这样方便我们后续做合并压缩等编译工作,编译后的文件可以一并放入dist目录下。

五、结语碎碎念

其实,本文的技术发明(主要是透明border的处理)在“drop-shadow vs
box-shaow”这篇文章完成后就研究出来了。本来想写个小专利,蹭点早饭钱。结果,新厂子写专利没费用,而且周期要3年。

3年我儿子都可以打酱油了。所以,罢了,直接分享出来。

今天8号,本月已经6篇文章了,写文章暴走了下。就是为了腾出大段且连续的业余时间,要秘密进行其他大项目。

时光机
如果你是3~5年之后看到此文,而且你是2016年上大学的,那么,我在写这篇文章的时候,你可能正在翻来覆去睡不着,还在焦虑明天的考试。总之,不要担心,我给大家找了一个非常硬的后台,保证你们这次高考无忧,放心睡觉吧!哟,你在好奇是哪个后台。嘻嘻嘻嘻,说出来怕吓着你————观音菩萨!

2 赞 6 收藏 1
评论

图片 6

测试框架和断言库

  • chai
  • jasmine

首页index.html

这是项目的入口页面,其实就是一个大容器,在这里加载所有的js和css文件,然后提供一个视图容器就够了,因为从这个页面以后,我们页面就不再会有跳转,全部是通过前端路由来做局部刷新,首页的代码非常精简:

JavaScript

<!doctype html> <html ng-app=”QMaker”> <head> <meta
charset=”utf-8″> <title>Question Maker</title> <link
rel=”stylesheet”
href=”/src/lib/bootstrap-3.3.5/css/bootstrap.min.css”> <script
src=”/src/lib/jquery-1.9.1.min.js”></script> <script
src=”/src/lib/angular-1.4.1.min.js”></script> <script
src=”/src/lib/angular-ui-router.min.js”></script> <link
rel=”stylesheet” href=”/src/css/base.css”> <!–{main}–>
<script src=”/src/js/app.js”></script> <script
src=”/src/js/controllers.js”></script> <script
src=”/src/js/directives.js”></script> <script
src=”/src/js/filters.js”></script> <script
src=”/src/js/routes.js”></script> <script
src=”/src/js/services.js”></script> <!–{endmain}–>
</head> <body> <div class=”navbar navbar-default”>
<div class=”container-fluid”> <div class=”navbar-header”>
<a href=”#/” class=”navbar-brand”>Question Maker</a>
</div> </div> </div> <div class=”maincontent
container-fluid” ui-view> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html ng-app="QMaker">
<head>
    <meta charset="utf-8">
    <title>Question Maker</title>
    <link rel="stylesheet" href="/src/lib/bootstrap-3.3.5/css/bootstrap.min.css">
    <script src="/src/lib/jquery-1.9.1.min.js"></script>
    <script src="/src/lib/angular-1.4.1.min.js"></script>
    <script src="/src/lib/angular-ui-router.min.js"></script>
 
    <link rel="stylesheet" href="/src/css/base.css">
    <!–{main}–>
    <script src="/src/js/app.js"></script>
    <script src="/src/js/controllers.js"></script>
    <script src="/src/js/directives.js"></script>
    <script src="/src/js/filters.js"></script>
    <script src="/src/js/routes.js"></script>
    <script src="/src/js/services.js"></script>
    <!–{endmain}–>
</head>
 
<body>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#/" class="navbar-brand">Question Maker</a>
            </div>
        </div>
    </div>
    <div class="maincontent container-fluid" ui-view>
 
    </div>
</body>
 
</html>

Node.js

  • node
  • io.js
  • nw.js
  • PM2
  • connect
  • q
  • async
  • koa
  • node-restify
  • node-static
  • step
  • then.js
  • co
  • node-glob
  • thunks
  • forever
  • request
  • bluebird
  • FormData For node.js
  • node fs模块扩展
  • node-portfinder
    获取可用的端口
  • yargs 方便操作process.argv
  • Editor
    Framework桌面应用框架
  • OAuth2orize
  • Inquirer.js 命令行交互
  • jsdom
  • node-lessons包教不包会
  • nodemon
  • node-supervisor
  • node-formidable
  • node-xml2js
  • bagpipe

入口文件app.js

有了入口页面,还得有一个js的启动入口,就是这个app.js了,在这里它只做了两件事情:

  1. 启动angular,代码只有一行:

JavaScript

var app = angular.module(‘QMaker’, [‘ui.router’]);

1
var app = angular.module(‘QMaker’, [‘ui.router’]);

我们拥有了一个名为app的全局模块。这里把ui.router给注入了,因为我们整个应用都用ui-router来做路由,后面会做详细介绍。

2.
把ui-router的$state和$stateParams服务挂到$rootScope上,这样我们在后面所有的模块中,都能够访问到路由参数,不必在每个地方都注入一次了。代码也是相当简单:

JavaScript

app.run(function($rootScope, $state, $stateParams) { $rootScope.$state =
$state; $rootScope.$stateParams = $stateParams; });

1
2
3
4
app.run(function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});
标签:,

发表评论

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

相关文章

网站地图xml地图