CSS揭秘

天了噜，竟然还想起自己有个博客。

看了一本关于CSS技巧的书，47个，有些不错，先记一下几个吧。

其实有demo 的，但总怕某天就不能访问了。。。所以复制一下

1、条纹背景

background:linear-gradient(#fb3 50%,#58a 50%)
background-size:100% 30px

2、斜向的条纹背景

background:repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 50%)

3、切角：用到了svg，赞啊

/**
 * Beveled corners — with border-image and an inline SVG
 */

div {
    border: 21px solid transparent;
    border-image: 1 url('data:image/svg+xml,\
                          <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
                          <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\
                          </svg>');
    background: #58a;
    background-clip: padding-box;
    
    padding: .2em .3em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}

4、梯形

/**
 * Trapezoid tabs
 */

body {
    padding: 40px;
    font: 130%/2 Frutiger LT Std, sans-serif;
}

nav {
    position: relative;
    z-index: 1;
    padding-left: 1em;
}

nav > a {
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
    color: inherit;
    text-decoration: none;
    margin: 0 -.3em;
} 

nav > a::before,
main {
    border: .1em solid rgba(0,0,0,.4);
}

nav a::before {
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
    box-shadow: 0 .15em white inset;
    transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

nav a.selected { z-index: 2;}

nav a.selected::before {
    background-color: #eee;
    margin-bottom: -.08em;
}

main {
    display: block;
    margin-bottom: 1em;
    background: #eee;
    padding: 1em;
    border-radius: .15em;
}

nav.left > a::before {
    transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom left;
}

nav.right { padding-left: 2em; }

nav.right > a::before {
    transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom right;
}

<!-- This HTML is invalid and just for demo purposes. Don't use multiple main elements! -->
<nav>
    <a href="#">Home</a>
    <a href="#" class="selected">Projects</a>
    <a href="#">About</a>
</nav>
<main>
    Content area
</main>

<nav class="left">
    <a href="#">Home</a>
    <a href="#" class="selected">Projects</a>
    <a href="#">About</a>
</nav>
<main>
    Content area
</main>

<nav class="right">
    <a href="#">Home</a>
    <a href="#" class="selected">Projects</a>
    <a href="#">About</a>
</nav>
<main>
    Content area
</main>

5、饼图在今年的一答项目上就用了类似的，虽然之后放弃了。svg大法好

6、毛玻璃效果

    /**
     * Frosted glass effect
     */

    body {
        min-height: 100vh;
        box-sizing: border-box;
        margin: 0;
        padding-top: calc(50vh - 6em);
        font: 150%/1.6 Baskerville, Palatino, serif;
    }

    body, main::before {
        background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
    }

    main {
        position: relative;
        margin: 0 auto;
        padding: 1em;
        max-width: 23em;
        background: hsla(0,0%,100%,.25) border-box;
        overflow: hidden;
        border-radius: .3em;
        box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
                    0 .5em 1em rgba(0, 0, 0, 0.6);
        text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
    }

    main::before {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        margin: -30px;
        z-index: -1;
        -webkit-filter: blur(20px);
        filter: blur(20px);
    }

    blockquote { font-style: italic }
    blockquote cite { font-style: normal; }

7、折角效果

/**
 * Folded corner effect — at an angle
 */

div {
    position: relative;
    width: 12em;
    background: #58a; /* Fallback */
    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    padding: 2em;
    color: white;
    font: 100%/1.6 Baskerville, Palatino, serif;
    border-radius: .5em;
}

div::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 1.73em; height: 3em;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: .5em;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15)
}

8、自定义复选框

/**
 * Custom checkboxes
 */

input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
}

input[type="checkbox"] + label::before {
    content: '\a0';
    display: inline-block;
    vertical-align: .2em;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background: silver;
    text-indent: .15em;
    line-height: .65;
}

input[type="checkbox"]:checked + label::before {
    content: '\2713';
    background: yellowgreen;
}

input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 .1em .1em #58a;
}

input[type="checkbox"]:disabled + label::before {
    background: gray;
    box-shadow: none;
    color: #555;
    cursor: not-allowed;
}

body {
    font: 150%/1.6 sans-serif;
}

9、垂直居中：重点（话说用在项目里了：））

vh
/**
 * Vertical centering - Viewport unit method
 */

main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
}

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

p {
    margin: 0;
}

body {
    background: #fb3;
    font: 100%/1.5 sans-serif;
}

flexbox：
 /**
     * Vertical centering - absolute positioning method
     */

    main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        padding: 1em 1.5em;
        box-sizing: border-box;
        background: #655;
        color: white;
        text-align: center;
    }

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

    p {
        margin: 0;
    }

    body {
        background: #fb3;
        font: 100%/1.5 sans-serif;
    }

10、页脚固定在底部

/**
 * Sticky footer with fixed height
 */
 
main {
    min-height: calc(100vh - 5em - 7em);
}

/* Toggle checkbox to alternate between short/long content */
#contents:checked ~ p { display: none }

/* Basic styling */
body {
    margin: 0;
    font: 100%/1.5 Palatino Linotype, Palatino, serif;
}

h1 { margin: .5em 0 0; }

header { text-align: center; height: 3em; }

main, footer {
    display: block;
    padding: .5em calc(50% - 400px);
}

footer {
    background: linear-gradient(#222, #444);
    color: white;
    height: 6em;
}

11、动画：animation里有step！！！

记于2016年12月18日 EOF
#css3