19th July 2012 Marvin@Blogfreakz · CSS3, Design, HTML, Inspiration, Tutorials, Web Design · Comments Off

How to Create CSS3 Optical Illusions

Optical Illusions How to Create CSS3 Optical Illusions

Here’s another awesome CSS3 tutorial that may be useful to your design projects. Andrew of Script Tutorials demonstrates how you can create optical illusions using CSS3. Below are the following codes:

HTML

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Optical Illusions | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<link href="css/illusions.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h2>CSS3 Optical Illusions</h2>
<a href="http://www.script-tutorials.com/css3-optical-illusions/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div>
<span id="page1"></span>
<span id="page2"></span>
<span id="page3"></span>
<span id="page4"></span>
<span id="page5"></span>
<span id="page6"></span>
<a href="#page1" title="Are these lines parallel? Yes, of course">1</a>
<a href="#page2" title="The circles rotate?">2</a>
<a href="#page3" title="The upper half of each figure is same as lower half, is not it? Lets turn them, The difference becomes much bigger">3</a>
<a href="#page4" title="At the intersections of white lines, except for the intersection, where you keep your sight at the moment, we can see small gray spots.">4</a>
<a href="#page5" title="See inside for some time. They saw the green stains? But nothing green is not here.">5</a>
<a href="#page6" title="Another one move effect">6</a>
<div>
<div id="i1">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div id="i2">
<div class="cir1">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div class="cir2">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div class="cir3">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div>
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div class="cir5">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div class="cir6">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div class="cir7">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div class="cir8">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
<div class="cir9">
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
</div>
<div id="i3">
<div class="pos">38</div>
<div class="rev">38</div>
</div>
<div id="i4">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div id="i5">
<div>
<div id="o1"></div><div id="o2"></div><div id="o3"></div>
<div id="o4"></div><div id="o5"></div><div id="o6"></div>
<div id="o7"></div><div id="o8"></div><div id="o9"></div>
<div id="o10"></div><div id="o11"></div><div id="o12"></div>
</div>
</div>
<div id="i6">
<div>
<div class="yellow r1">
<div class="pink r2">
<div class="yellow r3">
<div class="pink r4"></div>
</div>
</div>
</div>
</div>
<div>
<div class="yellow r1">
<div class="pink r2">
<div class="yellow r3">
<div class="pink r4"></div>
</div>
</div>
</div>
</div>
<div>
<div class="yellow r1">
<div class="pink r2">
<div class="yellow r3">
<div class="pink r4"></div>
</div>
</div>
</div>
</div>
<div>
<div class="yellow r1">
<div class="pink r2">
<div class="yellow r3">
<div class="pink r4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS

Css/illusions.css

