css绘制卡券优惠券_CSS3 可伸缩（响应式）电影票/优惠券/卡片界面组件

CSS

语言：

CSSSCSS

确定

/**

* Author: Kris Olszewski

* CodePen: http://codepen.io/KrisOlszewski/full/Jodjbd/

*/

*,

*:after,

*:before {

box-sizing: border-box;

}

body {

font-family: 'Open Sans', 'Arial', sans-serif;

padding: 5vw 15vw;

background-color: #e6e9ed;

text-rendering: optimizeSpeed;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

h1,

h2,

h3 {

font-weight: normal;

/**

* Component: Card

* --------------------------------------------------

*/

margin: 0;

}

.c-card {

position: relative;

overflow: hidden;

padding-bottom: 75%;

border-radius: 1vw;

/**

* Image copyright: Adam Osinski

* https://www.facebook.com/plywanie

*/

background-color: #fff;

}

.c-card__header {

position: absolute;

top: 0;

right: 0;

left: 0;

overflow: hidden;

padding-bottom: 56.25%;

background-color: #5d9cec;

background-image: url("http://www.kolszewski.com/images/swimming.jpg?v5");

background-size: cover;

}

.c-card__header:before {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: rgba(0, 0, 0, 0.35);

}

.c-card__header:after {

content: "";

position: absolute;

left: 0;

top: 100%;

width: 150%;

height: 100%;

background-color: #fff;

-webkit-transform: rotate(-5deg);

-ms-transform: rotate(-5deg);

transform: rotate(-5deg);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.c-card__title {

font-size: 6vw;

font-weight: 300;

line-height: 1;

z-index: 10;

position: absolute;

bottom: 0;

left: 6.25%;

width: 75%;

padding-bottom: 9%;

color: #fff;

text-transform: uppercase;

-webkit-transform: rotate(-5deg);

-ms-transform: rotate(-5deg);

transform: rotate(-5deg);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.c-card__content {

position: absolute;

right: 0;

bottom: 0;

left: 0;

padding-bottom: 18.75%;

}

.c-card__details {

position: absolute;

top: 50%;

right: 6.25%;

left: 6.25%;

margin: 0;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.c-card__description,

.c-card__amount {

font-size: 3vw;

font-weight: 600;

line-height: 1;

color: #656d78;

}

.c-card__description {

float: left;

}

.c-card__amount {

/**

* Component: Button

* --------------------------------------------------

*/

float: right;

}

.c-button {

-webkit-appearance: none;

margin: 0;

border: 0;

overflow: visible;

font: inherit;

text-transform: none;

display: inline-block;

vertical-align: middle;

text-decoration: none;

text-align: center;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.c-button:hover,

.c-button:focus {

outline: none;

text-decoration: none;

}

.c-button:not(:disabled) {

/**

* Component: Button

* Modifier: Dropdown

* --------------------------------------------------

*/

cursor: pointer;

}

.c-button--join {

position: absolute;

right: 6.25%;

bottom: 0;

z-index: 10;

background-color: #5d9cec;

padding: 2vw 3vw;

color: #e6e9ed;

font-size: 3vw;

font-weight: 600;

line-height: 1;

border-radius: 0.5vw;

-webkit-transition: background-color 0.2s linear;

transition: background-color 0.2s linear;

-webkit-transform: rotate(-5deg);

-ms-transform: rotate(-5deg);

transform: rotate(-5deg);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.c-button--join:hover {

background-color: #4a89dc;

}