• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

jacques-jd/card-depth.js: Add cards with depth. Material design accurate.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

jacques-jd/card-depth.js

开源软件地址(OpenSource Url):

https://github.com/jacques-jd/card-depth.js

开源编程语言(OpenSource Language):

JavaScript 81.1%

开源软件介绍(OpenSource Introduction):

card-depth.js

Add cards with depth. Material design accurate.

How to get started

Simply add card-depth.js to your code directory and import it to your HTML.

How to use

  1. Find the element you want to make into a card. In this example, we'll use a div tag with some content in it.
<div>
  <p>I am content!</p>
</div>
  1. Add "card" to the class name.
<div class="card">
  <p>I am content!</p>
</div>
  1. Add your desired height effects. (consult the reference to learn about these)
<div class="card" z-default='10' z-hover='20'>
  <p>I am content!</p>
</div>
  1. By default, your card should now exist with a height of 100px and a margin of 25px. It will have a transition of .15s for shadows by default. Check the reference to learn how to turn them off.

Note: You may also use an element named <card>, however it is not officially supported by HTML5 and so it may cause errors.

EXAMPLE: https://jsfiddle.net/fcogpzja/1/

#Reference Added HTML attributes: z, z-default, z-hover, z-click, border-radius, no-margin, no-padding, no-transition, no-border-radius, no-height

z: used inside of code, user cannot play with this variable as it constantly changes.

z-default: the z height when user is not hovering or clicking on element. defaults to 5.

z-hover: the z height when user is hovering element. defaults to 5.

z-click: the z height when user is clicking on element. defaults to 5.

border-radius: self explanatory, the radius of the corners of the card. defaults to 2px.

no-margin: takes no value. Simply a flag indicating to not apply the default 25px margin to this card.

no-padding: takes no value. Simply a flag indicating to not apply the default 10px padding to this card.

no-transition: takes no value. It is a flag indicating to not apply the default .15s material transition with shadow.

no-height: takes no value. It is a flag indicating to not apply the default height of 100px to this card.

no-border-radius: takes no value. It is a flag indicating to not apply the default border-radius of 2px.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
AppWerft/TiMaterialDesignTextfield发布时间:2022-08-18
下一篇:
JunkFood02/Seal: Video/Audio downloader for Android, designed and themed with Ma ...发布时间:2022-08-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap