首页 / CSS3 / CSS3实现MaterialDesign的示例代码分享

CSS3实现MaterialDesign的示例代码分享

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3实现MaterialDesign的示例代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12938字，纯文字阅读大概需要19分钟。

内容图文

不断更新中

预览

CSS3实现MaterialDesign的示例代码分享 - 文章图片

这是一个正在完善的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>

部分样式

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

li {
    list-style: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

/*html*/
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
/*body*/
body{
    margin: 0;
    background-color: rgb(238,238,238);
    font-size:16px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Microsoft YaHei";
    color:#333;
    text-shadow: 0 0 0.1px rgba(0,0,0,0.2);
}
/*button*/
    button {
        opacity: 0.9;
        line-height: 1rem;
        padding:  0.5rem 1rem;
        border: none;
        outline: none;
      background-color: white;
      text-decoration: none;
      position: relative;
      border-radius:2px;
      box-shadow:0 1px 3px darkgray;
      transition: box-shadow 0.5s ease-out;
    }
 button::before{
      content: '';
    display:block;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 10%/40%;
      -webkit-transform: translate(-50%, -50%) ;
      transform: translate(-50%, -50%) ;
      height: 100%;
      width: 100%;
      z-index: -1;
      -webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
      transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  }
  button:hover{
    box-shadow:0 6px 16px darkgray;
      transition: all 0.8s ease-out;
  }
button:active{
 opacity: 1;
      -webkit-transition: all 0.5s ease-out;
      transition: all 0.3s ease-out;
}
  button:active::before{
      width: 0;
      height: 100%;
      border-radius: 0;
      background-color: rgba(0,0,0,.4);
      -webkit-transition: all 0.01s ease-out;
      transition: all 0.01s ease-out;
  }
button.link{
    background:none;
    color:#0275d8;
    box-shadow: none;
}
button[disabled]{
    background-color:lightgray;
    color:darkgray;
    cursor:not-allowed;
    box-shadow: none;
}
.circle{
    border-radius: 100%;
}
button.circle{
    padding: 0;
    width: 3rem;height: 3rem;font-size: 1.5rem;
      box-shadow:0 6px 12px darkgray;

}
button.circle:hover{
      box-shadow:0 12px 24px darkgray;
}
 button.circle::before{
      content: '';
    display:block;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 100%;
      -webkit-transform: translate(-50%, -50%) ;
      transform: translate(-50%, -50%) ;
      height: 100%;
      width: 100%;
      z-index: -1;
      -webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
      transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
  }
  button.circle:active::before{
      width: 0;
      height: 0;
      border-radius: 100%;
      background-color: rgba(0,0,0,.4);
      -webkit-transition: all 0.01s ease-out;
      transition: all 0.01s ease-out;
  }

/*form*/
input[type=text],
input[type=password],
input[type=number]{
    padding: 0;
    border:none;
    text-indent: 0.5em;
    background: none;
    outline: none;
    border-bottom:2px solid #555;
    line-height: 32px;
        height: 32px;
    box-sizing: border-box;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus{
    border-bottom-color: rgb(0,150,136);
    color: rgb(0,150,136);
}
input[type=checkbox],input[type=radio]{
    display: none;
}
input[type=checkbox]+label,input[type=radio]+label{    
    line-height: 1em;
    text-indent: 1.2em;
    width: 1em;
    height: 1em;
    margin: 0.2em 0.1em;
    border: 2px solid #555;
    border-radius: 2px;
    padding: 0px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}
input[type=radio]+label{
    border-radius: 1em;
}
input[type=checkbox]:checked+label,input[type=radio]:checked+label{
    border-color:  rgb(0,150,136);
}


input[type=checkbox]:checked + label:after{
    content: '';
    display: block;
    width: 0.7em;
    height: 0.3em;
    margin: 0.2em 0.1em;
    top: 0;
    left: 0;
    transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    position: absolute;
    border-left: 0.15em solid rgb(238,238,238);
    border-bottom: 0.15em solid rgb(238,238,238);
}
input[type=radio]:checked + label{
    background: rgb(0,150,136);
    box-shadow: 0 0 0 3px rgb(238,238,238) inset;
}

input[type=checkbox] + label:before,input[type=radio] + label:before{
      content: '';
    display:block;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 100%;
      -webkit-transform: translate(-50%, -50%) ;
      transform: translate(-50%, -50%) ;
      height: 4em;
      width: 4em;
      z-index: -1;
      -webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
      transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);

}

  input[type=checkbox]+ label:active::before,input[type=radio]+ label:active::before{
      width: 0;
      height: 0;
      border-radius: 100%;
      background-color: rgb(0,150,136);
      -webkit-transition: all 0.01s ease-out;
      transition: all 0.01s ease-out;
  }
  input[type=checkbox]:checked+ label:active::before,input[type=radio]:checked+ label:active::before{
      background-color: gray;
  }


input[type=checkbox]:checked + label,input[type=radio]:checked + label {
    background-color: rgb(0,150,136);
    color: rgb(0,150,136);
}

input[type=checkbox] + label:active, input[type=checkbox]:checked + label:active,input[type=radio] + label:active, input[type=radio]:checked + label:active {
    background-color:  rgb(0,150,136);
}
 input[type=checkbox]:disabled + label, input[type=radio]:disabled + label{
     border-color:lightgray;color:lightgray;background-color: lightgray;pointer-events: none;
 }


 input[type=checkbox].switch+label{
    left :0;
    border-radius: 1em;
    border-color:gray;
 }
 input[type=checkbox]:checked.switch+label{
    left:1.5em;
    border-color:rgb(0,150,136); 
 }
 input[type=checkbox].switch+label:after{
     content: "";
     position: absolute;
     display: block;
     margin-top: 50%;
    border-bottom: 2px solid lightgray;
    width: 1.4em;
    height: 0;
    transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    margin-left :1.1em;
 }
 input[type=checkbox]:checked.switch+label:after{
    border-bottom: 2px solid rgb(0,150,136); 
    margin-left :-1.1em;
 }

nav.btn-group{
    border-radius: 2px;overflow: hidden;float: left;
}
 nav.btn-group button{
    float: left;border-radius: 0;
    box-shadow: none;
 }
   nav.btn-group button:hover{
    box-shadow: none;
   }
  nav.btn-group button:hover::after{
      content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.11);
}

