Web 前端设计语言

前端工程师的菜!姗姗来迟的中文WebFont网络字体

WebFont 技术可以让网页使用在线字体,而无需使用图片,在国外非常流行,由于中文的特殊情况,有几个难题一直没搞定。现在在国内几位技术大牛的努力下,终于有了第一款神器.三年前,有一个设计师面试一位 Web 前端工程师,其中有一段这样的对话:“如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?”“我会给设计师讲解工程上面临的问题,争取他理解。例如:如果文本使用图片,以腾讯站点的访问量来...
2年前 (2016-08-22) 阅读(458) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

【Html】图片中的Data URL介绍

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。演示下面是演示使用Data URL技术在页面上显示图片,你可以查看源代码,看看它和传统的图片引用有什么不同。传统的img用法...
2年前 (2016-08-22) 阅读(335) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

15种CSS3混合模式让图片产生令人惊艳的效果

注意:只有使用最新版的谷歌浏览器、火狐浏览器,才能正确的显示本文中的演示。Photoshop里最没有用处的一种功能——但也有人说是使其超出竞争对手的一种功能——就是混合模式(blend mode)。混合模式是指两个像素点叠落到一起,用不同的方法混合它们的颜色。比如,darken颜色混合模式,就是选择两个像素中颜色更深的一个输出。当将混合模式运用到整张图片上时,会产生让人惊讶的效果。虽然并不是Adobe的Photoshop发明了混合模式,...
2年前 (2016-08-22) 阅读(389) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

【CSS3】Vendor Prefix:为什么需要浏览器引擎前缀

浏览器引擎前缀(Vendor Prefix)是什么?Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前...
2年前 (2016-08-22) 阅读(301) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

如何在浏览器控制台(console)里输出彩色样式调试信息

最近我在研究Google+,因为发现它里面实现以一些非常奇特的效果。我打开谷歌浏览器的控制台,看到了下面的信息:警告!使用此控制台可能会让攻击者利用Self-XSS(自跨站脚本)攻击来冒充你,并窃取你的信息。请勿输入或粘贴你不明白的代码。在控制台(console)里看到这些信息内容我并不奇怪,让我感到奇怪的是,“警告”两个字是红色的,而且背景色是黄色的。而且字体也不其它文字要大一些。这格式化的样式现实效果是如何实现的?经过翻查它们的代码...
2年前 (2016-08-22) 阅读(436) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

【JavaScript】console.time和console.timeEnd用法

console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。今天要介绍的console.time和console.timeEnd就是其中之一。console.time方法是开始计算时间,console.timeEnd是停止计时,输出脚本执行的...
2年前 (2016-08-22) 阅读(278) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

JavaScript使用async 和 defer 属性异步加载执行

HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的。比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现。而HTML5里给JavaScript标记提供的async属性,使JavaScript能异步加载执行。之前我需要各种的JavaScript插件来实现这种功能,但现在这个新属性能让我们轻松的实现异步加载。async – HTML代码真的非常简单,就像下面这样:&l...
2年前 (2016-08-22) 阅读(306) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

【CSS3】详解CSS中:nth-child的用法

近段时间发现了css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途:Tips:目前IE8以下包含IE8的浏览器还不能兼容!:nth-child(2)选取第几个标签,“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090; color:#fff;...
2年前 (2016-08-22) 阅读(322) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

【jQuery】十条jquery代码片段助力Web开发效率提升

目录JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较...
2年前 (2016-08-22) 阅读(355) 赞一个 (0) 评论() 链接直达
Web 前端设计语言

前端开发中的字符编码详解

前端开发过程中会接触各种各样的编码,比较常见的主要是UTF-8和HTML实体编码,但是web前端的世界却不止这两种编码,而且编码的选择也会造成一定的问题,如前后端开发过程中不同编码的兼容、多字节编码可能会造成的XSS漏洞等。因此,本文旨在更好的全面了解涉及前端开发领域的字符编码,避免可能出现的交互和开发中的忽视的漏洞。URL编码我曾经在URL编码解码和base64一文中讲述了URL编码中的三组函数,并对比了这三组函数与base64编码的...
2年前 (2016-08-22) 阅读(334) 赞一个 (0) 评论() 链接直达

程序喵 www.ibloger.net

关于本站 站内留言 给我写信 文章订阅