Categories
CSS Web development

CSS Animation- Hinge Effect

css hinge effect

Demo:

To create the CSS Hinge Effect Animation follow the steps below:

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

Step 1.

Add HTML

<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

Set the colour and the position of the background and elements:

body {
  height:100vh;
  display: flex;
  justify-content:center;
  align-items: center;
  background-color: #263463;
  font-size: 40px;
  overflow: hidden;
}

#text {
  position: relative;
  left:-100px;
  color: #fff;
  text-shadow: 2px 2px 4px #000000;  
}

Style the letters:

.I {
  position: absolute;
  top: 0;
  left: -100px;
  animation: hinge 2s ease;
  animation-fill-mode: forwards;  
}
  
.P {
  position: absolute;
  top: 0;
  left: -50px;
  animation: hinge 2s ease;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.W {
  position: absolute;
  top: 0;
  left: 80px;
  animation: hinge 4s ease;
  animation-fill-mode: forwards;
}

.C {
  position: absolute;
  top: 0px;
  left: 220px; 
  animation: hinge 3s ease;
  animation-fill-mode: forwards;
}

Note: I’ve added the animation hinge, and also the animation-fill-mode sets forwards which means the animation won’t be repeated.

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(500px); opacity: 0; }
}
  

Enjoy coding!

Categories
CSS Web development

CSS Train Animation

CSS Train Animation

CSS train animation

Demo:

*to see the animation on the website click here.

Follow the steps below and learn how to create the CSS train animation:

What do you need to do?

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

Step 1.

Add HTML

<div class="trainAnimation">
  <div class="content">
    <div class="buildings"></div>
    <div class="windows"></div>
    <div class="bridge"></div>
    <div class="train">
      <div class="carOne"></div>
      <div class="carTwo"></div>
      <div class="carThree"></div>
    </div>
    <div class="moon"></div>
    <div class="stars"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.trainAnimation {
  position: relative;
}

.content {
  position: relative;
  width:400px;
  height: 400px;
  background-color: #164668;
  border-radius:50%;
  overflow: hidden;
}

Add some buildings:

.buildings {
  position: relative;
  background-color: rgba(5, 51, 83);
  width: 80px;
  height: 300px;
  left:0;
  top:150px;
  box-shadow: 80px 40px rgba(5, 51, 83), 120px -30px rgba(5, 51, 83), 150px 20px rgba(5, 51, 83), 190px -10px rgba(5, 51, 83, 0.5), 30px -10px rgba(5, 51, 83,0.5), 220px 70px rgba(5, 51, 83), 280px -25px rgba(5, 51, 83, 0.5), 360px 20px rgba(5, 51, 83,0.5),270px 30px rgba(5, 51, 83), 320px 70px rgba(5, 51, 83);
}

.buildings:before {
  position: absolute;
  content:"";
  width: 10px;
  height:15px;
  background-color: rgb(252,163,17);
  left:13px;
  top:10px;
  box-shadow: 23px 0px rgb(252,163,17,0.7), 47px 0px rgb(252,163,17,0.2), 0px 30px rgb(252,163,17,0.2), 23px 30px rgb(252,163,17,0.2), 47px 30px rgb(252,163,17), 120px -30px rgb(252,163,17,0.6), 140px -30px rgb(252,163,17), 160px -30px rgb(252,163,17,0.2),120px 0px rgb(252,163,17,0.2),140px 0px rgb(252,163,17,0.2), 160px 0px rgb(252,163,17,0.2), 270px 30px rgb(252,163,17,0.2), 290px 30px rgb(252,163,17,0.2),310px 30px rgb(252,163,17,0.5);
}

.buildings:after {
  content:"";
  position: absolute;
  background-color: #041c2d;
  width: 100px;
  height:250px;
  top:90px;
  box-shadow:100px 30px #041c2d,150px -10px #041c2d, 230px 50px #041c2d, 300px -20px #041c2d;
}

.windows {
  position: absolute;
  background-color: rgb(252,163,17);
  width: 20px;
  height: 25px;
  left:310px;
  top:230px;
  box-shadow: 30px 0 rgb(252,163,17), 60px 0 rgb(252,163,170,0.3),30px 40px rgb(252,163,170,0.3), 60px 40px rgb(252,163,17), -140px 20px rgb(252,163,17), -100px 20px rgb(252,163,17,0.3), -100px 60px rgb(252,163,17),-250px 30px rgb(252,163,17,0.8),-250px 70px rgb(252,163,17,0.2),-290px 30px rgb(252,163,17,0.2);
}