nav.menu{
    height: 3rem;padding: 0 1em;background: white;
}
nav.menu>ul{
    padding: 0 1em;margin:0;line-height: 3rem;float: left;
}
mav.menu>ul>li{
    display: block;

}

.b-red{border: 1px solid #d9534f;color:#d9534f;}
.b-orange{border: 1px solid #ec971f;color:#ec971f;}
.b-blue{border: 1px solid #5CA3DE;color:#5CA3DE;}
.b-green{border: 1px solid #71CA71;color:#71CA71;}
.b-navy { border: 1px solid  #001f3f;color: #001f3f;}
.b-aqua { border: 1px solid  #7fdbff;color: #7fdbff;}
.b-teal { border: 1px solid  rgb(0,150,136);color: rgb(0,150,136);}
.b-olive { border: 1px solid  #3d9970;color: #3d9970;}
.b-lime { border: 1px solid  #01ff70;color: #01ff70; }
.b-yellow { border: 1px solid  #ffdc00;color: #ffdc00; }
.b-orange { border: 1px solid  #ff851b;color: #ff851b; }
.b-red { border: 1px solid  #ff4136;color: #ff4136; }
.b-fuchsia { border: 1px solid  #f012be;color: #f012be; }
.b-purple { border: 1px solid  #b10dc9;color: #b10dc9; }
.b-maroon { border: 1px solid  #85144b;color: #85144b; }
.b-white { border: 1px solid  #ffffff;color: #ffffff; }
.b-gray { border: 1px solid  #aaaaaa;color: #aaaaaa; }
.b-silver { border: 1px solid  #dddddd;color: #dddddd; }
.b-black { border: 1px solid  #111111;color: #111111; }

.bk-n{background: none;}
.bs-n{box-shadow: none;}

.red{background-color:#d9534f;color:white;}
.orange{background-color:#ec971f;color:white;}
.blue{background-color:#5CA3DE;color:white;}
.green{background-color:#71CA71;color:white;}
.navy { background-color: #001f3f; color:white;}
.aqua { background-color: #7fdbff;color:white; }
.teal { background-color: rgb(0,150,136); color:white;}
.olive { background-color: #3d9970; color:white;}
.lime { background-color: #01ff70; }
.yellow { background-color: #ffdc00; }
.orange { background-color: #ff851b; }
.red { background-color: #ff4136; }
.fuchsia { background-color: #f012be; }
.purple { background-color: #b10dc9; }
.maroon { background-color: #85144b; }
.white { background-color: #ffffff; }
.gray { background-color: #aaaaaa; }
.silver { background-color: #dddddd; }
.black { background-color: #111111; }

.c-red{color:#d9534f;}
.c-orange{color:#ec971f;}
.c-blue{color:#5CA3DE;}
.c-green{color:#71CA71;}
.c-navy { color: #001f3f; }
.c-aqua { color: #7fdbff; }
.c-teal { color: rgb(0,150,136); }
.c-olive { color: #3d9970; }
.c-lime { color: #01ff70; }
.c-yellow { color: #ffdc00; }
.c-orange { color: #ff851b; }
.c-red { color: #ff4136; }
.c-fuchsia { color: #f012be; }
.c-purple { color: #b10dc9; }
.c-maroon { color: #85144b; }
.c-white { color: #ffffff; }
.c-gray { color: #aaaaaa; }
.c-silver { color: #dddddd; }
.c-black { color: #111111; }

.fl,.fl *{display:block;float: left;clear: none;}
.fl-l{float: left}
.fl-r{float: right}
.fl-n{float:none}
.w-1 {width: 4.166666667%}
.w-2 {width: 8.333333333%}
.w-3 {width: 12.5%}
.w-4 {width: 16.66666667%}
.w-5 {width: 20.83333333%}
.w-6 {width: 25%}
.w-7 {width: 29.16666667%}
.w-8 {width: 33.33333333%}
.w-9 {width: 37.5%}
.w-10 {width: 41.66666667%}
.w-11 {width: 45.83333333%}
.w-12 {width: 50%}
.w-13 {width: 54.16666667%}
.w-14 {width: 58.33333333%}
.w-15 {width: 62.5%}
.w-16 {width: 66.66666667%}
.w-17 {width: 70.83333333%}
.w-18 {width: 75%}
.w-19 {width: 79.16666667%}
.w-20 {width: 83.33333333%}
.w-21 {width: 87.5%}
.w-22 {width: 91.66666667%}
.w-23 {width: 95.83333333%}
.w-24 {width: 100%}

.h-1 {height: 16px;line-height: 16px;}
.h-2 {height: 28px;line-height: 28px;}
.h-3 {height: 32px;line-height: 32px;}
.h-4 {height: 48px}
.h-5 {height: 64px}
.h-6 {height: 80px}
.h-7 {height: 96px}

.t-l{text-align: left}
.t-c{text-align: center}
.t-r{text-align: right}

.f,.f *{display: flex}
.f-1    {flex:1}
.f-2    {flex:2}
.f-3    {flex:3}
.f-4    {flex:4}
.f-5    {flex:5}
.f-6    {flex:6}
.f-7    {flex:7}
.f-8    {flex:8}
.f-9    {flex:9}
.f-10{flex:10}
.f-11{flex:11}
.f-12{flex:12}
.f-13{flex:13}
.f-14{flex:14}
.f-15{flex:15}
.f-16{flex:16}
.f-17{flex:17}
.f-18{flex:18}
.f-19{flex:19}
.f-20{flex:20}
.f-21{flex:21}
.f-22{flex:22}
.f-23{flex:23}
.f-24{flex:24}

以上就是CSS3实现Material Design的示例代码分享的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS3实现MaterialDesign的示例代码分享全部内容，希望文章能够帮你解决CSS3实现MaterialDesign的示例代码分享所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413793.html

来源：【匿名】

【上一篇】响应式布局之CSS3弹性盒flex布局模型的具体介绍【下一篇】如何使用CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

更多 ►

【CSS3实现MaterialDesign的示例代码分享】教程文章相关的互联网学习教程文章

HTML5实践-使用css3丰富图片样式的示例代码【图】

在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。　　问题　　通过查看demo能注意到，我们为第一行图片设置了border-radius 和内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果...

利用CSS3的线性渐变linear-gradient制作边框的示例代码分享

linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3的线性渐变linear-gradient制作边框的示例代码分享一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以就在网找了一下看看有没有解决方法，可是找了一会没找到，那咋办，需求方不愿意不要这么粗，那就只能自己解决了。所以用...

使用CSS3实现鼠标悬停图片上浮显示描述的示例代码分享【图】

效果图：代码如下：<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3鼠标悬停图片上浮显示描述特效 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/20/css/normalize.css" /> <link rel=...

CSS3实现横向滚动菜单按钮的示例代码分享【图】

今天给大家分享基于css3实现精美横向滚动菜单按钮，非常不错，具有参考借鉴价值，需要的的朋友参考下吧废话不多说，直接上图：然后是代码：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>精美横向滚动菜单按钮 - Glunefish</title></head> <body><ul><li><a href="" class="a1"><span>Home</span></a></li><li><a href="" class="a2"><span>Chat</span></a></li><li><a href="" class...

【JS+CSS3】实现带预览图幻灯片效果的示例代码_javascript技巧【图】

一、前期准备 1.1 案例分析适用场景：单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据优化扩展二、代码结构h2 captionh3 caption样式（CSS略）脚本功能开发 >>内容输出 Template改造输出幻灯片&控制按钮图片位置调整 >>切换控制切换幻灯片 .main_i_active 切换控制按钮 .ctrl_i_active0、修改VIEW ->Template(关键字替换),增加Template id 图片区{{h2}}} {{h3}}}按钮区下面是重点 JS脚本的编写~~输出HTML...

在Swiper内如何制作CSS3动画效果示例代码【图】

前言 Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。本文主要给大家介绍了关于Swiper内制作CSS3动画效果的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 1、在需...

【JS+CSS3】实现带预览图幻灯片效果的示例代码【图】

一、前期准备 1.1 案例分析适用场景：单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据优化扩展二、代码结构 <div class="slider"><div class="main"><div class="main_i"><div class="caption"><h2>h2 caption</h2><h2>h3 caption</h2></div><img src="images/{{index}}.jpg" alt=""></div></div><div class="ctrl"><a href="javascrip...

实践HTML5的CSS3MediaQueries的示例代码分享【图】

先来介绍下 media，确切的说应该是 CSS media queries（CSS http://www.gxlcms.com/css/css-rwd-mediaqueries.html" target="_blank">媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。那么该怎么定义 media 呢，看下面的代码，你肯定能猜出个大概。 <li...

HTML5/CSS3实现漂亮的分步骤注册登录表单的示例代码分享【图】

分步骤的登录注册表单现在也比较多，主要是能提高用户体验，用户可以有选择性的填写相应的表单信息，不至于让用户看到一堆表单望而却步。今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单，外观不用说，非常漂亮。你看一下DEMO就知道了。接下来我们要来一起看看实现的过程是怎样的。代码有点复杂，主要由HTML代码、CSS3代码以及Javascript代码组成。HTML代码：<form id="msform"><ul id="progres...

常用的HTML5/CSS3新特性能力检测写法的示例代码分享【图】

未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也...

详解html5+css3实现跑动的爱心和动态水滴效果的示例代码分享【图】

大风起兮云飞扬，安得猛士兮走四方!html5+css3，不学不行。做web开发已经有好几年了，见证了太多语言的崛起和陨落。其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语言(这首当其冲的就是.net程序员，当然很不幸，我就是.net成员，这刚把mvc 4.0整明白现在5.0又出来了。) 当然，抱怨解决不了任何问题，抱怨也无法让你的钱包鼓起来。so, 程序猿们，继续学习吧。　　html5+css3时代，简称3+5时代(3+5...

使用Modernizr探测HTML5/CSS3新特性的示例代码分享【图】

HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是：在我们使用HTM...

H5移动端超实用的css3模拟边框最新研究示例代码

H5移动端超实用的css3模拟边框最新研究示例代码前言在之前写的一篇博文《移动端H5的一些基本知识点总结第五节边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷.为什么要模拟边框,而不是直接写边框? 因为边框要计算盒子模型.而我们在移动端可能使用的是自适应布局的方式.这样计算边框很费劲. ...

HTML5CSS3专题纯CSS打造相册效果的示例代码详解【图】

HTML5 CSS3专题纯CSS打造相册效果的示例代码详解：今天偶然发现电脑里面还有这样的一个例子，感觉效果还不错，不记得啥时候下载的了，也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。效果图：效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。先看html文件：<body><p id="gallery"><h1>纯CSS3相册效果</h1><ul><li><span class="touch"><img src="images/pic1.jpg"/></span><p style="display: block;"...

HTML5/CSS3专题3D旋转木马效果相册的示例代码【图】

这篇博客的目的是因为上篇HTML5/CSS3专题 CSS3打造百度贴吧的3D翻牌效果的经典案例中有个关于CSS 3D效果的比较重要的知识点没讲到，就是perspective和tranlateY效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~1、perspectiveperspective属性包括两个属性：none和具有单位的长度值。其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值<length>...

CSS3 - 技术教程分类

CSS3 教程 CSS3 简介 CSS3 边框 CSS3 圆角 CSS3 背景 CSS3 渐变 CSS3 文本效果 CSS3 字体 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS3 图片 CSS3 按钮 CSS3 分页 CSS3 弹性盒子 CSS3 多媒体查询 css3 全部

CSS3 - 最热教程

jQuery+HTML5+CSS3制作支持响应式布局时...如何使用css3实现3D的翻牌效果（附完整...css3如何实现进度条？css3中进度条的实...有关对CSS3媒体查询知识的总结 CSS3输入框阴影效果及其他阴影效果_htm...20种炫酷CSS3按钮鼠标滑过特效_html/cs...Css3制作变形与动画效果_表单特效 css3新特性有哪些关于CSS3的一些冷门属性_html/css_WEB-...css3中animation动画属性如何使用

首页 / CSS3 / CSS3实现MaterialDesign的示例代码分享

CSS3实现MaterialDesign的示例代码分享

内容导读

内容图文

预览

按钮 Button

初始按钮

描边按钮

禁用按钮

上浮按钮

按钮组

表单Form

文本输入

开关

单选

多选

部分样式

内容总结

内容备注

内容手机端

【CSS3实现MaterialDesign的示例代码分享】教程文章相关的互联网学习教程文章

HTML5实践-使用css3丰富图片样式的示例代码【图】

利用CSS3的线性渐变linear-gradient制作边框的示例代码分享

使用CSS3实现鼠标悬停图片上浮显示描述的示例代码分享【图】

CSS3实现横向滚动菜单按钮的示例代码分享【图】

【JS+CSS3】实现带预览图幻灯片效果的示例代码_javascript技巧【图】

在Swiper内如何制作CSS3动画效果示例代码【图】

【JS+CSS3】实现带预览图幻灯片效果的示例代码【图】

实践HTML5的CSS3MediaQueries的示例代码分享【图】

HTML5/CSS3实现漂亮的分步骤注册登录表单的示例代码分享【图】

常用的HTML5/CSS3新特性能力检测写法的示例代码分享【图】

详解html5+css3实现跑动的爱心和动态水滴效果的示例代码分享【图】

使用Modernizr探测HTML5/CSS3新特性的示例代码分享【图】

H5移动端超实用的css3模拟边框最新研究示例代码

HTML5CSS3专题纯CSS打造相册效果的示例代码详解【图】

HTML5/CSS3专题3D旋转木马效果相册的示例代码【图】

CSS3 - 相关标签

CSS3 - 技术教程分类

CSS3 - 最新教程

CSS3 - 最热教程