CSS
语言：
CSSSCSS
确定
/* Base Layout */
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700|Montserrat:400,700);
html,
body {
padding: 20px;
background: #2b2b2b;
color: #f3f3f3;
padding-bottom: 70px;
}
.container {
width: 75%;
margin: 0 auto;
}
@media (max-width: 768px) {
html,
body {
padding: 20px 0;
background: #2b2b2b;
color: #f3f3f3;
}
.container {
width: 100%;
/* Typography */
margin: 0 auto;
}
h1 {
font-family: 'Montserrat';
text-align: center;
}
h3 {
font-family: 'Lato';
font-weight: 300;
font-size: 25px;
text-align: center;
}
p {
font-family: 'Lato';
font-size: 20px;
font-weight: 300;
padding: 0 50px;
}
hr {
width: 150px;
margin: 50px auto;
height: 3px;
border: none;
/* The rest */
background: #27ae60;
}
h1.title {
margin-top: 50px;
font-size: 3em;
}
.nav-list li,
.nav-list2 li {
display: block;
list-style: outside none none;
margin: 0.4em 0.8em;
padding: 0;
}
.nav-list2 {
display: none;
}
}
.bottom {
position: absolute;
/* Navigation */
width: 100px;
}
.nav-list,
.nav-list2 {
font-family: 'Lato', Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
margin: 0 auto;
}
.nav-list *,
.nav-list2 * {
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
@media (min-width: 768px) {
.nav-list li,
.nav-list2 li {
display: inline-block;
}
}
.nav-list li,
.nav-list2 li {
list-style: outside none none;
margin: 0.8em 0.8em;
padding: 0;
}
.nav-list a,
.nav-list2 a {
padding: 5px 0.7em;
color: rgba(255, 255, 255, 0.5);
position: relative;
text-decoration: none;
}
.nav-list a:before {
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
left: 15%;
right: 15%;
top: 0;
bottom: 0;
border-left: 3px solid #27ae60;
border-right: 3px solid #27ae60;
}
.nav-list a:hover,
.nav-list .current a {
color: #fff;
}
.nav-list a:hover:before,
.nav-list .current a:before {
opacity: 1;
left: 0;
/* Typography */
right: 0;
}
h1 {
font-family: 'Montserrat';
font-size: 72px;
text-align: center;
}
h3 {
font-family: 'Lato';
font-weight: 300;
font-size: 25px;
text-align: center;
}
p {
font-family: 'Lato';
font-size: 20px;
font-weight: 300;
padding: 0 50px;
}
h1.title {
margin-top: 50px;
}
h1.montserrat {
margin-bottom: 10px;
}
h1.lato {
font-family: 'Lato';
font-weight: 300;
margin-top: 0;
}
h2 {
font-family: 'Montserrat';
font-weight: 400;
text-align: center;
font-size: 35px;
}
pre {
/* The rest */
font-size: 15px;
}
hr {
width: 150px;
margin: 50px auto;
height: 3px;
border: none;
background: #27ae60;
}
figure.snip1206 {
font-family: 'Montserrat', Arial, sans-serif;
color: #fff;
position: relative;
float: left;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-height: 220px;
width: 30%;
color: #000;
text-align: center;
}
figure.snip1206 * {
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1206 img {
opacity: 1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip1206:after {
background: #fff;
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
content: '';
opacity: 0.75;
-webkit-transform: skew(-45deg) scaleX(0);
-ms-transform: skew(-45deg) scaleX(0);
transform: skew(-45deg) scaleX(0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
figure.snip1206 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
figure.snip1206 h2,
figure.snip1206 p {
font-family: 'Montserrat';
margin: 0;
width: 100%;
opacity: 0;
}
figure.snip1206 h2 {
padding: 0 30px;
display: inline-block;
font-weight: 400;
text-transform: uppercase;
}
figure.snip1206 p {
padding: 0 50px;
font-size: 1em;
font-weight: 500;
}
figure.snip1206 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1206:hover:after {
-webkit-transform: skew(-45deg) scaleX(1);
-ms-transform: skew(-45deg) scaleX(1);
transform: skew(-45deg) scaleX(1);
-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
figure.snip1206:hover figcaption h2,
figure.snip1206:hover figcaption p {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
figure.snip1206:hover figcaption h2 {
opacity: 1;
}
figure.snip1206:hover figcaption p {
opacity: 0.7;
}
.image-row {
margin: 50px auto;
}
figure.snip1191 {
font-family: 'Lato', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px;
background: #000;
color: #333;
text-align: left;
width: 30%;
}
figure.snip1191 * {
box-sizing: border-box;
-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.snip1191 img {
width: 100%;
vertical-align: top;
}
figure.snip1191 figcaption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
figure.snip1191 h3 {
font-family: 'Montserrat';
position: absolute;
top: 0;
padding: 0px 25px;
line-height: 44px;
margin: 0;
left: 0;
font-weight: 400;
background-color: #000;
color: #fff;
}
figure.snip1191 h3:before {
position: absolute;
left: 100%;
border-style: solid;
border-width: 44px 12px 0 0;
border-color: #000 transparent transparent;
content: '';
top: 0;
}
figure.snip1191 span {
position: absolute;
bottom: 0;
right: 0;
color: #fff;
background-color: #000;
padding: 0 10px;
margin-right: -1px;
line-height: 40px;
font-size: 0.9em;
font-weight: 800;
text-transform: uppercase;
-webkit-transform: translateX(120%);
-ms-transform: translateX(120%);
transform: translateX(120%);
}
figure.snip1191 span:before {
position: absolute;
right: 100%;
border-style: solid;
border-width: 0 0 40px 12px;
border-color: transparent transparent #000;
content: '';
top: 0;
}
figure.snip1191 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
figure.snip1191.blue {
background-color: #2472a4;
}
figure.snip1191.blue h3,
figure.snip1191.blue span {
background-color: #2472a4;
}
figure.snip1191.blue span:before {
border-color: transparent transparent #2472a4;
}
figure.snip1191.blue h3:before {
border-color: #2472a4 transparent transparent;
}
figure.snip1191.red {
background-color: #ab3326;
}
figure.snip1191.red h3,
figure.snip1191.red span {
background-color: #ab3326;
}
figure.snip1191.red span:before {
border-color: transparent transparent #ab3326;
}
figure.snip1191.red h3:before {
border-color: #ab3326 transparent transparent;
}
figure.snip1191.orange {
background-color: #d67118;
}
figure.snip1191.orange h3,
figure.snip1191.orange span {
background-color: #d67118;
}
figure.snip1191.orange span:before {
border-color: transparent transparent #d67118;
}
figure.snip1191.orange h3:before {
border-color: #d67118 transparent transparent;
}
figure.snip1191:hover img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1191:hover span {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
/* Code Viewer */
transform: translateX(0);
}
.code-viewer {
width: 600px;
margin: 50px auto;
background: #2c3e50;
color: #2b2b2b;
}
.top-row {
width: 100%;
background: #34495e;
color: #f3f3f3;
margin-bottom: 0;
}
.top-row p {
line-height: 50px;
font-weight: 400;
border-bottom: 2px solid #27ae60;
}
.code-viewer pre {
color: #ecf0f1;
margin-top: -20px;
}
.color-grid,
layout-grid {
width: 90%;
margin: 0 auto;
}
.color-grid img,
.layout-grid img {
width: 70%;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
}
.img-1 {
margin-bottom: 30px;
}
.para p {
width: 70%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
8774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
