Шаблон:31415-test.css
Материал из Абсурдопедии
Перейти к навигацииПерейти к поиску/****** BLURRED TEXT ******/
.blur-container {
align-items: center;
display: flex;
height: 20vh;
justify-content: center;
width: 40vw;
background-color: white;
clear: right;
}
.blur-text {
color: transparent;
text-shadow: 0 0 0.4rem #eee;
transition: all 0.35s ease;
}
p.blur-text {
font-size: 4rem;
}
p.blur-text:hover {
color: #eee;
/* color: #A9A9A9; */
text-shadow: none;
}
/****** DROP-DOWN MENU ******/
div.drop-menu {background-color: SkyBlue;}
div.drop-menu a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
display:inline-block;
}
div.drop-menu ul {
display: inline;
margin: 0;
padding: 0;
}
div.drop-menu ul li {display: inline-block;}
div.drop-menu ul li:hover {background: #555;}
div.drop-menu ul li:hover ul {display: block;}
div.drop-menu ul li ul {
position: absolute;
width: 200px;
display: none;
}
div.drop-menu ul li ul li {
background: #555;
display: block;
}
div.drop-menu ul li ul li a {display:block !important;}
div.drop-menu ul li ul li:hover {background: #666;}
/****** RESPONSIVE 2-COLUMN LAYOUT ******/
.resp-row {
display: inline-block;
}
.resp-col, .resp-row {
box-sizing: border-box;
}
/* Clear floats after the columns */
.resp-col:after {
content: "";
display: table;
clear: both;
}
[class*="resp-col"] {
float: left;
width: 50%;
padding: 15px;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="resp-col"] {
width: 100%;
}
}
/****** ROUNDED IMAGE ******/
img.ts-img-rounded { border-radius:50%; }
/****** BLACK-AND-WHITE IMAGE ******/
img.ts-img-silver { filter: grayscale(100%); }
/****** SEPIA IMAGE ******/
img.ts-img-sepia { filter: sepia(100%); }
/****** ANIMATION ******/
.poof {
opacity: 0;
animation: opacityOn 20s normal forwards;
animation-delay: 3s;
}
@keyframes opacityOn {
0% {
opacity: 1;
}
69% {
opacity: 1;
}
70% {
opacity: 0;
}
77% {
opacity: 0;
}
78% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}