I would like to intro before loading the page content was hidden and shown after loading intro
$(document).ready(function() {
$('#content').removeClass('fullwidth');
$('#content').removeClass('fullwidth').delay(10).queue(function(next){
$(this).addClass('fullwidth');
next();
});
return false;
});
http://jsfiddle.net/19r5L0x7/2/
Try this work around:
$(document).ready(function() {
$('#content').removeClass('fullwidth');
//$('body').load(function() {
$('#content').removeClass('fullwidth').delay(50).queue(function(next){
$(this).addClass('fullwidth');
next();
});
$(".fullwidth").width(100);
var intervalId = setInterval(function(){
var w = $(".fullwidth .expand").width() / $('.fullwidth .expand').parent().width() * 100;
if(w==100)
{
clearInterval(intervalId);
$(".load").fadeOut("slow");
alert("done");
//your show content code
}
}, 0);
return false;
});
//});
body {
background: #161616 url(pattern_40.gif) top left repeat;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
#content {
width:100%;
height:5px;
margin:50px auto;
background:#000;
}
.fullwidth .expand {
width:100%;
height:1px;
margin:2px 0;
background:#2187e7;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-animation:fullexpand 10s ease-out;
-webkit-animation:fullexpand 10s ease-out;
}
#-moz-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
#-webkit-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
/* Loader Bar */
#-moz-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
#-webkit-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
.trigger, .triggerFull, .triggerBar {
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
text-decoration: none;
text-transform: lowercase;
text-align: center;
color: #fff;
padding: 10px;
border-radius: 3px;
display: block;
margin: 0 auto;
width: 140px;
}
.trigger:hover, .triggerFull:hover, .triggerBar:hover {
background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="load">
<div id="content">
<span class="expand"></span>
</div>
Related
I am trying to write keyframe, animation in my code but I can't figure it out even after reading the documentation. Please help
```const ButtonStyle = styled.div`
.btn_rainbow {
text-decoration: none;
background-color: #c53ab4;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 16px;
&:hover {
background-image: linear-gradient(90deg,
#00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
}
}
`;
export default function Button() {
return (
<ButtonStyle>
<a class="btn_rainbow" href="#">Click Me!</a>
</ButtonStyle>
);
}```
The CSS Keyframe I wanted to add:
```#keyframes slidebg {
to {
background-position:20vw;
}
}
.btn_rainbow:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF
100%);
animation:slidebg 5s linear infinite;
}```
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<ButtonStyle>
<button class="glow-on-hover" href="#">Click Me!</button>
</ButtonStyle>
I have this function to shine any text element which is passed to it.
The first example here works fine (the second example doesn't work, I provide this in case this can help us find out the issue):
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const prepareCaption = document.querySelector(".prepareCaption");
Shine(prepareCaption);
}, 2500);
.prepare-container {
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
margin: 0 auto;
left: 2.5%;
height: 20vh;
width: 95%;
z-index: 11;
top: 55vh;
padding-top: 10px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prepareCaption {
position: relative;
filter: drop-shadow(2px 2px 2px #100021) drop-shadow(1px .05em 1px #0d021a);
text-align: center;
width: 100%;
color: #f8f7fa;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="prepare-container">
<p class="prepareCaption" style="color: rgb(255, 0, 64); font-family: "Open Sans Semibold"; font-size: 28px;">This is shining</p>
</div>
I expect this function work in any satiation but unfortunately we have this second example in which the function acts wired and doesn't work as expected, here it is:
Note: the shine function is identical in both cases. the only difference is the element I pass to the function.
Here we want to shine the expandCaptionSpan id:
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>
How can I fix the second example? What am I missing?
It seems that your JS is the same but CSS not. I've found that text-shadow is causing the issue. Just replace it with filter as it's done in your first example and it works. It seems that the issue is caused by render system.
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>
Here is a link to my webpage https://taniaswebpages.com/, specifically Website 5 - Snowfall that I am currently working on, the webpage only works for me on Safari on Iphone6s, and doesn't apply the css on Mac Chrome/Safari. But for others it works... why is it changing depending on the type of platform or user?
HTML/CSS:
body.mainpage2 {
margin: 0;
padding: 0;
font-family: lato;
background-color: #e74c3c;
}
.color {
margin-top: 350px;
text-align: center;
}
#hex {
display: block;
color: white;
font-size: 40px;
text-transform: uppercase;
margin: 15px;
letter-spacing: 0.1em;
}
.color button {
background: none;
outline: none;
color: white;
border: 2px solid white;
cursor: pointer;
font-size: 22px;
border-radius: 5px;
box-shadow: 5px 6px 30px 5px #fff;
width: 200px;
}
body.mainpage3 {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(221, 106, 95, 0.81));
margin: 0;
padding: 2em 2em 4em;
font-family: Lato;
font-size: 16.5px;
line-height: 24px;
float;
align-content: flex-start;
display: block;
}
input[type=button] {
width: 8%;
border: none;
padding: 8px 8px;
cursor: pointer;
color: palevioletred;
}
.image1 {
position: relative;
right: -400px;
bottom: 600px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
.image2 {
position: relative;
right: -100px;
bottom: 200px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
body.mainpage4 {
margin: 0;
padding: 0;
background-color: darkseagreen;
}
.container1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container1 span {
text-transform: uppercase;
display: block;
}
.Words1 {
color: forestgreen;
font-family: monospace;
font-size: 60px;
font-weight: 700;
letter-spacing: 6px;
margin-bottom: 4px;
position: relative;
}
.Words2 {
color: red;
font-family: cursive;
font-size: 40px;
font-weight: 750;
letter-spacing: 2px;
animation: blinkingText 1s linear infinite;
}
#keyframes blinkingText {
0% {
color: #f00;
}
49% {
color: transparent;
}
50% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: #f00;
}
}
.image {
background-size: cover;
width: 100%;
height: 1000px;
position: relative;
overflow: hidden;
}
.snow1 {
background: url(https://taniaswebpages.com/snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 3s infinite linear;
}
.snow2 {
background: url(snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 8s infinite linear;
}
#keyframes snowfall {
0% {
background-position: 0px 0px
}
100% {
background-position: 100px 650px
}
}
#keyframes snowfallSecond {
0% {
background-position: 0px -100px
}
100% {
background-position: 0px 650px
}
}
<!DOCTYPE html>
<html>
<head>
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
</head>
<body class="mainpage4">
<div class="container1">
<span class="Words1">Merry Christmas</span>
<span class="Words2"> and Happy Holidays!</span>
</div>
<div class="image">
<div class="snow1"></div>
<div class="snow2"></div>
</div>
</body>
</html>
Try changing
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
to
<link href="taniaWebsite2.css" type="text/css" rel="stylesheet">
With quotes around the attribute values and all lowercase.
I am making a shop for my server, the shop lets me edit only the css, which I am doing, but in the shop there is a giant white space to the right, top and bottom of the screen.
I tried looking for css solutions, non of them worked.
How do I fix this?
WEBSITE: http://purgepvp-mc.tebex.io/?theme=174117
**CSS*:*
#import url(http://fonts.googleapis.com/css?family=Lato;
#import url(http://fonts.googleapis.com/css?family=Futura);
.header {
background-size: cover;
padding: 20px;
margin: 0;
background-image: url("https://i.imgur.com/eFt7yL2.jpg");
}
.progress-bar {
background-color: #592e89
}
body > .container {
width: 100% !important;
padding: 0 !important;
background: #757575;
}
.panel-heading {
border-radius: 0px !important;
border: 0px !important;
height: 40px !important;
background-color: #592e89 !important;
color: #FFF !important;
border-radius: 0px !important;
}
.logo {
}
.panel {
border: none !important;
border-radius: 0px !important;
}
.panel-body {
color: #FFF !important;
border-radius: 0px !important;
background-color: #3a3a3a;
}
.content {
border: none !important;
}
.navbar {
border-radius: 1px;
color: white;
background-color: #592e89;
border: none !important;
}
.donation-goal {
font-weight: bold;
}
.nav {
margin: 0 auto;
text-align: center;
display: block;
width: max-content;
float: initial;'
font-weight: bold;'
}
.nav a, .nav li {
color: #FFF !important;
transition: all 0.2s linear;
text-decoration: none !important;
font-weight: bold;
}
.nav li:hover, .nav li:hover a {
background-color: #3a3a3a;
color: #FFF !important;
text-decoration: none !important;
border-radius: 20px;
font-weight: bold;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.logo img {
content: url('https://i.imgur.com/S7Lfi8X.jpg');
height: initial !important;
width: 600px;
margin: 0 auto;
display: block;
}
.logo {
width: 100% !important;
animation: pulse 3s infinite;
margin: 0 auto;
display: table;
margin-top: 50px;
animation-direction: alternate;
-webkit-animation-name: pulse;
animation-name: pulse;
}
.footer {
border-top: 5px solid #592e89;
background-color: #3a3a3a;
padding-bottom: 30px;
font-weight: bold;
}
Your logo caused this.
Add this css
body .container {
overflow-x: hidden;
}
.container .body {
margin-right:0px;
margin-left:0px;
}
body {
margin-top: 0px !important; /*in your syle.min.css, it makes the margin-top:20px*/
}
There is a margin available by default,
for example
<head>
title scripts etc.
</head>
<body>
<header class="...">your html</header>
<div class="..."></div>
</body>
Either give an id or class to the body and make margin = 0 in the body class or hard code
<body style="margin:0;">
<header class="...">your html</header>
<div class="..."></div>
</body>
This will prevent the white space.
the jquery has a set of functions in which i want to call the onmouseover function manually.
my index.php consist of a div in which it has a ease-in-out transition like this DEMO on mouseover event. i want to control the ease-in-out transition on a button click.
when i searched on this topic,i found it can be done by if($("#my_btn_id").trigger('mouseover')) . but i tried and i could not find a solution for this.
demo - http://jsfiddle.net/victor_007/dghfwz5e/1/
modify css which was on :hover change it to class .hover and toggle it using jQuery
$('.ch-item').on('click', function() {
$(this).toggleClass('hover');
});
.ch-item {
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ch-img-3 {
background-image: url(http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg);
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
/*for a smooth font */
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(255, 242, 34, 0.8);
}
.ch-item.hover {
box-shadow: inset 0 0 0 110px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item.hover .ch-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
body {
font-family: Cambria, Georgia, serif;
background: #f9f9f9 url(../images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main {
width: 90%;
margin: 0 auto;
position: relative;
}
.container > header {
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-align: center;
}
.container > header h1 {
font-size: 32px;
line-height: 32px;
margin: 0;
position: relative;
font-weight: 300;
color: #777;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
.container > header h2 {
font-size: 14px;
font-weight: 300;
font-style: italic;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.1);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255, 255, 255, 0.3);
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos {
text-align: center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a {
display: inline-block;
font-style: italic;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
/* IE6-9 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover {
color: #333;
background: #fff;
}
.codrops-demos a:active {
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
background: #f0f0f0;
border-color: #d9d9d9;
color: #aaa;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#f6f6f6', GradientType=0);
/* IE6-9 */
}
.support-note span {
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions {
display: block;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="main">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Cylon</h3>
<p>by Daniel Nyari View on Dribbble
</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Cylon</h3>
<p>by Daniel Nyari View on Dribbble
</p>
</div>
</div>
</li>
</ul>
</section>