css skeleton & web app skeleton

skeleton

https://www.cnblogs.com/xgqfrms/p/10437258.html

https://github.com/dhg/Skeleton/

https://codepen.io/xgqfrms/pen/zQEJWw

https://codepen.io/xgqfrms/details/zQEJWw

https://codepen.io/xgqfrms/full/zQEJWw

https://github.com/dhg/Skeleton/

https://github.com/whatsnewsaes/Skeleton-Sass

skeleton screens

https://css-tricks.com/building-skeleton-screens-css-custom-properties/



.skeleton {

  background-repeat: no-repeat;

  background-image:

    /* layer 2: avatar */

    /* white circle with 16px radius */

    radial-gradient(circle 16px, white 99%, transparent 0),

    /* layer 1: title */

    /* white rectangle with 40px height */

    linear-gradient(white 40px, transparent 0),

    /* layer 0: card bg */

    /* gray rectangle that covers whole element */

    linear-gradient(gray 100%, transparent 0);

}




.skeleton {

  background-size:

    32px 32px,  /* avatar */

    200px 40px, /* title */

    100% 100%;  /* card bg */

}




.skeleton {

  background-position:

    24px 24px,  /* avatar */

    24px 200px, /* title */

    0 0;        /* card bg */

}

Custom CSS properties & css var

https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/



.skeleton {

  /*

    define as separate properties

  */

  --card-height: 340px;

  --card-padding:24px;

  --card-skeleton: linear-gradient(gray var(--card-height), transparent 0);

  --title-height: 32px;

  --title-width: 200px;

  --title-position: var(--card-padding) 180px;

  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);

  --avatar-size: 32px;

  --avatar-position: var(--card-padding) var(--card-padding);

  --avatar-skeleton: radial-gradient(

    circle calc(var(--avatar-size) / 2),

    white 99%,

    transparent 0

  );

  /*

    now we can break the background up

    into individual shapes

  */

  background-image:

    var(--avatar-skeleton),

    var(--title-skeleton),

    var(--card-skeleton);

  background-size:

    var(--avatar-size),

    var(--title-width) var(--title-height),

    100% 100%;

  background-position:

    var(--avatar-position),

    var(--title-position),

    0 0;

}

http://caniuse.com/#feat=css-variables



@media screen and (min-width: 47em) {

  :root {

    --card-padding: 32px;

    --card-height: 360px;

  }

}

Animation



<div class="card"></div>




/*

 * Variables

 */

:root {

  --card-padding: 24px;

  --card-height: 340px;

  --card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0);

  --avatar-size: 32px;

  --avatar-position: var(--card-padding) var(--card-padding);

  --avatar-skeleton: radial-gradient(circle 16px at center, white 99%, transparent 0

  );

  --title-height: 32px;

  --title-width: 200px;

  --title-position: var(--card-padding) 180px;

  --title-skeleton: linear-gradient(white var(--title-height), transparent 0);

  --desc-line-height: 16px;

  --desc-line-skeleton: linear-gradient(white var(--desc-line-height), transparent 0);

  --desc-line-1-width:230px;

  --desc-line-1-position: var(--card-padding) 242px;

  --desc-line-2-width:180px;

  --desc-line-2-position: var(--card-padding) 265px;

  --footer-height: 40px;

  --footer-position: 0 calc(var(--card-height) - var(--footer-height));

  --footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);

  --blur-width: 200px;

  --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));

}

/*

 * Card Skeleton for Loading

 */

.card {

  width: 280px; //demo

  height: var(--card-height);

  &:empty::after {

    content:"";

    display:block;

    width: 100%;

    height: 100%;

    border-radius:6px;

    box-shadow: 0 10px 45px rgba(0,0,0, .1);

    background-image:

      linear-gradient(

        90deg,

        rgba(lightgrey, 0) 0,

        rgba(lightgrey, .8) 50%,

        rgba(lightgrey, 0) 100%

      ),                          //animation blur

      var(--title-skeleton),      //title

      var(--desc-line-skeleton),  //desc1

      var(--desc-line-skeleton),  //desc2

      var(--avatar-skeleton),     //avatar

      var(--footer-skeleton),     //footer bar

      var(--card-skeleton)        //card

    ;

    background-size:

      var(--blur-size),

      var(--title-width) var(--title-height),

      var(--desc-line-1-width) var(--desc-line-height),

      var(--desc-line-2-width) var(--desc-line-height),

      var(--avatar-size) var(--avatar-size),

      100% var(--footer-height),

      100% 100%

    ;

    background-position:

      -150% 0,                      //animation

      var(--title-position),        //title

      var(--desc-line-1-position),  //desc1

      var(--desc-line-2-position),  //desc2

      var(--avatar-position),       //avatar

      var(--footer-position),       //footer bar

      0 0                           //card

    ;

    background-repeat: no-repeat;

    animation: loading 1.5s infinite;

  }

}

@keyframes loading {

  to {

    background-position:

      350% 0,

      var(--title-position),

      var(--desc-line-1-position),

      var(--desc-line-2-position),

      var(--avatar-position),

      var(--footer-position),

      0 0

    ;

  }

}

/*

 * Demo Stuff

 */

body {

  min-height:100vh;

  background-color:#FFF;

  display:flex;

  justify-content:center;

  align-items:center;

}

:empty selector & pseudo element

CSS & Card Skeleton

https://codepen.io/xgqfrms/pen/KLXrob

https://codepen.io/xgqfrms/pen/gJGQeX

web app demos

https://cangdu.org/elm/#/shop?geohash=31.278702,121.465513&id=3276

CSS Pseudo Selectors

::slotted & :empty

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty



/* Selects any element placed inside a slot */

