CSS3 Multi-columns 之列数和列宽
“Multi-column”译成中文就是“多列”,这个&https://csswang.com/8221;Multi-column&https://csswang.com/8220;是W3C给CSS3增加的一个多列布局模块(CSS Multi-column Layout Module)。它主要应用在文本的多列布局方面,对于文本的多列布局我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布…
Flexbox——快速布局神器
简介 在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮…
[Css3教程]-CSS3特效之转换:transform
今天我们一起来探讨一下CSS3中的transform。 语法: transform: none| rotate | scale | skew | translate | matrix; 通过transform-origin可以设置转换参考位置,默认值为50% 50%,即 center center 1.rotate(<angle>):旋转,参照转换中心旋转,如tr…
精选9个不错的HTML5播放器
HTML5中,除了其他强大的功能外,同时还增加了audio标签,利用audio标签就可以播放音乐。下面是9个不错的HTML5音乐播放器。 Media Element MediaElement音频视频播放器是纯HTML5和CSS编写的。同时为很多不同的开源系统提供插件,如WordPress,Drupal,Joo…
HTML5/CSS3教程:使用SVG图片
在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG。 SVG全称是Scalable Vector Graphics,如果你使用过adobe Illustrator的话,相信你对这种适量格式的图片并不陌生! 为什么使用SVG? 文件非常小 能够无损失的缩放尺寸 在Retina…
简单几步掌握HTML5 离线应用
html5 离线应用的说明这里就不多说了,需要请谷歌一下 或 百度一下 ,本文旨在介绍如何实现离线应用开发; 第1步:创建manifest文件,指定缓存文件清单; 可以先新建一个txt文本格式后缀的文件,第一行必须写入 CACHE MANIFEST; 第二行可选的写入一个注…
html5 中的 article 和 section 元素
HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。 最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素? Article…
绝对不可错过的超实用HTML5代码片段
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! HTML5视频和fallback 实用HTML5的一个好处就是简化了视频和音频的嵌入代码量,不过呢…
[Css3教程]-CSS3 Gradient 渐变
CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。 虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争…
HTML5实现的超炫效果
HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品。 Form Follows Function就是一個展示HTML5实现的网站,目前网站展示了14个作品,其中包括了交互操作以及…
[Css3教程]-CSS3 RGBA颜色
今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说,大家就跟着…
[Css3教程]-CSS3圆角-border-radius
今天我们在一起来说说用CSS3的border-radius:属性来制作圆角的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,分别应用到每个角上,我应用最多的就是在需要圆角的元素标签中加四个空标签,然后…
[Css3教程]-CSS3文字阴影—text-shadow
今天这篇文章我们在一起来看看CSS3中实现圆角效果 text-shadow 属性的具体用法。在以前,阴影效果一般都是做成图片,现在有了 CSS3 可以直接使用 text-shadow 属性来实现阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不需要图片的情况下就能…
web前端开发必备的10项CSS技巧
CSS是web前端开发工程师的基础知识,对CSS的了解能使他们能够设计出更加美观别致的网页。使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情。 在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好。当然我们不可能一下子就记住所有CSS的…
HTML5与CSS响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢? 什么是响应式图片? 响应式…