span {
    display: none;
}
.contr {
    color: #000000;
    cursor: pointer;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    width: 60px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
    background-color:#e3e3ff;
    background: -moz-linear-gradient(#ffffff, #eee);
    background: -ms-linear-gradient(#ffffff, #eee);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #eee));
    background: -webkit-linear-gradient(#ffffff, #eee);
    background: -o-linear-gradient(#ffffff, #eee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee')";
    background: linear-gradient(#ffffff, #eee);
}
.contr:hover{
    background-color:#e3e3ff;
    box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
}
.demos {
    background-color: #b2b2b2;
    display: block;
    height: 640px;
    margin-top: 55px;
    overflow: hidden;
    position: relative;
}
.demos > div {
    display: none;
}
#page1:target ~ .demos #i1 {
    display: block;
}
#page2:target ~ .demos #i2 {
    display: block;
}
#page3:target ~ .demos #i3 {
    display: block;
}
#page4:target ~ .demos #i4 {
    display: block;
}
#page5:target ~ .demos #i5 {
    display: block;
}
#page6:target ~ .demos #i6 {
    display: block;
}
/* illusion 1 */
#i1 {
    width: 900px;
}
#i1 .row {
    background-color: #fff;
    border-bottom: 2px solid #888;
    height: 90px;
    -webkit-background-size: 140px 70px;
    -moz-background-size: 140px 70px;
    -ms-background-size: 140px 70px;
    -o-background-size: 140px 70px;
    background-size: 140px 70px;
    background-position: 0 50%;
    background-image: -webkit-linear-gradient(0deg, #000 50%, transparent 50%, transparent);
    background-image: -moz-linear-gradient(0deg, #000 50%, transparent 50%, transparent);
    background-image: -ms-linear-gradient(0deg, #000 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(0deg, #000 50%, transparent 50%, transparent);
    background-image: linear-gradient(0deg, #000 50%, transparent 50%, transparent);
}
#i1 .row:nth-child(3n+3) {
    background-position: 60px 50%;
}
#i1 .row:nth-child(2n+2) {
    background-position: 30px 50%;
}
/* illusion 2 */
#i2 {
    background-color: #98CB00;
    height: 640px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 150px;
    position: relative;
    width: 600px;
}
#i2  > div {
    float: left;
    height: 105px;
    padding-left: 90px;
    padding-top: 90px;
    position: relative;
    width: 105px;
}
#i2  div div {
    border: 1px outset #fff;
    height: 20px;
    position: absolute;
    width: 30px;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    -ms-border-radius: 100px / 50px;
    -o-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    background: -webkit-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);
    background: -moz-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);
    background: -ms-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);
    background: -o-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);
    background: linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);
}
#i2 #o1 {
    -webkit-transform: rotate(-30deg) translatex(70px);
    -moz-transform: rotate(-30deg) translatex(70px);
    -ms-transform: rotate(-30deg) translatex(70px);
    -o-transform: rotate(-30deg) translatex(70px);
    transform: rotate(-30deg) translatex(70px);
}
#i2 #o2 {
    -webkit-transform: rotate(-60deg) translatex(70px);
    -moz-transform: rotate(-60deg) translatex(70px);
    -ms-transform: rotate(-60deg) translatex(70px);
    -o-transform: rotate(-60deg) translatex(70px);
    transform: rotate(-60deg) translatex(70px);
}
#i2 #o3 {
    -webkit-transform: rotate(-90deg) translatex(70px);
    -moz-transform: rotate(-90deg) translatex(70px);
    -ms-transform: rotate(-90deg) translatex(70px);
    -o-transform: rotate(-90deg) translatex(70px);
    transform: rotate(-90deg) translatex(70px);
}
#i2 #o4 {
    -webkit-transform: rotate(-120deg) translatex(70px);
    -moz-transform: rotate(-120deg) translatex(70px);
    -ms-transform: rotate(-120deg) translatex(70px);
    -o-transform: rotate(-120deg) translatex(70px);
    transform: rotate(-120deg) translatex(70px);
}
#i2 #o5 {
    -webkit-transform: rotate(-150deg) translatex(70px);
    -moz-transform: rotate(-150deg) translatex(70px);
    -ms-transform: rotate(-150deg) translatex(70px);
    -o-transform: rotate(-150deg) translatex(70px);
    transform: rotate(-150deg) translatex(70px);
}
#i2 #o6 {
    -webkit-transform: rotate(-180deg) translatex(70px);
    -moz-transform: rotate(-180deg) translatex(70px);
    -ms-transform: rotate(-180deg) translatex(70px);
    -o-transform: rotate(-180deg) translatex(70px);
    transform: rotate(-180deg) translatex(70px);
}
#i2 #o7 {
    -webkit-transform: rotate(-210deg) translatex(70px);
    -moz-transform: rotate(-210deg) translatex(70px);
    -ms-transform: rotate(-210deg) translatex(70px);
    -o-transform: rotate(-210deg) translatex(70px);
    transform: rotate(-210deg) translatex(70px);
}
#i2 #o8 {
    -webkit-transform: rotate(-240deg) translatex(70px);
    -moz-transform: rotate(-240deg) translatex(70px);
    -ms-transform: rotate(-240deg) translatex(70px);
    -o-transform: rotate(-240deg) translatex(70px);
    transform: rotate(-240deg) translatex(70px);
}
#i2 #o9 {
    -webkit-transform: rotate(-270deg) translatex(70px);
    -moz-transform: rotate(-270deg) translatex(70px);
    -ms-transform: rotate(-270deg) translatex(70px);
    -o-transform: rotate(-270deg) translatex(70px);
    transform: rotate(-270deg) translatex(70px);
}
#i2 #o10 {
    -webkit-transform: rotate(-300deg) translatex(70px);
    -moz-transform: rotate(-300deg) translatex(70px);
    -ms-transform: rotate(-300deg) translatex(70px);
    -o-transform: rotate(-300deg) translatex(70px);
    transform: rotate(-300deg) translatex(70px);
}
#i2 #o11 {
    -webkit-transform: rotate(-330deg) translatex(70px);
    -moz-transform: rotate(-330deg) translatex(70px);
    -ms-transform: rotate(-330deg) translatex(70px);
    -o-transform: rotate(-330deg) translatex(70px);
    transform: rotate(-330deg) translatex(70px);
}
#i2 #o12 {
    -webkit-transform: rotate(0deg) translatex(70px);
    -moz-transform: rotate(0deg) translatex(70px);
    -ms-transform: rotate(0deg) translatex(70px);
    -o-transform: rotate(0deg) translatex(70px);
    transform: rotate(0deg) translatex(70px);
}
/* illusion 3 */
#i3 {
    color: #000000;
    font-family: Times New Roman;
    font-size: 250px;
    padding-left: 300px;
}
#i3 .rev {
    text-align: right;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
