纯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 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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
php格式文件打开的四种方法
2018/02/24 PHP
如何在PHP中使用数组
2020/06/09 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
Django 限制访问频率的思路详解
2019/12/24 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
领导视察欢迎词
2014/01/15 职场文书
科研课题实施方案
2014/03/18 职场文书
竞选村长演讲稿
2014/04/28 职场文书
青春励志演讲稿
2014/04/29 职场文书
党员承诺书格式范文
2015/04/28 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Flask response响应的具体使用
2021/07/15 Python