.windows:before {
  content:"";
  position: absolute;
  background-color: rgb(252,163,17,0.1);
  width: 25px;
  height:7px;
  left:-73px;
  top:-80px;
  box-shadow: 50px 15px rgb(252,163,17,0.1), 125px 40px rgb(252,163,17,0.1), 125px 55px rgb(252,163,17,0.1);
}

.windows:after {
  content:"";
  position: absolute;
  background-color: rgb(252,163,17);
  width: 15px;
  height: 20px;
  top:-50px;
  left:-102px;
  box-shadow: -115px 20px rgb(252,163,17), 47px 50px rgb(252,163,17);
  animation: flash 4s ease infinite alternate;
}

Style the bridge:

.bridge {
  position: absolute;
  z-index:4;
  width:400px;
  height:5px;
  top:280px;
  border-bottom: 5px solid #333;
  border-top: 2px solid #333;
}

.bridge:after, .bridge:before {
  content:"";
  position: absolute;
  background-color: #333;
}

.bridge:before {
  width:2px;
  height:5px;
  left:60px;
  box-shadow:110px 0px #333,160px 0px #333,270px 0px #333,320px 0px #333;
}

.bridge:after {
  width:15px;
  height:150px;
  left:110px;
  box-shadow: 160px 0 #333;
}

Style the train:

.train {
  position: absolute;
  z-index:3;
  animation: move 6s linear infinite;
}

.carOne {
  position: absolute;
  width: 100px;
  height:30px;
  background-color: #9e2a2b;
  left:220px;
  top:-50px;
  border-radius: 0 30px 0 0;
  overflow:hidden;
  box-shadow: inset 0 -5px #540b0e;
}

.carOne:before {
  content:"";
  position: absolute;
  width: 40px;
  height: 15px;
  background-color: #540b0e;
  top:5px;
  left:60px;
}

.carOne:after {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width:40px;
  height:7px;
  left:10px;
  top:10px;
}

.carTwo {
  position: absolute;
  height: 30px;
  width:90px;
  background-color: #9e2a2b;
  left:125px;
  top:-50px;
  box-shadow: inset 0 -5px #540b0e;
}

.carTwo:before {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width:30px;
  height:7px;
  top:10px;
  left:10px;
  box-shadow: 40px 0px #540b0e;
}

.carTwo:after {
  position: absolute;
  content:"";
  background-color: #210405;
  border-radius:50%;
  width:10px;
  height:10px;
  top:30px;
  left:180px;
  box-shadow:-20px 0 #210405,-40px 0 #210405,-60px 0 #210405,-80px 0 #210405,-100px 0 #210405,-120px 0 #210405,-140px 0 #210405,-160px 0 #210405,-180px 0 #210405,-200px 0 #210405,-220px 0 #210405,-240px 0 #210405,-260px 0 #210405,-280px 0 #210405;
}

.carThree {
  position: absolute; 
  width: 100px;
  height:30px;
  background-color: #9e2a2b;
  border-radius: 30px 0 0 0;
  overflow:hidden;
  box-shadow: inset 0 -5px #540b0e;
  left:20px;
  top:-50px;
}

.carThree:before {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width: 40px;
  height: 15px;
  top:5px;
}

.carThree:after {
  content:"";
  position: absolute;
  background-color: #540b0e;
  width:40px;
  height:7px;
  top:10px;
  left:50px;
}

Add the moon and stars:

.moon {
  position: absolute;
  width:30px;
  height:30px;
  border-radius:50%;
  box-shadow: 5px 5px rgb(234, 226, 183);
  top:60px;
  left:200px;
}

.moon:before {
  content:"";
  position: absolute;
  background-color: rgb(234, 226, 183,0.2);
  border-radius: 50%;
  width:40px;
  height:40px;
}

.moon:after {
  content:"";
  position: absolute;
  background-color: rgb(234, 226, 183,0.1);
  border-radius: 50%;
  top:-5px;
  left:-5px;
  width:50px;
  height:50px;
}

.stars {
  position: absolute;
  background-color: #fff;
  height:1px;
  width:1px;
  top:70px;
  left:150px;
  box-shadow: -70px 30px #fff,-40px -10px #fff,-20px -20px #fff, 34px -10px #fff,50px -30px #fff, -30px 23px #fff, 95px -10px #fff, 120px -15px #fff, 140px 20px #fff, 155px 30px #fff;
}

