心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计 在这个页面中,使用下面3点来完成响应式设计 最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px auto; 使其保持时刻居中 组件使用像素 关于响应式的设计要点还有很多

分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Design 风格作品.效果图如下: 在线预览   源码下载 实现的代码. hmtl代码: <div class="htmleaf-container"> <br /> <br /> <br /> <div class="htmleaf

在线演示 本地下载

整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导航 查看网站 CSS面包屑导航 查看网站 CSS3面包屑导航制作教程 查看网站 黄色的CSS Breadcrumbs教程 查看网站 CSS3 Breadcrumbs 查看网站 扁平化风格面包屑制作教程 查看网站 CSS 面包屑菜单制作方法 查看网站 五个不同风格的面包屑导航CSS制作教程 查看网站

作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示     插件下载     详细教程 HTML示例代码: <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><

import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd'; //具体导航的名称 const breadcrumbNameMap = { '/user':'用户管理', '/user/user_info':'用户信息', '/user/user_info/user_detail':'用户详情', '/user/user_pool':'用户池', '/use

Material Design (材料设计)是由谷歌创建和设计的一种设计语言,结合成功的设计的经典原则以及创新科技.谷歌的目标是开发一个设计系统,让所有的产品在任何平台上拥有统一的用户体验.全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计. 您可能感兴趣的相关文章 Material UI – Material Design CSS 框架 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[

Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点. Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 JSX 转换. 在线演示      插件下载 您可能感兴趣的相关文章 网站开发

由谷歌创建和设计的 Material Design(材料设计)是一种设计语言,结合成功的设计的经典原则以及创新科技.谷歌的目标是开发一个设计系统,让所有的产品在任何平台上拥有统一的用户体验. Materialize  是一个基于材料设计的一个现代化的响应式前端框架.他们做了最繁重的工作,为您提供默认的样式,结合了您的自定义组件.此外,他们还改进动画和过渡,为开发人员提供流畅的体验. 在线演示      源码下载 您可能感兴趣的相关文章 Material UI – Material Design

CSS2.0实现面包屑 面包屑这样的 我们以前都是用背景图片做这块工作,但是直到大概2个星期之前在新浪微博上看到用css3.0实现这样的面包屑 但是目前情况下IE6-8并不支持css3.0 只有标准游览器(像火狐 谷歌等支持).由于有前一次总结一篇关于"CSS实现气泡框效果"的文章 其中有关于怎么样实现小三角形的列子  所以感觉用那个小三角形可以正好模拟这块工作,所以也就试着做了一个.下面我们来看看面包屑大概是个什么样的效果!如下图: 如上所示: 思路: 1. 页面有3个li li标签

前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项目中,可能只是想加一个这样的按钮,来增强用户体验,这些js库就显得有些过于庞大了,同时由于是js实现,很多时候还要注意加载问题. 那么,有没有办法用css来实现这一特效呢? 思路 其实就是一个动画,一个正圆从小变大,用css3中的动画很容易实现 示例代码 @keyframes ripple{ fro

Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景用了这个效果,三星计算器用了这个效果,酷安也看见这个效果,但就是叫不出名字!!!抓狂啊!!! 没办法,由于这个效果类似 涟漪效果,所以我就用** Ripple 为关键字,找过RippleDrawable** ,但是没发现...最后在Google的帮助下,我从一个陌生的网站看到了Reveal Effe

Material Design Animation Authentic motion 真实的运动 运动以一种优美流动的形式描述了空间关系,功能和目的. Mass and weight: 质量和重量 在物理世界中,一个物体要运动,必须有力施加在它身上. 力的强度和持续时间规定了物体的加速度或者运动方向的改变. 即便是最急促的开始和结束也不是瞬时发生的, 因为物体的加速或者减速都是需要一定的时间的. 所以,当动画有着生硬的开始或者结束,或者唐突地改变方向,它们就会看起来很不自然. Material

Material Design 概念,环境和基本属性 Material Design是随Android 5.0推出的一种设计概念, 涉及到了跨平台和设备的视觉,动态,交互设计等方面.   设计概念 Material Design的灵感来自于对纸和墨水的研究,基于触觉现实感.并且它还在继续地发展扩充,有很大的想象空间. 基于现实,让材料的表面和边缘提供视觉线索. 熟悉的触觉属性可以帮助用户快速地明白正在发生什么. 光,表面和运动的一些基本规则是很关键性的因素,它们可以传达物体在空间如何存在,运动和

Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客:1.Android Material Design 兼容库的使用详解2.Android应用Design Support Library完全使用实例第一篇博客是这个兼容库的详细解析,我参考了里面的许多内容,第二篇是兼容库的大致介绍,如果你能把这两篇全部弄懂,我这篇也没有必要看了.说了这么多,开始正文吧

Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/material-design/whatis-material-design/material-properties.html) (英文原版:https://material.google.com/#) 这里只记录了关于前端提高用户体验能力的部分,具体请参考原文. 一.概述 1.目标 & 创造一种新的视觉设计语言

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一小节的在线练习大家可以去试试. Material Design Lite简介 本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现. 一.设计语言 github项目地址:https://github.com/google/material-design-lite 拟真

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应每一小节的在线练习大家可以去试试. 一.徽章/Badge 徽章/Badge向用户提供了发现额外信息的视觉线索,它通常是圆型,内容为数字 或其他字母,紧贴在宿主元素旁边 徽章可以用来无侵入地吸引用户的注意力,例如: 一个新消息通知可以使用徽章提醒有几条未读信息 一个购物车未付款提醒可以使用徽章提醒购物

前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design 进行对比 1.如何使用 bootstrap         :引入bootstrap.css和bootstrap.js material design: 引入materialize.css和materialize.js 2.网格系统 bootstrap         :col-lg-12 col

面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表.分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加: .breadcrumb > li + li:before { color: #CCCCCC; content: