CSS3渐变色按钮

        上一篇文章介绍了css3的渐变色属性,今天带来CSS3渐变特性的应用。可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时,这些按钮的大小可以容易地适应。 这种方法最好的部分就是能被应用于任何HTML元素,比如 div, span, p, a, button, input, 等等。

6、HTML5新增表单标签

姓名:<input type="tel" name="text"></br></br>

    邮箱:<input type="email" name="email"></br></br>

    日期:<input type="date" name="date"></br></br>

    时间:<input type="time" name="time"></br></br>

美洲杯在哪买球,    滑块:<input type="range" name="range"></br></br>

    个人主页:<input type="url" name="url"></br></br>

    <input type="submit" value="tijaio" name="btn">

    例:分享会文:HTML5新增表单标签.html

 

按钮的几个状态

  • 正常状态 = 渐变并带有加粗和阴影效果。
  • 悬停 = 更深的渐变
  • 激活 = 反向渐变, 向下1px, 同时有更深的字体。

美洲杯在哪买球 1

 

为什么这些按钮如此的酷?

  • 纯 CSS: 没有图片和Javascript的应用。
  • 渐变可以跨浏览器应用 (IE, Firefox 3.6, Chrome, and Safari).
  • 灵活和可扩展: 通过改变字体大小和填充值,按钮的大小和圆角可以调整。
  • 它有三个按钮状态: normal, hover 和 active。
  • 能被应用于任何HTML元素,比如a, input, button, span, div, p, h3, 等等。
  • 备注:如果CSS3不被支持,它将会显示成普通按钮 (没有渐变和阴影)。

1、标签要小写 2、可以省略某些标签        如:HTML body head tbody 3、可以省略某些结束标签        如:tr td li  4、单标签不用加结束标签         如:img input 5、废除的标签,看第二点         如:font center big

6、文档声明

 <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <HTML> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签,它是一条指令,告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用。

例:

 

 

色彩的一般样式

下面的代码是橘黄色的css样式。 第一行的background  是一个备用,针对不支持CSS3 的浏览器, 第二行的background是为 Webkit这类浏览器, 第三行的background是为Firefox,最后一行是filter只被Internet Explorer识别。

更多关于 CSS gradient的细节,请看 Cross-Browser CSS Gradient。

.orange {  color: #fef4e9;  border: solid 1px #da7c0c;  background: #f78d1d;  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);  filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .orange:hover {  background: #f47c20;  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));  background: -moz-linear-gradient(top,  #f88e11,  #f06015);  filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .orange:active {  color: #fcd3a5;  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);  filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); }

美洲杯在哪买球 2

公司

部门

姓名

职位

分享内容

痛客梦工厂科技有限公司

技术部

张应钦

Web前端开发工程师

HTML5与CSS3

美洲杯在哪买球 3

注:此帖子详见本人博客文件HTML5与CSS3.docx文件

一、    HTML5

  1. 为什么需要HTML5
  2. 什么是HTML5
  3. HTML5现状及浏览器支持
  4. HTML5优点与缺点
  5. HTML5语法规则与文档声明
  6. HTML5新增表达标签
  7. HTML5多媒体组件
  8. HTML5之canvas

二、    CSS3

  1. CSS3简介
  2. CSS3有什么(边框、圆角、背景、渐变、文本效果、字体、2D转换、3D转换、过渡、动画、多列、用户界面、图片、按钮、分页、框大小、弹性盒子、多媒体查询)

 

三、    jQuery与CSS3选择器(详见PDF文档)

注:部分实例见分享会文件demo.html

 

  1. 为什么需要HTML5?

HTML4的陈旧不能满足日益发展的互联网需要,特别是移动互联网。为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电、触摸、不开放)。HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便。

基础知识:HTML CSS JavaScript与任何一种Web服务器后台技(Java,dotNET,PHP)

 

2.什么是HTML5?

HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA)。HTML5是HTML最新版本,2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。

 

  1. HTML5现状及浏览器支持。

大部分主流浏览器已经支持HTML5,但是各个浏览器支持的方式以及语法有所差异性。支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari(苹果公司研发的网络浏览器),Opera等现代浏览器。

 

 

 

支持得分:

 

 

  1. HTML5优点与缺点。

如何使用我的按钮?

比如你喜欢蓝色的按钮,并想应用在你的页面:

  • 首先, 复制 .button 和 .blue 的CSS (看 demo source code).
  • 然后, 增加到你想要成为按钮的 HTML 元素 (比如 <a href="#">Button</a>),如下图。  CSS 能被应用于 link, p, span, div, input, button, 等元素。

美洲杯在哪买球 4

翻译后。这又是一篇关于CSS3的特性的文章,CSS3越来越流行,不得不学了啊,呵呵。希望对你能有用。


 

本文由美洲杯在哪买球发布于计算机教程,转载请注明出处:CSS3渐变色按钮

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。