/* illusion 4 */
#i4 .row {
    background-color: #fff;
    border-bottom: 5px solid #fff;
    height: 50px;
    -webkit-background-size: 60px 50px;
    -moz-background-size: 60px 50px;
    -ms-background-size: 60px 50px;
    -o-background-size: 60px 50px;
    background-size: 60px 50px;
    background-position: 0 50%;
    background-image: -webkit-linear-gradient(0deg, #000 90%, transparent 10%, transparent);
    background-image: -moz-linear-gradient(0deg, #000 90%, transparent 10%, transparent);
    background-image: -ms-linear-gradient(0deg, #000 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(0deg, #000 50%, transparent 50%, transparent);
    background-image: linear-gradient(0deg, #000 50%, transparent 50%, transparent);
}
/* illusion 5 */
@-webkit-keyframes custom_effect {
    0% {opacity: 0;}
    33% {opacity: 1;}
    100% {opacity: 1;}
}
@-moz-keyframes custom_effect {
    0% {opacity: 0;}
    33% {opacity: 1;}
    100% {opacity: 1;}
}
#i5 {
    background-color: #b2b2b2;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 600px;
}
#i5  > div {
    float: left;
    height: 200px;
    padding-left: 200px;
    padding-top: 200px;
    position: relative;
    width: 200px;
}
#i5  div div {
    height: 50px;
    position: absolute;
    width: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    background-color: #b2b2b2;
    background-image: -webkit-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);
    background-image: -moz-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);
    background-image: -o-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);
    background-image: radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);
    -moz-animation-name: custom_effect;
    -moz-animation-duration: 1.2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: custom_effect;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#i5 #o1 {
  -moz-transform: rotate(30deg) translatex(150px);
  -moz-animation-delay: 0.1s;
  -webkit-transform: rotate(30deg) translatex(150px);
  -webkit-animation-delay: 0.1s;
}
#i5 #o2 {
  -moz-transform: rotate(60deg) translatex(150px);
  -moz-animation-delay: 0.2s;
  -webkit-transform: rotate(60deg) translatex(150px);
  -webkit-animation-delay: 0.2s;
}
#i5 #o3 {
  -moz-transform: rotate(90deg) translatex(150px);
  -moz-animation-delay: 0.3s;
  -webkit-transform: rotate(90deg) translatex(150px);
  -webkit-animation-delay: 0.3s;
}
#i5 #o4 {
  -moz-transform: rotate(120deg) translatex(150px);
  -moz-animation-delay: 0.4s;
  -webkit-transform: rotate(120deg) translatex(150px);
  -webkit-animation-delay: 0.4s;
}
#i5 #o5 {
  -moz-transform: rotate(150deg) translatex(150px);
  -moz-animation-delay: 0.5s;
  -webkit-transform: rotate(150deg) translatex(150px);
  -webkit-animation-delay: 0.5s;
}
#i5 #o6 {
  -moz-transform: rotate(180deg) translatex(150px);
  -moz-animation-delay: 0.6s;
  -webkit-transform: rotate(180deg) translatex(150px);
  -webkit-animation-delay: 0.6s;
}
#i5 #o7 {
  -moz-transform: rotate(210deg) translatex(150px);
  -moz-animation-delay: 0.7s;
  -webkit-transform: rotate(210deg) translatex(150px);
  -webkit-animation-delay: 0.7s;
}
#i5 #o8 {
  -moz-transform: rotate(240deg) translatex(150px);
  -moz-animation-delay: 0.8s;
  -webkit-transform: rotate(240deg) translatex(150px);
  -webkit-animation-delay: 0.8s;
}
#i5 #o9 {
  -moz-transform: rotate(270deg) translatex(150px);
  -moz-animation-delay: 0.9s;
  -webkit-transform: rotate(270deg) translatex(150px);
  -webkit-animation-delay: 0.9s;
}
#i5 #o10 {
  -moz-transform: rotate(300deg) translatex(150px);
  -moz-animation-delay: 1.0s;
  -webkit-transform: rotate(300deg) translatex(150px);
  -webkit-animation-delay: 1.0s;
}
#i5 #o11 {
  -moz-transform: rotate(330deg) translatex(150px);
  -moz-animation-delay: 1.1s;
  -webkit-transform: rotate(330deg) translatex(150px);
  -webkit-animation-delay: 1.1s;
}
#i5 #o12 {
  -moz-transform: rotate(0deg) translatex(150px);
  -moz-animation-delay: 1.2s;
  -webkit-transform: rotate(0deg) translatex(150px);
  -webkit-animation-delay: 1.2s;
}
/* illusion 5 */
#i6 {
    background-color: #3f023e;
    height: 640px;
    margin: 0 auto;
    overflow: hidden;
    padding-left: 120px;
    position: relative;
    width: 900px;
}
#i6 .yellow {
    background-color: #b9bd04;
    background-image: -webkit-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);
    background-image: -moz-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);
    background-image: -o-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);
    background-image: radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);
}
#i6 .pink {
    background-color: #f101e8;
    background-image: -webkit-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);
    background-image: -moz-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);
    background-image: -o-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);
    background-image: radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);
}
#i6 > div {
    float: left;
    height: 320px;
    position: relative;
    width: 320px;
}
#i6 .r1 {
    height: 320px;
    position: absolute;
    width: 320px;
    -webkit-border-radius: 320px;
    -moz-border-radius: 320px;
    -ms-border-radius: 320px;
    -o-border-radius: 320px;
    border-radius: 320px;
}
#i6 .r2 {
    height: 240px;
    left: 40px;
    position: absolute;
    top: 40px;
    width: 240px;
    -webkit-border-radius: 240px;
    -moz-border-radius: 240px;
    -ms-border-radius: 240px;
    -o-border-radius: 240px;
    border-radius: 240px;
}
#i6 .r3 {
    height: 160px;
    left: 40px;
    position: absolute;
    top: 40px;
    width: 160px;
    -webkit-border-radius: 160px;
    -moz-border-radius: 160px;
    -ms-border-radius: 160px;
    -o-border-radius: 160px;
    border-radius: 160px;
}
#i6 .r4 {
    height: 80px;
    left: 40px;
    position: absolute;
    top: 40px;
    width: 80px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    -ms-border-radius: 80px;
    -o-border-radius: 80px;
    border-radius: 80px;
}

Check out the cool live DEMO and get the DOWNLOAD.

Click the image to see the full tutorial.

Incoming search terms for the article:

About the author

Marvin@Blogfreakz

Marvin@Blogfreakz

Marvin Bea is a blogger, webmaster and musician from the Philippines. His interests include arts, photography, travel, fitness and health.

Related Posts

Creating a Psychedelic Art Effect in Your Portraits

0 Comments

Inspirational Photo Retouches By Cristian Girotto

0 Comments

Create Your Own Sticker Design Via Photoshop

0 Comments

Creating The Great Gasby Art Deco Style

0 Comments