Step 3.

Add CSS Animation

To move the train:

@keyframes move {
	from{left:-170px;}
	to{left:100%}
} 

For the windows:

@keyframes flash {
	from { opacity: 0.6; }	
	to { opacity: 0.1; }
}

To see the live output visit: lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Categories
CSS Web development

Pot of gold coins – CSS Animation

pot of gold

Demo:

*to see the animation on the website click here.

What do you need to do?

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

Step 1.

Add HTML

<div class="potOfgold">
  <div class="pot"></div>
  <div class="cloud"></div>
  <div class="coins">
    <div class="coinOne"></div>
    <div class="coinTwo"></div>
    <div class="coinThree"></div>
  </div>
  </div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height:100vh;
  display: flex;
  justify-content:center;
  align-items: center;
}

.potOfgold {
  position: relative;
  border-radius:50%;
  width: 350px;
  height: 350px;
  background-color: #90e0ef;
  overflow: hidden;
  z-index:1;
}

.potOfgold:before {
  content:"";
  position: absolute;
  background-color: #55a630;
  width:350px;
  height: 350px;
  border-radius:50%;
  top:250px;
}

.potOfgold:after {
  content:"";
  position: absolute;
  width:80px;
  height:10px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50%;
  top:265px;
  left:135px;
}
CSS St. Patrick's Pot

Style the pot:

.pot {
  position: relative;
  top:160px;
  left:120px;
  width:110px;
  height: 110px;
  background-color: #333;
  border-radius: 50%;
  z-index:3;
}

.pot:before {
  content:"";
  position: absolute;
  width:100px;
  height: 15px;
  background-color: #333;
  border-radius:10px;
  top:0;
  left:5px;
}

.pot:after {
  content:"";
  position: absolute;
  width: 10px;
  height:20px;
  border-radius:10px;
  background-color: #333;
  top:90px;
  left:20px;
  box-shadow: 60px 0 #333;
}
CSS Pot of Gold Animation

Add the cloud:

.cloud {
  position: relative;
  background-color: #fff;
  width: 70px;
  height: 35px;
  border-radius: 100px 100px 0 0;
  top:-60px;
  left:140px;
  z-index:2;
  animation: move .4s ease;
}

.cloud:before {
  content:"";
  position: absolute;
  width:50px;
  height: 25px;
  border-radius: 100px 100px 0 0;
  background-color: #fff;
  left:-40px;
  top:10px;
  box-shadow: 100px 0 #fff;
}

.cloud:after { 
  content:"";
  position: absolute;
  opacity:0;
  width:12px;
  height:5px;
  background-color: #ffbe0b;
  top:30px;
  left:5px;
  box-shadow: 12px 0 #8338ec, 24px 0 #ff006e, 36px 0 #3a86ff, 48px 0 #fb5607;
  animation: rainbow 4s ease 2s;
}
CSS Pot of Gold

Add some coins to the pot:

.coins {
  position: absolute;
  z-index:2;
}

.coinOne, .coinTwo, .coinThree {
  position: absolute;
  width: 10px;
  height: 10px;
  border:5px solid #ffc300;
  border-radius:50%;
  background-color: #ffd60a;
}

.coinOne {
  left:140px;
  top:23px;
  animation: coinbounce .5s ease infinite 3s;
}

.coinTwo {
  left:160px;
  top:20px;
  animation: coinbounce .7s ease infinite 3s;
}

.coinThree {
  left:170px;
  top:40px;
  animation: coinbounce .8s ease infinite 3s;
}

.coinOne:before, .coinOne:after, .coinTwo:before, .coinTwo:after, .coinThree:before, .coinThree:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border:5px solid #ffc300;
  border-radius:50%;
  background-color: #ffd60a;
}

.coinOne:before {
  top:10px;
  left:20px;
}

.coinOne:after {
  top:25px;
  left:40px;
}

.coinTwo:before {
  top:15px;
  left:-20px;
}

.coinTwo:after {
  left:20px;
  top:20px;
}

.coinThree:before {
  left:-30px;
  top:10px;
}

.coinThree:after {
  top:5px;
  left:15px;
}

Step 3.

Add CSS Animation

To bounce coins:

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

To make the cloud move:

@keyframes move {
  0% {transform: translateX(-200px);}
  100% {transform: translateX(0);}
}

