CSS3 卡片制作实验

http://www.nerdstore.com.br/p/camiseta-ba-zn-ga.html

card

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1612
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("http://fonts.googleapis.com/css?family=Open+Sans");
body {
    background: #c21d23;
    color: #fce803;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    width: 725px;
}
body:selection {
    background: #fce803;
    color: #c21d23;
}
a {
    padding: 8px;
    color: #fce803;
    position: absolute;
    bottom: 0;
    right: 0;
}
span {
    position: absolute;
}
.e {
    border: 2px solid #fce803;
    height: 250px;
    width: 225px;
    border-radius: 21px 0;
    position: relative;
    float: left;
    margin: 6px;
}
.tl {
    top: 12px;
    left: 12px;
    font-size: 20px;
}
.tr {
    position: absolute;
    top: 12px;
    right: 12px;
    letter-spacing: -1px;
}
.tr > p {
    text-align: right;
    font-size: 17px;
    margin: 0;
}
.el {
    top: 28px;
    left: 6px;
    font-size: 120px;
    letter-spacing: -3px;
}
.n {
    top: 175px;
    left: 15px;
    font-size: 21px;
    text-transform: uppercase;
}
.m {
    top: 205px;
    left: 15px;
    font-size: 21px;
    text-transform: uppercase;
}
@media (max-width: 600px) {
    body {
        transform: scale(0.5) translateX(-340px);
    }
    a {
        display: none;
    }
}

HTML

http://www.nerdstore.com.br/p/camiseta-ba-zn-ga.html

card

编辑器支持Emmet

快捷键

http://www.nerdstore.com.br/p/camiseta-ba-zn-ga.html

card

使用CSS3制作的三维平行文本卡片

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：