This Code snippet helps you to create cards with shaking effect. It is a webpage called “Zayn Designs”. The code includes various elements such as meta tags, title, body, div tags, span tags, h4 tags, and a link to CodePen. The webpage contains several sections with different designs and quotes. There is also a commented out form section for signing up for new projects. At the end of the code, there is a link to the CodePen profile of Zayn Alaoudi, presumably the creator of the webpage.
How to Create Responsive Cards with Shaking Effect in CSS
First of all, load the following assets into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Cormorant+Garamond|Poiret+One" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Chewy|Kaushan+Script|Permanent+Marker|Rock+Salt" rel="stylesheet">
Create the HTML structure for the cards as follows:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>Zayn Designs</title>
</head>
<body>
<div id="con">
<div class="zayn_1 shadow">
<span class="new">New</span> <span class="date-1">July 2017</span>
<div class="overlay"></div>
<h4 class="f-title">CODEPEN</h4>
</div>
</div>
<div id="con2">
<div class="zayn_2 shadow">
<span class="pop">Popular</span> <span class="date">July 2017</span>
<div class="overlay"></div>
<h4>He is not a lover who does not love forever.</h4>
</div>
<div class="zayn_3 shadow">
<span class="lat">latest</span> <span class="date">July 2017</span>
<div class="overlay"></div>
<h4>Show me your garden and I shall tell you what you are.</h4>
</div>
</div>
<div id="con3">
<div class="zayn_4 shadow">
<span class="free">Free</span> <span class="date-1">July 2017</span>
<div class="overlay"></div>
<h4>All theory, dear friend, is gray, but the golden tree of life springs
ever green.</h4>
</div>
</div>
<!--
<div id="con">
<div class="zayn_form">
<h1 class="form-title">Sign up for new projects</h1>
<input type="text" placeholder="Enter your email:"/>
</div>
</div>
-->
<div class="footer">
<h1>Created July/21/2017 3:00 PM.</h1>
</div>
</body>
</html>
<!-- FOLLOW -->
<a class="Follow" href="https://codepen.io/ZaynAlaoudi/" target="blank_"></a>
Now, style the cards using the following CSS styles:
body {
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
background-color: #fff;
}
#con {
width: 75%;
margin: 0 auto;
margin-top: 200px;
height: auto;
}
#con2 {
width: 75%;
margin: 0 auto;
margin-top: 30px;
height: auto;
}
#con3 {
width: 75%;
margin: 0 auto;
margin-top: 30px;
height: auto;
}
.con4{
width: 75%;
margin: 0 auto;
margin-top: 30px;
height: auto;
}
h4 {
width: 90%;
position: absolute;
font-size: 30px;
padding: 20px;
margin-top: 120px;
color: #fff;
}
.f-title{
text-align: center;
margin-top: 30px;
font-size: 30px;
font-family: 'Rock Salt', cursive;
-webkit-animation:colorchange 5s infinite alternate;
}
.zayn_1 {
position: relative;
margin-top: -150px;
background: url(http://i.huffpost.com/gen/1960925/images/o-COOLEST-CITIES-IN-AMERICA-facebook.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 3px solid rgba(255,162,52,0.8);
width: 100%;
height: 280px;
border-radius: 6px;
box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9);
transition: all 0.3s ease;
}
.zayn_2 {
position: relative;
margin-top: 1px;
background: url(https://i.ytimg.com/vi/fwoDwajwqdo/maxresdefault.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 3px solid rgba(2,204,186,0.8);
width: 49%;
height: 300px;
border-radius: 6px;
box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9);
transition: all 0.3s ease;
}
.zayn_3 {
position: relative;
float: right;
margin-top: -304px;
background: url(https://i.ytimg.com/vi/kD0jh_S975M/maxresdefault.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 3px solid rgba(169,81,237,0.8);
width: 49%;
height: 300px;
border-radius: 6px;
box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9);
transition: all 0.3s ease;
}
.zayn_4 {
position: relative;
margin-top: 1px;
background: url(http://www.lolwot.com/wp-content/uploads/2015/02/top-16-coolest-buildings-in-the-world.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 3px solid rgba(255,84,131,0.8);
width: 100%;
height: 280px;
border-radius: 6px;
box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9);
transition: all 0.3s ease;
}
.new {
color: #fff;
z-index: 1;
position: relative;
left: 2%;
top: 8%;
padding: 15px;
background: linear-gradient(to right, #02b3e4 0%, #02ccba 100%);
border-radius: 50px 120px 120px;
}
.zayn_form{
position: relative;
margin-top: -150px;
background:#fafafa;
border-bottom: 3px solid rgba(255,162,52,0.8);
width: 100%;
height: 280px;
border-radius: 6px;
box-shadow: 5px 5px 30px 0px rgba(46,61,73,0.9);
transition: all 0.3s ease;
}
/*
.form-title{
position: relative;
text-align: center;
margin-bottom: 40px;
}
input{
margin-top: 50px;
margin-left: 95px;
width: 50%;
display: inline-block;
text-align: center;
border-radius: 7px;
background: rgba(238, 238, 238, 1);
padding: 1em 1em;
outline: none;
border: none;
color: rgba(2, 204, 186, 0.4);
transition: 0.3s linear;
}
::placeholder {
color: rgba(2, 204, 186, 0.9);
}
input:focus {
background: rgba(2, 204, 186, 0.4);
}
*/
.date-1 {
color: #fff;
z-index: 1;
background: #b24592;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #b24592, #f15f79);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #b24592, #f15f79);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: absolute;
left: 80%;
top: 3%;
padding: 9px;
border-radius: 50px 120px 120px;
}
.date {
color: #fff;
z-index: 1;
background: #b24592;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #b24592, #f15f79);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #b24592, #f15f79);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: absolute;
left: 71%;
top: 3%;
padding: 9px;
border-radius: 50px 120px 120px;
}
.pop {
color: #fff;
z-index: 1;
position: absolute;
left: 2%;
top: 3%;
padding: 15px;
background: linear-gradient(to right, #fa3350 0%, #fa3380 100%);
border-radius: 50px 120px 120px;
}
.lat {
color: #fff;
z-index: 1;
position: absolute;
left: 2%;
top: 3%;
padding: 15px;
background: linear-gradient(to right, deeppink 0%, #fa3380 100%);
border-radius: 50px 120px 120px;
}
.free {
color: #fff;
z-index: 1;
position: absolute;
left: 2%;
top: 3%;
padding: 15px;
background: linear-gradient(to right, deepskyblue 0%, skyblue 100%);
border-radius: 50px 120px 120px;
}
.overlay {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(000,000,000, 0.6);
border-radius: 6px;
}
@media only screen and (max-width: 840px) {
h4 {
font-size: 24px;
}
.zayn_2 {
position: relative;
width: 100%;
}
.zayn_3 {
position: relative;
width: 100%;
margin-top: 30px;
}
.zayn_4 {
position: relative;
width: 100%;
margin-top: 360px;
}
.date {
left: 70%;
}
.date-1 {
left: 70%;
}
}
.footer {
margin-top: 50px;
position: absolute;
background: #b24592;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #b24592, #f15f79);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #b24592, #f15f79);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding: 15px;
width: 100%;
border-radius: 4px;
}
.footer h1 {
color: #fff;
font-size: 20px;
text-align: center;
}
.shadow:hover {
box-shadow: 5px 1px 10px 0px rgba(46,61,73,0.1);
transition: all 0.3s ease;
}
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shadow:hover,
.shadow:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes colorchange {
0% {
color: darkviolet;
}
10% {
color: #fa3380;
}
20% {
color: #02b3e4;
}
30% {
color: #02ccba;
}
40% {
color: #a951ed;
}
50% {
color: #ffa234;
}
60% {
color: #ff5483;
}
70% {
color: deepskyblue;
}
80% {
color: purple;
}
90% {
color: lightpink;
}
100% {
color: #fff;
}
}
/* FOLLOW*/
.Follow { background:url("https://pbs.twimg.com/profile_images/959092900708544512/v4Db9QRv_bigger.jpg")no-repeat center / contain;
width: 50px;
height: 50px;
bottom: 9px;
right: 20px;
display:block;
position:fixed;
border-radius:50%;
z-index:999;
animation: rotation 10s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
That’s all! hopefully, you have successfully created Responsive Cards with Shaking Effect in CSS. If you have any questions or suggestions, feel free to comment below.
