其实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里新增的一个非常有用的元素。
Range就是范围:年龄范围,工资范围,人数范围。当页面上需要用户输入一个在一定范围内的数字时,使用一个类似滑块控件是十分方便的。一个典型的滑块控件使用场景就是颜色选择器中用左右拖拽箭头来调节RGB颜色值。
之前在介绍HTML5的placeholder属性时,曾实现了一些页面例子让大家参考,但这些例子里的背景文字都是灰色的,样式很单一,其实它们可以做的更好看,CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。
滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果,经常使用PhotoShop的人应该非常清楚,每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜,不需要你使用任何做图软件,用纯CSS就会生成多种的滤镜效果,比如模糊效果,透明效果,色彩反差调整,色彩反相等等
你可能已经听说过,HTML5里引入了几种新的input类型。在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等。而HTML5到来之后,新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等。
在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。 当开发完成后,我发现了这个很酷的jQuery plugin(由@jackrugile开发)。 于是我就开始思考,我应该做出这个小的CSS project。
YouTube上的字幕和视频是独立的,没有合成到一起,所以,下载下来的视频是不含字幕的。这当然不行的,英语无字幕的视频估计没有几个人会喜欢。那么,如何能把字幕也下载下来呢?
input输入框背景文字提示效果在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息。
对于第二种方法,也就是所谓的Web font网络字体。我需要先说一下它的基本原理。CSS有一种标记叫做@font-face,在@font-face声明里,你可以声明一种字体,指定这种字体字体库文件从网络中的某个地方下载。具体的写法如下:
这款简单而有趣的游戏是使用HTML5+js开发完成的,需要提醒大家注意的是,你需要使用支持HTML5的浏览器才能玩这个游戏,也就是说,你需要使用火狐浏览器或谷歌浏览器。游戏中,如果自定义参数设置的过于夸张,很可能会导致你的浏览器崩溃。回合时间是指鸭子飞走前的飞行时间。难度值可以是1-10,是来控制鸭子的飞行速度的。高于8的难度都属于有些夸张。鸭子数和子弹数都有个上限——你可以输入任何值,如果数目设的太大,程序是不会显示的。