And for the rainbow:

@keyframes rainbow {
  0% {height:0;opacity:1;}
  50% {height:150px;opacity:1;}
  100% {height:0;opacity:0;}
}

Step4.

Add jQuery

To read how to add the jQuery code to HTML click here.

setTimeout(function(){
    $(".cloud").animate({
        left: "+=300"
    })
}, 4500, "ease")

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 – the Contact Form.

You can learn how to create a contact form with CSS. 

CSS Contact Form

Example:

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:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-1">
  <form action="">
    <label for="fname">First Name</label>
    <input type="text" id="first-name" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="last-name" 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>

Step 2: Add CSS

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

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

input[type=submit] {
  background-color: #e9c46a;
  color: #333;
  font-weight: bold;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.container-1 {
  border-radius: 5px;
  background-color: #2a9d8f;
  padding: 20px;
}

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. 

How to create a Navigation Bar?

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>

</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: #264653;
}

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

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

.topnav a.active {
  background-color: #2a9d8f;
  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">
  <h3>Top Navigation Example</h3>
  <p>Some content..</p>
</div>

</body>
</html>

Output:

Top Navigation Example

Some content..


To build 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: 100px;
  background-color: #e9c46a;
}
</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>

</body>
</html>

Output:


You can create a basic vertical navigation bar with a yellow 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: #2a9d8f;
}

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

li a:hover {
  background-color: #e9c46a;
  color: white;
}
</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>

</body>
</html>

Output:


Enjoy coding!

Categories
CSS Web development

CSS Opacity / Transparency

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

CSS opacity property

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #e76f51;
  opacity: 0.5;
}
</style>
</head>
<body>


<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:

The following div element’s opacity is 0.5. Note that both the text and the background-color are affected by the opacity level:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…

When using the 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: #2a9d8f;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<p>Note: 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:

Note: 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:

opacity 0.1

opacity 0.3

opacity 0.6

opacity 1 (default)

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>

<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>
</html>

Output:

10% opacity

30% opacity

60% opacity

default

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;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/cycling-animation.jpg" alt="bike" width="170" height="100">
<img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="170" height="100">
<img src="https://lenadesign.org/wp-content/uploads/2021/02/blog-rocket.jpg" alt="computer" width="170" height="100">

</body>
</html>

Output:

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

bike cake computer

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;
}

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:

CSS opacity property

Enjoy coding!

Categories
CSS Web development

CSS Styling Links

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

*to see the code of the CSS link animation above on the website click here.

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: #2a9d8f;
}
</style>
</head>
<body>

<p><b><a href="" 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 in. The four links states are:

a: link – unvisited link.
a: visited – visited link.
a: hover – a link when the user hovers 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: #2a9d8f;
}

/* visited link */
a:visited {
  color: #264653;
}

/* hover over link */
a:hover {
  color: #f4a261;
}

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

<p><b><a href="" target="_blank">This is a link.</a></b></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: #2a9d8f;
  color: #e9c46a;
}

a: visited {
  background-color: #264653;
}

a:hover {
  background-color: #f4a261;
}

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

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


</body>
</html>

Output:

Examples of more advanced buttons: 

Example 1

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

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

<a href="" 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 #2a9d8f;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

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

<a href="" 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: 

CSS 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:

The CSS box model contains: borders, padding, margins, and content.

<!DOCTYPE html>
<html>
<head>
<style>
.box-model {
  background-color: #e9c46a;
  width: 400px;
  border: 10px solid #2a9d8f;
  padding: 20px;
  margin: 10px;
}
</style>
</head>
<body>

<div class="box-model">
    This CSS box model contains: 
    content(text),
    padding: 20px,
    margin: 10px,
    border: 10px.
   </div>

</body>
</html>

Output:

This CSS box model contains: content(text), padding: 20px, margin: 10px, border: 10px.

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>

<img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" width="350" height="263" alt="web dev">
<div>The image above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>

Output:

CSS Box model

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!

Categories
CSS HTML Web development

HTML Colors

White Colors

HTML Colors. White

Yellow Colors

HTML Colors

Orange Colors

HTML Colors

Red Colors

HTML Colors

Green Colors

HTML Colors. Green.

Cyan Colors

HTML Colors

Blue Colors

HTML Colors. Blue

Purple Colors

HTML Colors.

Pink Colors

HTML Colors. Pink.

Brown Colors

HTML Colors. Brown.

Gray Colors

HTML Colors.