Categories
CSS HTML Web development

Working from home…with a Cat

When I am at home my cat is always next to me and he wants to do what I do. Cats are lovely creatures…

CSS Sleeping Cat

To create – Working from Home Animation..with the Cat follow the steps below:

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add HTML

<div class="container">
  <div class="laptop">
    <div class="bottom"></div>
    <div class="top"></div>
    <div class="screen"></div>
    <div class="screen1"></div>
    <div class="screen2"></div>
    <div class="deleting"><h1>Deleting...</h1></div>
    <div class="shadow"></div>
    <div class="head"></div>
    <div class="body"></div>
    <div class="paw"></div>
    <div class="paw1"></div>
    <div class="tail"></div>
    <div class="ear"></div>
    <div class="ear1"></div>
    <div class="face"></div>
    <div class="eyes"></div>
    <div class="mouth"></div>
  </div>
</div>

Step2.

Add CSS

Ste the size and the colour of the background and the container.

body {
  height:100vh;
  background-color:#4ED2BA;
}
.container {
  position: relative;
}

Style the laptop:

.laptop {
  position: relative;
  left: 40%;
  top: 350px;
}
.bottom {
  position: absolute;
  width: 400px;
  height: 30px;
  background-color: #DEDEDE;
  border-radius: 100px;
  border: 5px solid #767676;
  box-shadow:inset -55px -10px 0 rgba(0,0,0,0.07);
}
.bottom:after {
  content:"";
  position: absolute;
  width: 100px;
  height: 10px;
  background-color: #DEDEDE;
  border: 5px solid #767676;
  left: 145px;
  top:-5px;
  border-radius: 0 0 50px 50px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
}
.bottom:before {
  content:"";
  position: absolute;
  width: 200px;
  height: 30px;
  background-color: #DEDEDE;
  border-radius: 100px;
  border: 5px solid #767676;
  left: 350px;
  top:-5px;
  box-shadow:inset 15px -10px 0 rgba(0,0,0,0.07);
}
.top {
  position: absolute;
  width: 80px;
  height: 10px;
  background-color: #767676;
  border-radius: 100px;
  top: 15px;
  left: 370px;
}
.top:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 10px;
  background-color: #767676;
  border-radius: 100px;
  left: 90px;
}
.top:before {
  content:"";
  position: absolute;
  background-color: #767676;
  border-radius: 100px;
  width: 15px;
  height: 15px;
  left: 140px;
  top:-3px;
  
}
.shadow {
  position: absolute;
  width: 600px;
  height: 50px;
  background-color: black;
  border-radius: 50%;
  left:-15px;
  z-index:-1;
  top:10px;
  opacity:0.7;
  
}

.screen {
  position: absolute;
  width: 460px;
  height: 250px;
  background-color:#404040;
  top:-280px;
  z-index:-10;
  left:80px;
  border-radius: 50px;
  transform: skew(-10deg);
  border: 20px solid #DEDEDE;
  box-shadow:inset 15px -10px 0 rgba(0,0,0,0.07);
}
.screen1 {
  position: absolute;
  width: 500px;
  height: 300px;
  background-color:#767676;
  transform: skew(-10deg);
  border-radius: 50px;
  top:-280px;
  z-index:-15;
  left:85px; 
}
CSS Laptop

Add a sleeping cat:

.body {
  position: absolute;
  width: 300px;
  height: 160px;
  background-color: #F1C40F;
  border-top-left-radius: 170px;
  border-top-right-radius: 170px;
  border: 10px solid #F1C40F;
  border-bottom: 0;
  left: 30px;
  top: -170px;
  z-index:20;             
}
.head {
  position: absolute;
  width: 150px;
  height: 100px;
  background-color: #F4D03F;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  border: 10px solid #F4D03F;
  border-bottom: 0;
  left: 220px;
  top: -110px;
  z-index:21;

}
.paw {
  position: absolute;
  background-color: #F1C40F;
  width: 45px;
  height: 130px;
  border-radius: 0 0 100px 100px;
  left: 170px;
  box-shadow:inset 0px -25px 0 white;
  overflow:hidden;
  
 
}
.paw:after {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:15px;
  left: 10px;
  top:115px;
}
.paw:before {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:15px;
  left: 25px;
  top:115px;
}
.paw1 {
  position:absolute;
  border-radius:50%;
  background-color: #fff;
  width:40px;
  height:40px;
  border: 5px solid #F1C40F;
  overflow:hidden;
  left:370px;
  top:-30px;
  z-index:25;
  
}
.paw1:after {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:25px;
  left: 10px;
  top:22px;
}
.paw1:before {
  content:"";
  position: absolute;
  background-color:#613A17;
  width:5px;
  height:25px;
  left: 25px;
  top:22px;
}
.tail {
  position:absolute;
  background-color: #F1C40F;
  width: 35px;
  height: 180px;
  border-radius: 0 0 100px 100px;
  left:30px;
  top:-20px;
  transform-origin: top center;
	animation: swing 4s ease infinite;
}
.ear {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid #F4D03F;
  left: 230px;
  top:-140px;
  z-index:30;
  transform:rotate(-25deg);
}
.ear:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #F1948A;
  left: -15px;
  top:10px;
  
}
.ear1 {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid #F4D03F;
  left: 325px;
  top:-140px;
  z-index:30;
  transform:rotate(25deg);
}
  
.ear1:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 40px solid #F1948A;
  left: -15px;
  top:10px;
  
}
.face {
  position:absolute;
  width: 75px;
  height: 50px;
  background-color: #FCF3CF;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  border: 10px solid #FCF3CF;
  border-bottom: 0;
  left: 260px;
  top: -60px;
  z-index:25;
}
.face:after {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background-color:#F9E79F;
  border-radius:100px 100px 0 0;
  left:25px;
  top:-10px;
}
.face:before {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background-color:#F5B7B1;
  border-radius:0 0 100px 100px;
  left:25px;
  top:0;
}
.eyes {
  position:absolute;
  border-radius: 50%;
  box-shadow:inset 0 -5px 0 black;
  width: 30px;
  height:30px;
  left:330px;
  top:-80px;
  z-index:30;
  
}
.eyes:after {
  content:"";
  position:absolute;
  border-radius: 50%;
  box-shadow:inset 0 -5px 0 black;
  width: 30px;
  height:30px;
  left:-70px;
  top:0;
 
}
.mouth {
  position:absolute;
  z-index:30;
  border-radius:50%;
  background-color:black;
  width:20px;
  height:20px;
  top:-28px;
  left:300px;
  animation: scale 1s infinite ease-in-out alternate;
}

Add the desktop:

.screen2 {
  position: absolute;
  background-color: #FEF9E7;
  width: 150px;
  height: 10px;
  border: 5px solid black;
  border-radius:30px;
  top:-160px;
  left: 250px;
  overflow:hidden;
  transform: skew(-20deg);
}
.screen2:after {
  content:"";
  position: absolute;
  height:10px;
  width: 20px;
  left: 20px;
  background-color: #52C2D3;
  transform: skew(-20deg);
  animation: 3s move linear infinite;
}
.screen2:before {
  content:"";
  position: absolute;
  left: 80px;
  height:10px;
  width: 20px;
  background-color: #D35252;
  transform: skew(-20deg);
  animation: 3.5s move linear infinite;
}
.deleting {
  position: absolute;
  top: -240px;
  left: 250px;
  color: red;
  animation: flash 500ms ease infinite alternate;
}
CSS Sleeping Cat

Step3.

Add CSS Animation

For the sleeping cat (mouth and tail):

@keyframes scale {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

For the desktop (caption and progress bar):

@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}
 @keyframes move {  
    100% {left: -160px}
    from {left: -80px;}
     to {left: 180px;}
} 

To see the live output of the animation go to:lenastanley.com.

Enjoy coding!

Categories
CSS Web development

CSS Animation- Hinge Effect

CSS animation is a method of animation certain HTML elements without having to use the processor and memory like in the case of JavaScript.

CSS Hinge Effect

I’ll prepare some posts with simple samples of animations to show the possible ways to animate the CSS because the learning is easier when you can see live examples that I am talking about.

Let’s start today with the hinge effect.

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create the hinge animation effect with CSS follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step 1.

Add HTML

Create the HTML elements which you want to “hinge“:

<div id="text">
  <div class="I">I</div>
  <div class="P">PLAY</div>
  <div class="W">WITH</div>
  <div class="C">CODE</div>
</div>

Step 2.

Add CSS

Style the elements, starting from the background:

body {
  height: 100vh;
  background: #263463;
  font-size: 60px;
}

Set the #text position:

#text {
  position: relative;
  left: 40%;
  top: 50;
  color: #fff;
  text-shadow: 2px 2px 4px #000000;
  
}

Style the div .I:

.I {
  position: absolute;
  top: 150px;
  left: -150px;
  animation: hinge 2s ease;
  animation-fill-mode: forwards;
  
}
  
.I:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-90px;
  top: -60px;
  background-image: radial-gradient( #c3faf3 50%, #81e3d6, #31b5a3);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  
}

Note: To .I, I added the animation hinge, and the animation duration will be 2s, and also animation-fill-mode I set as forwards which means the animation won’t be repeated. The same properties I’ll add to the rest of the elements.

To read more about the CSS Animation properties click here.

.P {
  position: absolute;
  top: 200px;
  left: -50px;
  animation: hinge 2s ease;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
.P:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-30px;
  top: -60px;
  background-image: radial-gradient( #cffac3 50%, #98e084, #77e359);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  animation-delay: 2s;
  
}
.W {
  position: absolute;
  top: 150px;
  left: 150px;
  animation: hinge 4s ease;
  animation-fill-mode: forwards;
}
.W:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-20px;
  top: -60px;
  background-image: radial-gradient( #ebf0bd 50%, #e9f57f, #d3e05a);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  animation-delay: 4s;
}
.C {
  position: absolute;
  top: 200px;
  left: 350px; 
  animation: hinge 3s ease;
  animation-fill-mode: forwards;
}
.C:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  width: 200px;
  height: 200px;
  left:-20px;
  top: -60px;
  background-image: radial-gradient( #e9a4eb 50%, #e171e3, #e152e3);
  z-index:-1;
  opacity:0.7;
  animation: fade-out-down 2s ease;
  animation-delay: 2s;
   }

Note: I added the animation-delay property to animate the elements, not at the same time.

Step 3.

Add CSS Animation

The Hinge Effect:

@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }  
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
  100% { transform: translateY(700px); opacity: 0; }
}
  

The Fade-Out-Down Effect:

@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

To see the live output of the animation go to: lenastanley.com.

Enjoy coding!

Categories
CSS Web development

CSS Train Animation

Recently often I travel by train. Any minute can not be wasted so… by seating, during the travel, I created CSS Train Animation.

CSS Train
Do you like this image? Check more images in the store.

Follow the steps below and try to create your own CSS train animation.

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step 1.

Add HTML

Create the circle which we’ll put our content:

<div id="circle">
   <div id="content">

Add sky with the sun:

<div class="sky">
       <div class="sun"></div>
     </div>

Create the train with the chimney:

<div class="train">
       <div class="compartment">
         <div class="chimney">
  <div id="steam" class="steam1"></div>
  <div id="steam" class="steam2"></div>
  <div id="steam" class="steam3"></div>
  <div id="steam" class="steam4"></div>
         </div>
       </div>
          <div class="compartment1">
       </div>
     </div>

Add the bridge:

<div class="bridge">
       <div class="bridge1"></div>
       </div>

and the mountains:

<div class="mountains">
         <div class="mountain1"></div>
         <div class="mountain2"></div>
       </div>
  </div>
</div>

Step 2.

Add CSS

Set the colour and the size of the background:

body{
   background-color: #c9c9c5;
   background-size: 100vh;
}

Style the circle:

#circle {
   background-color: #c9c9c5;
   background:linear-gradient(to bottom, #d4bd9d 64%,#b35d2e 65%, #bda022);
   width:450px;
   height:450px;
   border-radius: 50%;
   margin:0 auto;
   position: relative;
   z-index: 1;
   overflow:hidden;
}
#circle #content{
   background-color:transparent;
   width:450px;
   height:450px;
   border-radius:50%;
   margin:0 auto;
   box-shadow: inset 0 0 5px gray; 
   position:relative;
}

Fill the sky by the sun:

.sun{
   background-color:yellow;
   width:48px;
   height:48px;
   z-index:2;
   border-radius:50%;
   position:absolute;
   margin-left:130px;
   margin-top:75px;
   box-shadow:0 0 5px yellow, 0 0 10px #f2b750, 0 0 90px white;
   animation: bounce alternate infinite 400ms 40ms ease-in-out;
}

Note: To the sun, I added the animation: bounce.

Style the bridge:

.bridge {
  position: absolute;
}
.bridge1 {
  position: absolute;
  background-color: #194d07;
  width: 450px;
  height: 150px;
  top: 220px;
  z-index:1;
}
.bridge1:after {
  content:"";
  position: absolute;
  background-color: #bd561e;
  width: 120px;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  top: 50px;
  left: 20px;
  z-index:2;
}
.bridge1:before {
  content:"";
  position: absolute;
  background-color: #bd561e;
  width: 120px;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  top: 50px;
  left: 240px;
  z-index:2;
}

Style the mountains:

.mountains {
  position: realative;
}
.mountain1 {
  position: absolute;
  top: 120px;
  left: -60px;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  
  
}
.mountain1:after {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: -30px;
}
.mountain1:before {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: 160px;
  
}
.mountain2 {
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: 160px;
  opacity: 0.6;
  top: 120px;
  
}
.mountain2:after {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: -220px;
  opacity: 0.6;

}
.mountain2:before {
  content:"";
  position: absolute;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #bd561e;
  left: -450px;
  opacity: 0.6;

}

and finally – style the train:

.train {
  position: relative;
  animation:speed 6s linear infinite;
}
.compartment {
  background-color: #f22f11;
  position: absolute; 
  width: 120px;
  height: 40px;
  z-index:3;
  top: 177px;
  border-radius: 20px;
  border: 2px solid black;
  left: 200px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.compartment:after {
  content:"";
  position: absolute; 
  width: 110px;
  height: 15px;
  border-radius:20px;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 3px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  
}
.compartment:before {
  content:"";
  position: absolute; 
  width: 30px;
  height: 15px;
  z-index:4;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 45px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  
}
.chimney {
  position:absolute;
  background-color: black;
  width: 20px;
  height: 10px;
  border-radius: 10px;
  top: -10px;
  left: 85px;
}
.compartment1 {
  background-color: #f22f11;
  position: absolute; 
  width: 120px;
  height: 40px;
  z-index:3;
  top: 177px;
  border-radius: 20px;
  border: 2px solid black;
  left: 75px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.compartment1:after {
  content:"";
  position: absolute; 
  width: 110px;
  height: 15px;
  border-radius:20px;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 3px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  
}
.compartment1:before {
  content:"";
  position: absolute; 
  width: 30px;
  height: 15px;
  z-index:4;
  background-color: lightblue;
  border: 2px solid black;
  top: 5px;
  left: 45px;  
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}

#steam{
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #F3F1E7;
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  top: -20px;
  left:-15px;
}
.steam1 {
  animation: steam1 2s ease-out infinite; 
}
.steam3 {
  animation: steam1 2s ease-out 1s infinite; 

Note: I added to the train and to the steam element animations –speed, steam1, and steam2.

Step 3.

Add CSS Animation

For steam:

@keyframes steam1{
  0%{
    transform: translateY(0) translateX(0) scale(0.3);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-200px) translateX(-20px) scale(1);
    opacity: 0;
  }
}
.steam2 {
  animation: steam2 1s ease-out 0.5s infinite; 
}
.steam4 {
  animation: steam2 2s ease-out 1.5s infinite; 
}
@keyframes steam2{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-150px) translateX(-30px) scale(1);
    opacity: 0;
  }
}

For train:

@keyframes speed {
	from{left:-120px;}
	to{left:130%}
}  

and for the sun:

@keyframes bounce { 
  to { transform: scaleX(1.03) scaleY(0.97); } 
}

To see the live output visit: lenastanley.com.

Enjoy coding!

Categories
CSS Web development

Pot of gold coins – CSS Animation

Have you heard the story about the Pot of Gold at the end of the rainbow? For sure – yes! So now..tell the truth 😉 did you try as a kid to find this pot?

Pot of gold
Do you like this image? Check more vector images in the store.

Unfortunately..I’ve never found it, but I created one in CSS! Follow the steps below, and create your own Pot of Gold!

What do you need to do? You need to have an image of the clover in .png format (if you don’t have, don’t worry use mine below), and:

Clover
clover.png
  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Note: To create CSS Pot of Gold Animation I used a few types of CSS animations like- spin (for a clover), swing (for a pot), and bounce (for coins, and the shadow).

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step 1.

Add HTML

<div class= "container">
  <div class="pot">
  <div class="pottop"></div>
       <div class="potbottom"></div>
  <div class="clover">
    <img src=https://lenadesign.org/wp-content/uploads/2020/03/clover.png?w=640 alt="clover">
  </div>
  </div>
  <div class="coins">
    <div class="coin1"></div>
     <div class="coin2"></div>
      <div class="coin3"></div>
       <div class="coin4"></div>
    <div class="coin5"></div>
     <div class="coin6"></div>
  </div>
    <div class="shadow"></div>
  </div>

Step 2.

Add CSS

Set the colour of the background, and objects position.

body{
  background: #57c215;
  background-image: radial-gradient(#8bd160, #79c24c, #57c215);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
St. Patrick's Day

Create the container, pot and style your image.

.container {
  position: relative; 
  margin: 0;
  padding: 0;
  }

  .pot{
    position: relative;
    animation: swing ease-in-out 1s infinite alternate;
  }
.pottop {
  position: absolute;
  background-color: #2a570e;
  width: 300px;
  height: 40px;
  border: 1px solid #2a570e;
  border-radius: 30px 30px 30px 30px;
    
}
.potbottom {
  background-color: #2a570e;
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 0 0 80px 80px;
  left: 50px;
}
.clover img {
  position: absolute;
  width:240px; 
  height:200px;
  left: 35px;
  animation: spin 8s linear infinite;
  
} 

Note: Add to the pot (swing) and the clover (spin) the animation.

St. Patrick's Day CSS Animation

Add shadow:

.shadow {
  position: absolute;
  width: 200px;
  height: 40px;
  top: 200px;
  left: 50px;
  border-radius: 50%;
  background-color: black;
  z-index:-1;
  filter: blur(1px);
  opacity: 0.5;
  animation: bounceshadow alternate infinite 400ms 40ms ease-in-out;
  
Pot of Gold Coins

Note: Add to the shadow an animation – bounce ease-in-out.

Add some coins to the pot:

.coins {
  position: absolute;
}
  .coin1 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce 2s alternate infinite ;
  z-index: -1;
  left: 45px;
}
.coin2 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce1 1.5s alternate infinite ;
  z-index: -1;
  left: 85px;  
}
.coin3 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce1 2.5s alternate infinite ;
  z-index: -1;
  left: 185px;
}
.coin4 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce 1.5s alternate infinite ;
  z-index: -1;
  left: 155px;
}
.coin5 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  animation: coinbounce 1.3s alternate infinite ;
  z-index: -1;
  left: 115px;
}
.coin6 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  z-index: -1;
  left: 115px;
}
.coin6:after {
  position: absolute;
  content:"";
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  z-index: -1;
  left: 115px;
}
.coin6:before {
  position: absolute;
  content:"";
  width: 30px;
  height: 30px;
  background-color: #f0e246;
  border-radius: 50%;
  z-index: -1;
  left: 70px;
}
  

Step 3.

Add CSS Animation

Coins – bounce animation:

@keyframes coinbounce {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-100px); }
        100% { transform: translateY(0); }
    }
@keyframes coinbounce1 {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-50px); }
        100% { transform: translateY(0); }
    }

Pot – swing:

@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

Clover – spin:

@keyframes spin {
   from{ 
   }
   to{
      transform:rotate(360deg);
   }
}

Shadow: bounce ease-in-out:

@keyframes bounceshadow { 
  to { transform: scaleX(1.03) scaleY(0.97); } 
}

To see the live output visit: lenastanley.com.

Enjoy coding!

Categories
CSS Web development

CSS Position Property

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

The position property property specifies the type of positioning method used for an element.

There are five different position values:

  1. Static
  2. Relative
  3. Fixed
  4. Absolute
  5. Sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

  1. position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is 
always positioned according to the normal flow of the page:</p>

<div class="static">
  This div element has position: static;
</div>

</body>
</html>

Output:

2. position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

Output:

3. position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

Output:

4. position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A “positioned” element is one whose position is anything except static.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

Output:

5. position: sticky;

An element with position: sticky; is positioned based on the user’s scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like position:fixed).

Hope it helps. Enjoy coding!

Categories
CSS Web development

CSS Contact Form

