【css揭秘】- 47个不可不知的 css 技巧(上篇0-19)（二）

/**
 * Parallelograms — with extra HTML element
 */
<a href="#yolo" class="button"><div>Click me</div></a>
<button class="button"><div>Click me</div></button>
.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }
.button {
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: #58a;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

/**
 * Parallelograms — with pseudoelements
 */
<a href="#yolo" class="button"><div>Click me</div></a>
<button class="button"><div>Click me</div></button>
.button {
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: transparent;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}
.button::before {
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

/**
 * Diamond images — via transforms
 */
<div class="diamond">
    <img src="http://placekitten.com/200/300" />
</div>
.diamond {
    width: 250px;
    height: 250px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 100px;
}
.diamond img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
    z-index: -1;
    position: relative;
}

/**
 * Diamond images — via clip-path
 */
img {
    max-width: 250px;
    margin: 20px;
    -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: 1s;
}
img:hover {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

<div>Hey, focus! You’re er!</div>
/**
 * Beveled corners — with gradients
 */
div {
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
                linear-gradient(-135deg, transparent 15px, #58a 0) top right,
                linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
                linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}

/**
 * Scoop corners
 */
div {
    background: #58a;
    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
              radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
              radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
              radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 1em 1.2em;
max-width: 12em;
color: white;
font: 130%/1.6 Baskerville, Palatino, serif;
}

/**
 * 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;
}

/**
 * Beveled corners — with clip-path
 */
div {
    background: #58a;
    -webkit-clip-path: 
            polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            20px 100%, 0 calc(100% - 20px), 0 20px);
    clip-path:
                    polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
                    calc(100% - 20px) 100%,
                    20px 100%, 0 calc(100% - 20px), 0 20px);
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}

<!-- 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>
/**
 * 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;
}

/**
 * Animated pie chart
 */
.pie {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}
.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin {
    to { transform: rotate(.5turn); }
}
@keyframes bg {
    50% { background: currentColor; }
}

/**
 * Static pie charts
 */
.pie {
    display: inline-block;
    position: relative;
    width: 100px;
    line-height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
    color: transparent;
    text-align: center;
}
@keyframes spin {
    to { transform: rotate(.5turn); }
}
@keyframes bg {
    50% { background: #655; }
}   
.pie::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 50%; height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 50s linear infinite, bg 100s step-end infinite;
    animation-play-state: paused;
    animation-delay: inherit;
}

/**
 * Pie charts — with SVG
 */
.pie {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 10px;
    transform: rotate(-90deg);
}
svg {
    background: yellowgreen;
    border-radius: 50%;
}
circle {
    fill: yellowgreen;
    stroke: #655;
    stroke-width: 32;
}
@keyframes grow { to { stroke-dasharray: 100 100 } }
.pie.animated circle {
    animation: grow 2s infinite linear;
}

/**
 * One-sided shadow
 */
div {
    width: 1.6in;
    height: 1in;
    background: #fb3;
    box-shadow: 0 5px 4px -4px black;
}

/**
 * One-sided shadow
 */
div {
    width: 1.6in;
    height: 1in;
    background: #fb3;
    box-shadow: 3px 3px 6px -3px black;
}

/**
 * One-sided shadow
 */
div {
    width: 1.6in;
    height: 1in;
    background: #fb3;
    box-shadow: 5px 0 5px -5px black,
               -5px 0 5px -5px black;
}
复制代码

<div class="speech">Speech bubble</div>
<div class="dotted">Dotted border</div>
<div class="cutout">Cutout corners</div>
/**
 * Irregular drop-shadows
 */
div {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: bottom;
    box-sizing: border-box;
    width: 5.9em;
    height: 5.2em;
    margin: .6em;
    background: #fb3;
    /*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
    -webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
    filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
    font: 200%/1.6 Baskerville, Palatino, serif;
    text-align: center;
}
.speech {
    border-radius: .3em;
}
.speech::before {
    content: '';
    position: absolute;
    top: 1em;
    right: -.7em;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    border-left-color: #fb3;
    border-right-width: 0;
}
.dotted {
    background: transparent;
    border: .3em dotted #fb3;
}
.cutout {
    border: .5em solid #58a;
    border-image: 1 url('data:image/svg+xml,\
                         <svg xmlns="http://www.w3.org/2000/svg"\
                             width="3" height="3" fill="%23fb3">\
                             <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
                    </svg>');
    background-clip: padding-box;
}

/**
 * Color tinting — with filters
 */
img {
    max-width: 640px;
    transition: 1s filter, 1s -webkit-filter;
    -webkit-filter: sepia() saturate(4) hue-rotate(295deg);
    filter: sepia() saturate(4) hue-rotate(295deg);
}
img:hover,
img:focus {
    -webkit-filter: none;
    filter: none;
}

/**
 * Color tinting — with blending modes
 */
.tinted-image {
    width: 300px; height: 440px;
    background-size: cover;
    background-color: hsl(335, 100%, 50%);
    background-blend-mode: luminosity;
    transition: .5s background-color;
}
.tinted-image:hover {
    background-color: transparent;
}

/**
 * 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://placekitten.com/200/300") 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; }
复制代码

/**
 * Folded corner effect
 */
div {
    width: 12em;
    background: #58a; /* Fallback */
    background:
            linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat,
            linear-gradient(-135deg, transparent 1.5em, #58a 0);
    background-size: 2em 2em, auto;
    padding: 2em;
    color: white;
    font: 100%/1.6 Baskerville, Palatino, serif;
}
复制代码

/**
 * 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)
}