纯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实现的文字定时向上滚动
Aug 29 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
零基础学Python(一)Python环境安装
2014/08/20 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Python实现的建造者模式示例
2018/08/06 Python
python opencv实现图像边缘检测
2019/04/29 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python全局变量引用与修改过程解析
2020/01/07 Python
简单了解python列表和元组的区别
2020/05/14 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
个人廉洁自律承诺书
2014/03/27 职场文书
《春雨》教学反思
2014/04/24 职场文书
求职教师自荐书
2014/06/19 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP