» » » » "Windows 7" Effect Using HTML and CSS3

Overview

"Windows 7" Effect Using HTML and CSS3

Have you ever thought to transform an image into HTML and CSS code? Well, this article will give you an idea of ​​how to create a Windows 7 Wallpaper Effect by using HTML and CSS, without using an image.


To make it happen, we have to use some CSS3 properties. We will use the following CSS3 properties: CSS3 border-radius, CSS3 box-shadow, CSS3 transform, CSS3 transition and some CSS3 text-shadow.


Prior to the next step, it's highly recommended to understand the techniques to create 3D Bubbles using CSS3, as in this tutorial uses a similar technique.

Demo

It's Not Windows 7
"This demo built using pure HTML and CSS only"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum neque urna, pellentesque pharetra pellentesque id, sodales eget justo. Pellentesque habitant.

Generated 1 paragraph, 20 words, 161 bytes of Lorem Ipsum

HTML Code

<div class="demo-container">
 <span class="bubble1"></span>
 <span class="bubble2"></span>
 <span class="bubble3"></span>
 <span class="windows-container">
  <span class="windows-logo">
   <span class="window-red"></span>
   <span class="window-green"></span>
   <span class="window-blue"></span>
   <span class="window-yellow"></span>
  </span> 
  <span class="windows-text">
   <span class="windows-text1">It's Not</span>
   <span class="windows-text2">Windows</span>
   <span class="windows-text3">7</span>
  </span>
 </span>
 <div class="demo-content">
  <b>"This demo built using pure HTML and CSS only"</b>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum neque urna, pellentesque pharetra pellentesque id, sodales eget justo. Pellentesque habitant.</p>
  <p><b>Generated 1 paragraph, 20 words, 161 bytes of <a href="http://www.lipsum.com/" target="_blank" rel="nofollow">Lorem Ipsum</a></b></p>
 </div>
</div>

CSS Code

.demo-container {
 height:300px;
 line-height:120%;
 overflow:hidden;
 display:block;
 position:relative;
 /* CSS Gradient */
 background: rgb(255,255,255);
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMxMDlhZTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDc0Mzg5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(16,154,227,1) 63%, rgba(7,67,137,1) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(63%,rgba(16,154,227,1)), color-stop(100%,rgba(7,67,137,1)));
 background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(16,154,227,1) 63%,rgba(7,67,137,1) 100%);
 background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(16,154,227,1) 63%,rgba(7,67,137,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(16,154,227,1) 63%,rgba(7,67,137,1) 100%);
 background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(16,154,227,1) 63%,rgba(7,67,137,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#074389',GradientType=1 );
 }
.bubble1 {
 width:200%;
 height:300%;
 border-radius:50%;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 left:-110%;
 top:-110%;
 }
.bubble2 {
 width:120%;
 height:180%;
 border-radius:50%;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 left:-25%;
 top:-80%;
 }
.bubble3 {
 width:95%;
 height:300%;
 border-radius:50%;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 left:0;
 top:-150%;
 }
.bubble1, .bubble2, .bubble3 {
 position:absolute;
 display:block;
 box-shadow:0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 1px rgba(255, 255, 255, 1);
 -webkit-box-shadow:0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 1px rgba(255, 255, 255, 1);
 -moz-box-shadow:0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 1px rgba(255, 255, 255, 1);
 }
.windows-container {
 position: absolute;
 top: 30%;
 left: 30%;
 }
.windows-logo {
 height:72px;
 width:72px;
 display:block;
 position:absolute;
 top:30%;
 left:0;
 /* CSS Gradient */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
 background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 72%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(72%,rgba(255,255,255,0)));
 background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 72%);
 background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 72%);
 background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 72%);
 background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 72%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
 /* CSS Transform */
 transform: rotate(20deg);
 -ms-transform: rotate(20deg); /* IE 9 */
 -webkit-transform: rotate(20deg); /* Safari and Chrome */
 -o-transform: rotate(20deg); /* Opera */
 -moz-transform: rotate(20deg); /* Firefox */
 }
.window-red, .window-green, .window-blue, .window-yellow {
 border-radius:10px 0;
 width:30px;
 height:30px;
 display:inline-block;
 margin:0;
 /* CSS Box Shadow */
 box-shadow:0 2px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,1);
 -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,1);
 -moz-box-shadow:0 2px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,1);
 }
