HTML5 / CSS3入门:提示,展示和编码示例

HTML5越来越受欢迎,并开始发展整个Web界面。甚至一些Web开发人员都引用HTM5元素和视觉效果与Flash相当。新的脚本样式易于理解,并且增强Web界面的功能是无限的。所以这个HTML5到底有多有趣?


本文旨在为读者提供有关HTML5的知识,最重要的是一些技巧。 & 创建轻量级,有吸引力的交互式HTML5页面的技巧.

1. HTML5基本

HTML5

在我们开始使用HTML5进行本主题的任何其他操作之前,最好先检查您当前使用的浏览器。由于许多浏览器仍处于开发模式(增强功能以​​适应HTML5),因此此处提到的某些功能可能不支持.

这是检查您的快速提示 浏览器兼容性.

要进一步了解某些浏览器的局限性,您可以参考 这里.

2.文字效果–在HTML5中添加阴影和高级文字效果

HTML5中的文字效果

对文字的基本阴影效果

这是最简单的一个字符串代码,可将您的普通标题转换为漂亮的文本。永远不要低估阴影效果。要创建这种相似的效果,需要Web设计人员在Photoshop中经历多个图像编辑步骤。现在只需要一行代码。阴影距离,颜色可以更改为您的心脏内容.

编码样本

#shadow h1 {
文本阴影:0px 1px 1px rgba(0,0,0,.2);
}

文字上有类似火的效果

下一个技巧是向您展示如何将HTML5编码调整为外观更酷的文本。如果您进行了足够的实验或找到其他示例,则自定义效果的可能性是无限的。注意:此示例不是任何图像编辑软件创建的。 HTML5中的普通代码.

编码样本

#fire h1 {
文本对齐:居中;
边距:200px自动;
字体系列: "哥特式联赛", 信使;
font-size:200px;文本转换:大写;
颜色:#fff;
文字阴影:0 0 20px#fefcc9,10px -10px 30px#feec85,-20px -20px 40px#ffae34,20px -40px 50px#ec760c,-20px -60px 60px#cd4606,0 -80px 70px#973716,10px -90px 80px#451b0e;
}

另一个很好的例子: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. HTML5中的圆角

HTML5中的圆角

自从CSS引入以来,用HTML5样式化网页布局从未如此简单。现在,您甚至可以为布局元素添加圆角!想象一下;不再切片背景图像,不再有凌乱的图片片段。这将为网站设计师带来许多欢呼.

编码样本

div {
边框:2px实线#434343;
填充:10px;
背景:#e3e3e3;
-moz-border-radius:10px;
-webkit-border-radius:10px;
宽度:500像素;
}

注意:Moz表示Mozilla,而webkit用于Safari和Chrome.

另一个很好的例子: http://fjd1.com/roundcorner.html

4. HTML5中的可缩放矢量图形(SVG)

HTML 5教程,指南和示例

可缩放矢量图形或俗称(SVG)是在XML文本文件中定义的二维矢量图形。换句话说,由于它们的DNA基于XML文本文件,因此可以在Web平台上创建或编辑它们。这也意味着,可以轻松进行缩放,并且搜索引擎能够读取和理解图像.

样例代码

其他很好的例子:

5.在HTML5中嵌入电影文件

HTML5中的视频

这是展示HTML5功能的另一个有趣的部分。许多在线视频通常以Flash的形式呈现给网络用户。直到最近,将视频嵌入HTML5的势头才逐渐兴起(YouTube就是一个很好的例子),而Flash的吸引力逐渐下降。为什么会这样?移动用户。如果您希望视频能够在iPhone和Android手机上播放,则HTML5是前进的方式.

要嵌入视频,您需要了解当前不同浏览器支持的3种格式; .mp4(H.264 + AAC)、. ogg(Theora + Vorbis)、. webm(VP8 + Vorbis)

样例代码

另一个很好的例子: https://www.html5rocks.com/zh-CN/tutorials/video/basics/

6. HTML5中的幻灯片演示

HTML 5教程,指南和示例

Powerpoint是幻灯片演示文稿的同义词。但是,为什么只用脱机演示文稿来限制自己,在其中可以创建针对网络受众的幻灯片? HTML5可以帮助您创建功能强大的演示幻灯片,其中包括过渡和导航菜单。最好的部分是,您甚至可以将3D变换应用于演示文稿.

样例代码

前{
过渡:全1缓解。
}

上一篇:悬停{
背景颜色:#F2F5FE;
边框颜色:黑色;
}

div {
变换:rotate3d(1,1,0,45deg);
}

其他很好的例子:

7. HTML5中的可编辑内容

HTML 5教程,指南和示例

静态文本在灵活和动态统治世界的时代如此古老。在HTML5中,您可以定义一个文本区域,使其可由Web用户在不使用文本编辑器的情况下进行编辑.

样例代码

该内容是可编辑的!

另一个很好的例子: http://html5demos.com/contenteditable

8. HTML5中的交互式Web画布

HTML 5教程,指南和示例

除了HTML5中的SVG,画布是网络上发生的第二件事。 Canvas允许渲染2维形状,而无需Flash的帮助即可将交互性提升到一个整体水平.

尽管如此,在这里值得一提的是HTML5中的简单编码,它创造了惊人的动画交互.

另一个很好的例子: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9.拖放HTML5

HTML 5教程,指南和示例

拖放(有时称为DnD)是HTML5的另一个很酷的功能。一个很好的例子是Google在其Gmail中实施。如果您使用任何支持HTML5的浏览器,则只需将文件从计算机中拖放到撰写消息窗口中即可。它将作为附件自动添加。多么酷啊?

示例代码(本地DnD)

document.addEventListener(’dragstart’,function(event){
event.dataTransfer.setData(’text’,’Customized text’);
event.dataTransfer.effectAllowed =’副本’;
},错误);

另一个很好的例子: http://www.html5rocks.com/zh-CN/tutorials/dnd/basics/

10. HTML5中的纯CSS数据图表

HTML 5教程,指南和示例

在HTML5之前,仅通过HTML编码也无法创建可显示的图表。此外,更改数据值并反映在图表中并不是简单的任务。再次,HTML5可以挽救。与CSS一起,您可以创建一个绝对漂亮的图表,从而使Microsoft Excel蒙羞。代码很简单,您所需要做的就是花时间为图表自定义完美的颜色和效果.

另一个很好的例子: http://cssglobe.com/pure-css-data-chart/

无法获取足够的HTML 5?

我们也是!这里有更多关于该主题的内容,请去看看.

* HTML 5网站的30个非常酷的示例
* HTML 5入门
* 2012年必须阅读HTML 5教程
* 学习HTML 5:必须阅读的10课

另外,退房  Robin Nixon撰写的本HTML 5速成班. Robin Nixon是《学习PHP,MySQL和JavaScript》的作者;该课程几乎涵盖了新手在HTML5中需要了解的所有内容-包括基本的HTML编码,用于绘图,地理位置,本地存储以及HTML5音频和视频的HTML5画布.

原始文章首次发表于 WHSR博客;现在由BuildThis.io员工进行管理和更新.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map