::slotted(*) {

  font-weight: bold;

}

/* Selects any <span> placed inside a slot */

::slotted(span) {

  font-weight: bold;

}

https://css-tricks.com/building-skeleton-screens-css-custom-properties/

  1. You can use the :empty selector and a pseudo element to draw the skeleton, so it only applies to empty card elements.

    Once the content is injected, the skeleton screen will automatically disappear.

/* css skeleton */

/*

 * Card Skeleton for Loading

 */

.card {

  width: 280px; //demo

  height: var(--card-height);

  &:empty::after {

    content:"";

    display:block;

    width: 100%;

    height: 100%;

    border-radius:6px;

    box-shadow: 0 10px 45px rgba(0,0,0, .1);

    background-image:

      linear-gradient(

        90deg,

        rgba(lightgrey, 0) 0,

        rgba(lightgrey, .8) 50%,

        rgba(lightgrey, 0) 100%

      ),                          //animation blur

      var(--title-skeleton),      //title

      var(--desc-line-skeleton),  //desc1

      var(--desc-line-skeleton),  //desc2

      var(--avatar-skeleton),     //avatar

      var(--footer-skeleton),     //footer bar

      var(--card-skeleton)        //card

    ;

    background-size:

      var(--blur-size),

      var(--title-width) var(--title-height),

      var(--desc-line-1-width) var(--desc-line-height),

      var(--desc-line-2-width) var(--desc-line-height),

      var(--avatar-size) var(--avatar-size),

      100% var(--footer-height),

      100% 100%

    ;

    background-position:

      -150% 0,                      //animation

      var(--title-position),        //title

      var(--desc-line-1-position),  //desc1

      var(--desc-line-2-position),  //desc2

      var(--avatar-position),       //avatar

      var(--footer-position),       //footer bar

      0 0                           //card

    ;

    background-repeat: no-repeat;

    animation: loading 1.5s infinite;

  }

}

@keyframes loading {

  to {

    background-position:

      350% 0,

      var(--title-position),

      var(--desc-line-1-position),

      var(--desc-line-2-position),

      var(--avatar-position),

      var(--footer-position),

      0 0

    ;

  }

}

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

css skeleton & web app skeleton的更多相关文章

  1. HTML5最佳实践web app

    简介 本文重点关注如何充分利用HTML5和CSS让web app运行更加流畅. Tip 1: 使用web storage代替cookie cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合 ...

  2. [转] Creating a Simple RESTful Web App with Node.js, Express, and MongoDB

    You can find/fork the sample project on GitHub Hey! This and all my other tutorials will soon be mov ...

  3. web app开发技巧总结 （share）

    (转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08) 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联 ...

  4. Web APP 之rem的使用

    移动端web app的开发,之前开发直接使用px像素做单位,这样子做对于传统的PC端开发来说,个人比较习惯,但是对于移动端在来,有说逞强.最明显是切图效果与设计师想达到的效果有些差距,比如<he ...

  5. web app 自适应方案总结 关键字 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  6. Web APP开发技巧总结(转）

    一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁止它: <meta h ...

  7. 12步创建高性能Web APP

    现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验.阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度.渲染时间和其他方面的性能表现. 概述 对 Web App ...

  8. MontageJS：构建现代 Web App 的 HTML5 框架

    MontageJS 可以帮助您构建高可扩展性和可维护性的 HTML5 应用.有了 MontageJS,开发人员可以创建可重用的用户界面组件和模块,组件和控制器之间的绑定属性,并且同步 DOM 查询和更 ...

  9. web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码

    来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...

随机推荐

  1. nginx proxy pass redirects ignore port

    nginx proxy pass redirects ignore port $host in this order of precedence: host name from the request ...

  2. aio 系列函数是由 POSIX 定义的异步操作接口，可惜的是，Linux 下的 aio 操作，不是真正的操作系统级别支持的，它只是由 GNU libc 库函数在用户空间借由 pthread 方式实现的，而且仅仅针对磁盘类 I/O，套接字 I/O 不支持。

    30 | 真正的大杀器:异步I/O探索 https://time.geekbang.org/column/article/150780

  3. HTTPS学习（二）：原理与实践

    div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...

  4. cookie机制、session机制

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  5. Eslint错误提示

    "Missing semicolon." : "缺少分号.","Use the function form of \"use strict\ ...

  6. 用java实现word转pdf

    摘要:如何用java实现word文档转pdf呢 最近在网上看了很多资料,遇到了很多头疼的问题,看了各类大神写的方法,最初想要研究的是在线预览word 现在来看,不太现实,除了微软研究的一套在线预览的u ...

  7. Web漏洞扫描-AppScan

    Web漏洞扫描-AppScan 一.AppScan简述 二.功能及特点 一.AppScan简述 IBM Security AppScan是一个适合安全专家的Web应用程序和Web服务渗透测试解决方案. ...

  8. Django（自定义过滤器和自定义标签）

    模版是一个用django模版语言标记过的python字符串.模版可以包含模版标签和变量. 模版标签是在一个模版里起作用的标记.比如,一个模版标签可以产生控制结构的内容(if或者for),可以获取数据库 ...

  9. 2.DHCP的基本概念

    1.DHCP典型组网 DHCP组网中,包括以下三种角色: DHCP服务器 DHCP服务器负责从地址池中选择IP地址分配至DHCP客户端,还可以为DHCP客户端提供其他网络参数,如默认网关地址.DNS服 ...

  10. （8）Linux文件目录结构一览表

    1.使用 Linux 时,通过命令行输入 ls -l / 可以看到,在 Linux 根目录(/)下包含很多的子目录(称为一级目录),例如 bin.boot.dev 等.同时,各一级目录下还含有很多子目 ...