Today I would like to show you an example of a handy thing, which you can use on your web page – Contact Form. You can learn how to create a contact form with CSS. 

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
</head>
<body>

<h3>Contact Form</h3>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Output:

but let’s start from the beginning…

Step 1: Add HTML

Use the <form> element to process the input. Then add inputs (with a matching label) for each field:

<div class="container">
  <form action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.."style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>

Step 2: Add CSS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
</head>
<body>

<h3>Contact Form</h3>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Enjoy coding!

Categories
CSS Web development

How to create a Navigation Bar?

Having easy-to-use navigation is very important for any website. Today you can learn how to create a top navigation bar with CSS. 

With CSS you can transform boring HTML menus into good looking navigation bars. The navigation bar can be vertical, or horizontal.

With CSS you can transform boring HTML menus into good looking navigation bars. The navigation bar can be vertical, or horizontal.
A navigation bar needs standard HTML as a base. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense (you can review your knowledge about HTML list tags here.)

Step 1: Add HTML

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>

Output:

Step 2: Add CSS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

</body>

Output:

To built a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code from 1st step:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>

Output:

You can create a basic vertical navigation bar with a gray background color of the links when the user moves the mouse over them:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Output:

Enjoy coding!

Categories
CSS Web development

CSS Opacity / Transparency

The opacity CSS property sets the opacity of an element. The opacity property can take a value from 0.0 to 1.0 (default 1).

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: red;
  opacity: 0.5;
  filter: Alpha(opacity=50); /* IE8 and earlier */
}
</style>
</head>
<body>

<h1>The opacity Property</h1>

<p>The following div element's opacity is 0.5. Note that both the text and the background-color are affected by the opacity level:</p>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</div>

</body>
</html>

Output:

When using opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you don’t want to apply opacity to the child elements, use RGBA color values (more about colors in HTML/CSS you can here and here.)

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
  filter: alpha(opacity=10); /* For IE8 and earlier */
}

div.second {
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
}

div.third {
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>The opacity Property</h1>

<p>The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Output:

Example 3, with RGBA colors value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

</body>

Output:

The opacity property is often used with the : hover selector to change opacity on mouse-over:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>

Output:

To create the text in transparent box, first, create a <div> element (class=”background”) with a background image, and a border. Then we create another <div> element (class=”transbox”) inside the first <div>.  The <div class=”transbox”> have a background colour, and a border – the div is transparent. Inside the transparent <div>, we can add some text inside a <p> element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(14.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>

Output:

Enjoy coding!

Categories
CSS Web development

CSS Styling Links

How to add the link to the HTML document, you can find it in my previous posts (for example here). To improve the look of your web page you can style your links in CSS.

Links can be styled with any CSS property like color, font-family, background and etc…

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

Output:

In addition, links can be styled differently depending on what state they are. The four links states are:

a: link – unvisited link
a: visited – visited link
a: hover – a link when the user mouses over it
a: active – a link the moment it is clicked

When setting the style for several link states, there are some order rules:

a: hover MUST come after a: link and a: visited
a: active MUST come after a: hover

Example:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Output:

The background-color property can be used to specify a background color for the links. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a: visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Output:

Examples of more advanced buttons: 

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

Output:

Enjoy coding!

Categories
CSS Web development

Understanding the Box Model in CSS

The CSS box model is used to create the design and layout of websites. It consists of: margins, borders, padding, and the content itself. The CSS box model allows us to add a border around elements, and to define space between elements. The image below illustrates the box model: 

Explanations of the different parts:

Margin Area – This area consists of space between the border and the margin. The margin is transparent. 

Border Area – The border that goes around the padding and content. Its dimensions are given by the heigh and width of the border.  
Padding Area – It includes the element’s padding. The padding is transparent. 
Content Area – The content of the box, where text and images appear. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: pink;
  width: 400px;
  border: 25px solid red;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Example of CSS Box Model</h2>

<p>The CSS box model consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 25px red border. Background color is pink. </div>

</body>
</html>

Output:

Width and height in the CSS box model.

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

To calculate the full size of an element, you must also add padding, borders, and margins.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="123.gif" width="350" height="263" alt="css bubbles">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>

Output:

Calculation:

320px (width) + 20px (left and right padding) + 10 px (left and right border) + 0 px (left and right margin) = 350 px

Hope it helps, enjoy coding!