纯CSS3实现Material Design效果


Posted in HTML / CSS onMarch 09, 2017

预览

纯CSS3实现Material Design效果

这是一个正在完善的css文件,是对原生组件基于标签属性做了美化,对datepicker,select等无法用css实现的暂不考虑在本文内。

按钮 Button

初始按钮

<button>button</button>
    <button class="red">red</button>
    <button class="orange">orange</button>
    <button class="blue">blue</button>
    <button class="green">green</button>
    <button class="link">link</button>

描边按钮

<button class="b-red bk-n">button</button>
    <button class="b-red">red</button>
    <button class="b-orange">orange</button>
    <button class="b-blue">blue</button>
    <button class="b-green">green</button>

禁用按钮   

<button disabled>disabled</button>

上浮按钮

<button class="circle">+</button>
    <button class="circle teal">+</button>

按钮组

<nav class="btn-group">
        <button>button</button>
        <button>button</button>
        <button>button</button>
    </nav>

表单Form

文本输入

<input type="text">
<input type="password" >

开关

<input type="checkbox" id="switch1" class="switch"><label for="switch1"></label>

单选

<input type="radio" id="test_radio1" name="ra"><label for="test_radio1">radio1</label>
<input type="radio" disabled id="test_radio3" name="ra"><label for="test_radio3">radio3</label>
<input type="radio" checked disabled id="test_radio4" name="ras"><label for="test_radio4">radio4</label>

多选

<input id="test_checkbox1" type="checkbox"><label for="test_checkbox1">check1</label>
<input id="test_checkbox3" disabled type="checkbox"><label for="test_checkbox3">check3</label>
<input id="test_checkbox4" checked disabled type="checkbox"><label for="test_checkbox4">check4</label>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 #HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 #HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 #HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 #HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 #HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 #HTML / CSS
css3图片边框border-image的用法
Jun 30 #HTML / CSS
You might like
基于mysql的bbs设计(五)
2006/10/09 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
静态变量和实例变量的区别
2015/07/07 面试题
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
党员公开承诺书2016
2016/03/24 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers