刚刚过去的2014年是个有趣的一年,很多著名的公司都通过不同的媒体和途径公开了他们是如何使用CSS的。包括了他们使用的工具,使用的方法,他们对这些方法的思考,以及涉及到具体的数据和数字。
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法
嗨,为什么我不开发一个自己的音乐可视化程序呢?
你可以将这些属性运用到页面上能出现滚动条的元素(比如body),通过这些设置,你可以设计出各式各样的滚动条:
几乎所有的宽带商(联通宽带、电信宽带、移动宽带、长城宽带、方正宽带等)都会在用户使用它们的宽带服务浏览网页时,在这些网页的页面上强行嵌入自己的广告服务。
本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色,调整它们的外形,适配你对页面UI设计。
在上一篇《理解:Before和:After伪元素》文章,我们举出的只是一个非常简单的使用伪元素:before和:after装饰“引用语”的用法。在这片文章里,我要在看看三个更高级、更绚丽的:before和:after的用法。
所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。
图片延迟加载技术目前已经被各种网站广泛的使用,但最近的一篇《PS美女试验的惊人结果 》文章中使用的确是背景图延迟加载技术。为什么要使用背景图延迟加载技术?下面我们就来说一说这个问题。
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。
我相信视差效果是一种能让你的读者在浏览网页时发出“哇塞”声的效果。所以,在这里,我将要向大家展示一个用jQuery实现的视差效果的例子。在本教程中,我将详细介绍如何用jQuery来移动景图达到具有动画视觉效果的内容。
开发自适应网页的一个必备硬件条件是能模拟出从小到大、从手机到巨屏显示器的各种屏幕大小情况。一般在自适应网页设计最小要考虑的屏幕是400px,最大的可能要到1920px;如果你像我一样只有一台屏幕款是1360px笔记本,那测试比它更大的屏幕就成了问题。
border-image看起来这是一个非常漂亮的CSS功能,它可以让你用图片修饰元素的边框。下面是一个实例演示,你可以调整窗口的大小,看看有什么变化。
今年早些时候,我们注意到,耐克官方网站出现了一个具有神奇的滚动视差效果的页面。它是如何实现的?这里,我将通过一些代码解释这个耐克鞋的具有视差效果的页面的工作原理。
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果,它其实就是利用图片形成不同的层,分别以不同的速度,不同的方向移动产生的效果。这会产生出很奇妙的视觉效果,能有力的吸引住浏览者的目光。
学会开发浏览器插件是一种很强大的技能,因为现在越来越多的东西都开始往网上转移,人们对浏览器的倚重越来越大,插件也就有了越来越多的用场,所以,学习一些浏览器插件技术会有好处的。
GIF动图统治网上娱乐世界已经很长一段时间了,而Twitter却最近才宣布支持GIF格式,晚随晚,但毕竟是一件让人高兴的事情,可是,事实的真相远非你所想象的,上传到Twitter上的GIF动图在显示的时候却变成了MP4视频。
因为困惑于那种浏览器最流行,在我的苹果电脑上,我经常在谷歌浏览器和火狐浏览器之间来回切换。这两种浏览器长的如此之像,以至于我只能通过看任务栏上它们的程序名称来分辨。今天,我看到了一张Opera浏览器的截图,让我相信它们三个如出一辙。
在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”,会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。
Range就是范围:年龄范围,工资范围,人数范围。当页面上需要用户输入一个在一定范围内的数字时,使用一个类似滑块控件是十分方便的。一个典型的滑块控件使用场景就是颜色选择器中用左右拖拽箭头来调节RGB颜色值。
滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果,经常使用PhotoShop的人应该非常清楚,每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜,不需要你使用任何做图软件,用纯CSS就会生成多种的滤镜效果,比如模糊效果,透明效果,色彩反差调整,色彩反相等等
你可能已经听说过,HTML5里引入了几种新的input类型。在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等。而HTML5到来之后,新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等。
YouTube上的字幕和视频是独立的,没有合成到一起,所以,下载下来的视频是不含字幕的。这当然不行的,英语无字幕的视频估计没有几个人会喜欢。那么,如何能把字幕也下载下来呢?
Web程序员最头疼的一个事情就是要记住很多不好记的东西。在CSS里,有很多属性都有组合写法和简写,比如Margin这个属性的组合写法是将margin-top,margin-left,margin-right,margin-bottom是个属性组合使用。而简写是将四种属性合并到一起,变成 margin:1px 2px 3px 4px。虽然很简练,但你需要记住这四个值分别是什么意思。
当使用Opera浏览器测试手头上正在开发的一个网站时,我发现在激活浏览器中的标签页(tab)时遇到了很大的麻烦。我说的“激活”是指用鼠标点击浏览器的标签页标签(tab)时,标签页没反应,没有切换成当前激活页。我需要点击几次才能让我想要的该死的标签页切换出来。
谷歌,我们每天的生活都离不了的搜索巨人,在这周,对它的官方logo进行了一次修改。这次的改动非常小,小到你几乎无法察觉到。“Google”中“g”和“l”被轻轻的移动了一点位置——为了让logo更好看。
下面演示的是用CSS3的translateY来实现竖向居中。
新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及,越来越多的新方法能让我们简洁又轻松的解决以前用很复杂的代码才能完成的事情。比如HTML5中的download和placeholder,CSS3中的计算器和计数器,都使我们Web开发人员的工作量大大降低,因为这些功能的出现使我们省去了很多力气。
SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图,但SVG有很多的用法你可能还不知道。
下面是svg用法的几个演示例子。 把SVG直接当成图片放在网页上 SVG图片可以产生交互效果和滤镜效果 一、S […]
当出现在Table单元格中时,vertical-align的效果会如大多数人的预期一样,它会跟(老的,不鼓励使 […]
在各种技术论坛里经常会有这样的问题提出,“我如何能将这个东西竖向居中?”这个问题通常会跟随着这样一句话,“我使用了 vertical-align:middle,但是不管用! ”这个问题其实有三个层面的原因
Adobe Dreamweaver虽然非常好用,但它并不是唯一一个能够设计、开发、发布精彩网站的Web开发集成环境。我们的开源世界里有很多非常棒的可以完全替代Dreamweaver的各种功能的优秀Web开发工具,更重要的,是免费的。如果你正在寻找Dreamweaver的替代品,下面这8款软件你应该优先尝试一下
HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势,同时在智能手机和平板中也是开发利器。