.window-red {
 background: rgb(206,81,39);
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjY2U1MTI3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjZmQ3NjFjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
 background: -moz-linear-gradient(-45deg,  rgba(206,81,39,1) 0%, rgba(253,118,28,1) 61%, rgba(255,255,255,1) 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(206,81,39,1)), color-stop(61%,rgba(253,118,28,1)), color-stop(100%,rgba(255,255,255,1)));
 background: -webkit-linear-gradient(-45deg,  rgba(206,81,39,1) 0%,rgba(253,118,28,1) 61%,rgba(255,255,255,1) 100%);
 background: -o-linear-gradient(-45deg,  rgba(206,81,39,1) 0%,rgba(253,118,28,1) 61%,rgba(255,255,255,1) 100%);
 background: -ms-linear-gradient(-45deg,  rgba(206,81,39,1) 0%,rgba(253,118,28,1) 61%,rgba(255,255,255,1) 100%);
 background: linear-gradient(135deg,  rgba(206,81,39,1) 0%,rgba(253,118,28,1) 61%,rgba(255,255,255,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce5127', endColorstr='#ffffff',GradientType=1 );
 } 
.window-green {
 background: rgb(255,255,255);
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzklIiBzdG9wLWNvbG9yPSIjOTZkNDI3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk2ZDQyNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
 background: -moz-linear-gradient(45deg,  rgba(255,255,255,1) 0%, rgba(150,212,39,1) 39%, rgba(150,212,39,1) 100%);
 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(39%,rgba(150,212,39,1)), color-stop(100%,rgba(150,212,39,1)));
 background: -webkit-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(150,212,39,1) 39%,rgba(150,212,39,1) 100%);
 background: -o-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(150,212,39,1) 39%,rgba(150,212,39,1) 100%);
 background: -ms-linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(150,212,39,1) 39%,rgba(150,212,39,1) 100%);
 background: linear-gradient(45deg,  rgba(255,255,255,1) 0%,rgba(150,212,39,1) 39%,rgba(150,212,39,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#96d427',GradientType=1 );
 } 
.window-blue {
 background: rgb(38,79,201);
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjY0ZmM5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNjk4ZGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
 background: -moz-linear-gradient(45deg,  rgba(38,79,201,1) 0%, rgba(105,141,255,1) 60%, rgba(255,255,255,1) 100%);
 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(38,79,201,1)), color-stop(60%,rgba(105,141,255,1)), color-stop(100%,rgba(255,255,255,1)));
 background: -webkit-linear-gradient(45deg,  rgba(38,79,201,1) 0%,rgba(105,141,255,1) 60%,rgba(255,255,255,1) 100%);
 background: -o-linear-gradient(45deg,  rgba(38,79,201,1) 0%,rgba(105,141,255,1) 60%,rgba(255,255,255,1) 100%);
 background: -ms-linear-gradient(45deg,  rgba(38,79,201,1) 0%,rgba(105,141,255,1) 60%,rgba(255,255,255,1) 100%);
 background: linear-gradient(45deg,  rgba(38,79,201,1) 0%,rgba(105,141,255,1) 60%,rgba(255,255,255,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264fc9', endColorstr='#ffffff',GradientType=1 );
 } 
.window-yellow {
 background: rgb(255,255,255);
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzklIiBzdG9wLWNvbG9yPSIjZmRkMTFhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZkZDExYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(253,209,26,1) 39%, rgba(253,209,26,1) 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(39%,rgba(253,209,26,1)), color-stop(100%,rgba(253,209,26,1)));
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(253,209,26,1) 39%,rgba(253,209,26,1) 100%);
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(253,209,26,1) 39%,rgba(253,209,26,1) 100%);
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(253,209,26,1) 39%,rgba(253,209,26,1) 100%);
 background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(253,209,26,1) 39%,rgba(253,209,26,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fdd11a',GradientType=1 );
 } 
.windows-text {
 margin: 20px 0 0 80px;
 display: block;
 }
.windows-text2 {
 font-size: 36px;
 position: absolute;
 display: block;
 margin: 5px -5px;
 font-weight: normal;
 color: #fff;
 text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
 letter-spacing: -2px;
 }
.windows-text3 {
 font-size: 77px;
 position: absolute;
 margin: 10px 0 0 125px;
 }
.demo-content {
 width:40%;
 margin: 0 10px;
 padding: 5px 10px;
 position: absolute;
 bottom: 10px;
 background: rgba(255, 255, 255, .3);
 border: 1px solid #999;
 font-size: 11px;
 opacity:0.2;
 /* CSS Border Radius */
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 /* CSS Box Shadow */
 box-shadow:inset 0 0 10px 0 rgba(255,255,255,0.5);
 -webkit-box-shadow:inset 0 0 10px 0 rgba(255,255,255,0.5);
 -moz-box-shadow:inset 0 0 10px 0 rgba(255,255,255,0.5);
 /* CSS3 Transition */  
 -webkit-transition: all .3s ease-in-out;  
 -moz-transition: all .3s ease-in-out;  
 -o-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out; 
 }
.demo-content:hover {
 opacity:1;
 cursor:default;
 }

Got something to say?

No comments:

Post a Comment