搜索内容

丹青 的文章
  • CSS颜色混合模式

    虽然并不是Adobe的Photoshop发明了混合模式,但它的实现效果是最真实的。但现在,你不需要使用Photoshop来运用混合模式美化你的图片,因为CSS3里提供里动态的实现这种效果的方法。
    丹青 前端教程 2020年11月28日
  • Javascript网页截屏的方法

    最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上。目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果。
    丹青 前端教程 2020年11月28日
  • 界面设计:一个像素之差产生的距离

    当使用Opera浏览器测试手头上正在开发的一个网站时,我发现在激活浏览器中的标签页(tab)时遇到了很大的麻烦。我说的“激活”是指用鼠标点击浏览器的标签页标签(tab)时,标签页没反应,没有切换成当前激活页。我需要点击几次才能让我想要的该死的标签页切换出来。
    丹青 前端教程 2020年11月26日
  • 谷歌再次修改了它的logo,这次只修改了一个像素

    谷歌,我们每天的生活都离不了的搜索巨人,在这周,对它的官方logo进行了一次修改。这次的改动非常小,小到你几乎无法察觉到。“Google”中“g”和“l”被轻轻的移动了一点位置——为了让logo更好看。
    丹青 前端教程 2020年11月26日
  • abbr:HTML5中缩略词标记的重要作用

    是一个非常有用的标记,但很明显没有被web文档撰写者重视,特别是没有被科技文章编写者重视。为什么这样说呢?不知道你有没有这样的经历,哦,我记起了一篇有趣的文章,《Java程序员的堕落》,强烈推荐你去读一下,但我要说的是,里面列举的那几百个奇怪的缩略词,你认识几个
    丹青 前端教程 2020年11月26日
  • 用JavaScript将信息拷贝到剪贴板的方法

    在很多视频网站或提供了网址分享功能的网站上,你会发现当你点击分享组件后网址或分享代码会自动的粘贴到你的系统剪贴板里。这种能将网页内容自动粘贴到剪贴板的功能会给用户带来很大的方便。不幸的是,Flash 10毁掉了大部分所有的完成这个任务的方法。而幸运的是,还有一个工具叫做ZeroClipboard。ZeroClipboard使用了一个替换的Flash,并和JavaScript交互,能让你把任意内容通过JavaScript拷贝到系统剪贴板板里。
    丹青 前端教程 2020年11月26日
  • 使用async属性异步加载执行JavaScript

    HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的。比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现。而HTML5里给JavaScript标记提供的async属性,使JavaScript能异步加载执行。之前我需要各种的JavaScript插件来实现这种功能,但现在这个新属性能让我们轻松的实现异步加载。
    丹青 前端教程 2020年11月26日
  • JavaScript人脸识别技术

    我一直对人工智能识别技术非常感兴趣,因为我无法想象这究竟是一种什么样的算法,什么样的分析过程。无论是声音识别、人脸面部识别或其它种识别,人们的外貌、说话的方式都是如此不同,一种图片你可以用不同的方式、从不同的角度拍摄,我不能理解这些识别技术是如何做到的。
    丹青 前端教程 2020年11月26日
  • 用CSS画圆

    我曾经向大家分享了一个非常巧妙的用纯CSS画三角形的技巧。在过去的一年里,我发现这种用CSS画三角形的技术非常的有用和高效,尤其是创建提示框/提示符等类似的网页效果上。另外一种也可以用CSS简单的实现的形状是圆形。使用border-radius,你可以画出各种漂亮的圆形图案。
    丹青 前端教程 2020年11月26日
  • 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch)。
    丹青 前端教程 2020年11月26日
  • JavaScript里获取电池状态的方法

    从Mozilla Aurora 11起,火狐浏览器里实现了一些新功能,其中一个就是对电池状态接口的基本实现。这个很简单的接口能提供你关于电池当前电量,是否在充电等信息,以及一些电池状态变化事件。让我们来看看效果!
    丹青 前端教程 2020年11月26日
  • HTML5里原生的右键菜单创建方法

    HTML5规范里有一个被大家忽略里的好东西,那就是右键菜单。HTML5里的右键菜单规范显示,程序员可以通过创建简单的HTML5menu和menuitem标记来生成右键菜单。菜单只在指定区域的右键菜单内显示。所以,你不需要再通过创建浏览器插件来实现这种效果。
    丹青 前端教程 2020年11月26日
  • JavaScript DocumentFragment:更快捷的操作DOM的途径

    我相信很少人知道JavaScript里还有这样一个很有用的东西:DocumentFragment。程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点。程序员可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明,它比直接操作DOM快70%。
    丹青 前端教程 2020年11月26日
  • HTML5的hidden属性

    HTML5给我们带来了很多非常简单但却非常强大的HTML属性:placeholder, download, and autofocus,等等。另外一个新出现的属性就是hidden属性。当一个网页元素有了hidden属性后,它的表现跟CSS的display: none;作用非常相似,元素将会消失,而且不占用任何页面空间。
    丹青 前端教程 2020年11月26日
  • 用CSS制作出绚丽燃烧的火狐狸

    Mozilla在移动世界大会上宣布它的火狐操作系统(Firefox OS)的同时,也宣布了它的合作伙伴,里面至少有3家中国公司,在无疑让人感到兴奋。Firefox OS很有可能会改变那些发展中国家的生活方式,在发达国家中也将会有相当的影响。在合作伙伴官方网页上,有一个绚丽的火狐的动画,我无法放过要对它写点什么的机会——让我来告诉你它是如何制作出来的!
    丹青 前端教程 2020年11月26日
  • 用JavaScript获取伪元素(Pseudo-Element)属性的方法

    CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素。以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的:
    丹青 前端教程 2020年11月26日
  • 各种浏览器全屏模式的方法、属性和事件介绍

    这些全屏API都超级的简单,而且超级的有用。我第一次是在MDN’s BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。
    丹青 前端教程 2020年11月26日
  • JavaScript程序员必备的5个debug技巧

    我一直使用printf调试程序,一般来说都是比较顺利,但有时候,你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用,比如,有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源。谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,叫做”Break on…”,
    丹青 前端教程 2020年11月26日
  • SVG技术入门:线条动画实现原理

    相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的。其实我没有什么好增补的,只是想把这种技术说的更明白些,所以,在这里我要用我的方式把这种技术再讲解一遍。
    丹青 前端教程 2020年11月26日
  • 纯CSS+DIV绘出《辛普森一家》中荷马形象动画演示

    自从大概两年前用CSS给SIGT设计了logo后,我心里一直有个想法,我认为使用Verdana字体和CSS里的绝对定位技术能画出更复杂的图案,也就是说,直接用HTML代码生成嵌入式的矢量图。
    丹青 前端教程 2020年11月26日
  • 详解用CSS绘制3D旋转立方体

    CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例。从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的、具有艺术感染力的视觉效果的编程语言。动画效果的生成变得非常的简单易行。
    丹青 前端教程 2020年11月26日
  • 用CSS实现可伸缩的搜索框

    自从Wordpress自带的主题上放置了一个可以伸缩的搜索框后,这种效果的文本域在新兴的网站上出现的越来越多。实现这种效果其实很简单,鼠标点击下面的搜索图标,你会看到搜索框出现,并慢慢变长。使用简单的几行CSS就能完成它,当然,前提条件是,你要使用支持CSS3的现代浏览器,比如谷歌浏览器,火狐浏览器。
    丹青 前端教程 2020年11月26日
  • 用CSS3的animation轻松实现背景动画:漂浮的云

    背景动画如果用的恰当,会给网页带来意想不到的效果。在过去,我们只能用flash或Javascript来实现。幸运的是,CSS3的流行使得我们完全可以使用它来实现这种效果,不在依赖其它编程技术。一段简单的CSS代码就能轻而易举的达到下面的效果。
    丹青 前端教程 2020年11月26日
  • 3D旋转立方体演示

    请阅读详解用CSS绘制3D旋转立方体 下面的旋转立方体是不是非常的帅呆了! 横向旋转立方体 前 后 上 bot […]
    丹青 前端教程 2020年11月26日
  • 为什么不建议使用@import引入css

    不建议使用@import引入css的原因:1、使用@import引入css会影响浏览器的并行下载;2、多个@import会导致下载顺序紊乱。我们可以通过link标签来引入css。
    丹青 CSS3教程 2020年7月31日