纯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实现3D旋转书本效果
Mar 21 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
html如何对span设置宽度
Oct 30 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
VOLVO车载收音机
2021/03/02 无线电
打造计数器DIY三步曲(下)
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python实现图像几何变换
2015/07/06 Python
Python分支结构(switch)操作简介
2018/01/17 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
青年文明号事迹材料
2014/01/18 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
个人对照检查材料
2014/02/12 职场文书
品德评语大全
2014/05/05 职场文书
条幅标语大全
2014/06/20 职场文书
迎国庆横幅标语
2014/10/08 职场文书
个人专业技术总结
2015/03/05 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python