我相信视差效果是一种能让你的读者在浏览网页时发出“哇塞”声的效果。所以,在这里,我将要向大家展示一个用jQuery实现的视差效果的例子。在本教程中,我将详细介绍如何用jQuery来移动景图达到具有动画视觉效果的内容。
开发自适应网页的一个必备硬件条件是能模拟出从小到大、从手机到巨屏显示器的各种屏幕大小情况。一般在自适应网页设计最小要考虑的屏幕是400px,最大的可能要到1920px;如果你像我一样只有一台屏幕款是1360px笔记本,那测试比它更大的屏幕就成了问题。
border-image看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的边框。下面是一个实例演示,你可以调整窗口的大小,看看有什么变化。
也许对与你来说这并不是一个什么新鲜信息。除了你可以使用标准宽度值(例如5px或1em)外,border-width属性可以接受预定义的常量值:medium, thin, 和 thick
我相信有些小知识会让你大吃一惊。 跟着最新的CSS规范,text-decoration现在的写法是这样的: a […]
这里的border属性的用法实际上是一种简写的形式,它分别设置了border-style, border-width, 和border-color — 用一句代码表示它们三个。
这是一个很让人困惑的CSS特征,我之前也谈到过它。我们大家都知道,当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bottom等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
之前说到了background-clip,你可能会想到clip属性。它的作用是按指定的尺寸、规定的大小裁剪元素。很多简单,但唯一你需要注意的事情是,clip只会在绝对定位的元素上生效。所有,你必须这样做:
在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position。从CSS3开始,又增加了3个新的属性值,加起来一共8个。下面是按顺序分别代表的意思:
其实visibility可以有第三种值,就是collapse。当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。
这是一个用HTML5制作的智力游戏,有相当的难度。每个方块一面橙色,一面蓝色。点击一个方块,这个方块的颜色会翻转,并且,与它邻接的方块的颜色也会翻转。使拼板全部变成蓝色, 你就算过关了。
对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方。
随着浏览器的进步和发展,网页视差技术获得了越来越多的应用。各种流行时尚的产品公司纷纷在产品描述时使用各种各样的HTML5和CSS3技术来充分选用他们的产品的特性,而网页视差技术就是其中的一项重要技术,通过视差,产品的浏览者很获得前所未有的新奇感受。
今年早些时候,我们注意到,耐克官方网站出现了一个具有神奇的滚动视差效果的页面。它是如何实现的?这里,我将通过一些代码解释这个耐克鞋的具有视差效果的页面的工作原理。
今天要向大家分享的是一个简单的具有视差效果的标签页切换技术。我们使用CSS动画技术,控制标签页切换时产生的动画动作,通过背景图的移动,让浏览者感觉到神奇的视差效果。
调用jQuery.position()方法会返回相对于父元素的位置,jQuery官方文档中描述说,它跟.offset()方法不一样,.offset()返回的是相对于document的位置,而.position()返回的是相对于父元素的位置。
相比起其他网站语言来说,PHP没有自己的server,需要依赖Apache等服务器,如果你使用Tomcat,你就会明显感觉到PHP少了一个后台控制台,在Tomcat的控制台里你可以事实看到程序输出的日志信息。而PHP就缺少了这种能力,当你遇到在开发PHP程序时,需要实时看到后台打印出日志时,我想你的愿望很难实现。
IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据,你可以使用cookies或local storage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存,不像cookies那样只是临时的。
虽然并不是Adobe的Photoshop发明了混合模式,但它的实现效果是最真实的。但现在,你不需要使用Photoshop来运用混合模式美化你的图片,因为CSS3里提供里动态的实现这种效果的方法。
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果,它其实就是利用图片形成不同的层,分别以不同的速度,不同的方向移动产生的效果。这会产生出很奇妙的视觉效果,能有力的吸引住浏览者的目光。
最新HTML5.1规范元素表。这是一份仍未最终完成的规范:最后更新日期是2014年7月7日。本页内容是HTML和XHTML元素的过去和现状。
学会开发浏览器插件是一种很强大的技能,因为现在越来越多的东西都开始往网上转移,人们对浏览器的倚重越来越大,插件也就有了越来越多的用场,所以,学习一些浏览器插件技术会有好处的。
个人认为,对于Web前端程序员和跟HTML和CSS打交道的人来说,jQuery是有史以来最伟大的发明。jQuery的出现使Web程序员的开发效率突飞猛进,不亚于工业革命给人类生产力带来的提升。
CSS3给Web程序员提供了无限发挥的创造空间,以前只有视频、Flash、JavaScript才能实现的动画效果,如今只需要纯CSS+HTML就能做到。你能相信吗?这里呈现的所有动画,都是由一个DIV元素实现,纯CSS3技术。
GIF动图统治网上娱乐世界已经很长一段时间了,而Twitter却最近才宣布支持GIF格式,晚随晚,但毕竟是一件让人高兴的事情,可是,事实的真相远非你所想象的,上传到Twitter上的GIF动图在显示的时候却变成了MP4视频。
我之前说了很多如何将canvas图像保存成图片并下载的方法,但这些方法都是将图片保存到客户端,而我们的签名需求是需要将canvas的内容保存到服务器端,如何实现?
最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上。目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果。
之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单。但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢?
HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击,像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上,因为用HTML5+CSS3实现幻灯片不仅更简单、容易,而且功能更强调,特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。
因为困惑于那种浏览器最流行,在我的苹果电脑上,我经常在谷歌浏览器和火狐浏览器之间来回切换。这两种浏览器长的如此之像,以至于我只能通过看任务栏上它们的程序名称来分辨。今天,我看到了一张Opera浏览器的截图,让我相信它们三个如出一辙。
这里提供了各种各样的超链接特性,有些是借助伪元素,有些是借助svg,有些是借助HTML5动画。用你的鼠标悬停在这些链接上,给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器,比如谷歌浏览器或火狐浏览器。
最近在使用Wordpress时,页面加载异常缓慢,一个简单的页面需要等待很久,使用firebug查看发现,是浏览器一直在等待页面中嵌入的谷歌网络字体(google fonts)链接fonts.googleapis.com,直到超时。这说明fonts.googleapis.com这个网站也被封锁了。
在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”,会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。