Categories
CSS JavaScript JQuery Web development

CSS & JavaScript Bee Progress Bar

bee progress bar

Demo:

To create the CSS & JavaScript Bee Progress Bar follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript/jQuery

Step1.

Add HTML

<div class="honey-bee">
  <div id="text"><h1>Honey Bee</h1></div>
  <div id="bee">
    <div class="head"></div>
    <div class="feelers"></div>
    <div class="body"></div>
    <div class="wingOne"></div>
    <div class="wingTwo"></div>
    <div class="legs"></div>
  </div>
  <div class="background">
    <div class="honey"></div>
    <div class="honey1"></div>
    <div class="honey2"></div>
  </div> 
<div id="progress">
   <div class="bar" id="bar"></div>
</div>
<button id="button" class="button" onclick="move()">Click Me</button> 
</div>

Step2.

Add CSS

Import the font:

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

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

body{
   background-color: #f6ae2d;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

.honey-bee {
  position: relative;
}

Style the progress bar and the button:

#progress {
  position: relative;
  width: 500px;
  background-color: #f26419;
  border-radius:100px;
  border: 3px solid black;
  box-shadow: inset -5px 5px rgba(0,0,0,0.07); 
  top: 0;
  left:0;
  overflow:hidden;
}

#bar {
  width: 1%;
  height: 30px;
  border-radius: 100px;
  background: repeating-linear-gradient(
  to right,
  #000,
  #000 10px,
  #ffdc00 10px,
  #ffdc00 20px   
);
  text-align: center;
  line-height: 30px;
  color: white;
}

.button {
  position: absolute;
  background-color: #fcca46;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  border-radius:100px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
  top:60px;
  left:175px;
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Style the text:

#text {
  position: absolute;
  top: -80px;
  left: 175px;
  font-family: 'Lobster', cursive;
}
Honey Bee progress bar

Add the Bee:

#bee {
  position: relative;
  left: 50px;
  top: -100px;
  z-index:100;
}

#bee:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left:-62px;
  top:53px;
}

#bee:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left:-7px;
  top:57px;
}

.head {
  position: absolute; 
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #e9c46a;
  z-index:2;
}

.head:before {
  content:"";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  left: 25px;
  top:7px;  
}

.head:after {
  content:"";
  position: absolute;
  background-color: black;
  border-radius:50%;
  width: 7px;
  height: 7px;
  top:12px;
  left:31px;
}

.feelers {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -12px;
  left: 10px;
  z-index:3;
}

.feelers:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -4px;
  left: 10px;
}

.feelers:after {
  content:"";
  position:absolute;
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background-color: black;
  left: 15px;
  box-shadow: 10px -5px black;
}

.body {
  position:absolute;
  width: 0;
  height: 0;
  border-right: 30px solid #f0efeb;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left:-90px;
  top:30px;
}

.body:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background: repeating-linear-gradient(
  to right,
  #000,
  #000 10px,
  #ffdc00 10px,
  #ffdc00 20px);
  left: 15px;
  top:-26px;  
}

.body:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left:35px;
  top:18px; 
  transform: rotate(10deg);
}

.legs {
  z-index:-1;
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left:5px;
  top:45px; 
}
.wingOne {
  position: absolute;
  background-color: #a8dadc;
  opacity: 0.7;
  width: 50px;
  height: 80px;
  border-radius: 50%;
  top:-53px;
  left:-48px;
  z-index:-4;
  transform-origin: top bottom;
	animation: fly 0.1s ease infinite;
}

.wingTwo {
  position: absolute;
  background-color: #a8dadc;
  opacity: 0.7;
  width: 50px;
  height: 80px;
  border-radius:50%;
  top:-50px;
  left:-62px;
  transform-origin: top bottom;
	animation: fly 0.1s ease infinite;
}
CSS progress bar

Make the wings move:

@keyframes fly {
	0% {
		transform:rotate(-20deg);
	}
	50% {
		transform:rotate(-40deg);
	}
}

Style the honey:

.background {
  position: absolute;
  left: 93%;
  top:-65px;
  
}

.honey {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      z-index:-10;
    }

.honey:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

.honey1 {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      left: 70px;
      top:-10px;
      z-index:-10;
      transform: rotate(40deg);
    }

.honey1:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }

.honey2 {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: #e09f3e transparent;
      left: 60px;
      top:-170px;
      z-index:-10;
      transform: rotate(-30deg);
    }

.honey2:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent #e09f3e;
    }
Progress Bar

Add CSS animation to move the Bee (we will use it later in the step3):

.moveright {
  animation: moveright 2s forwards;
}

@keyframes moveright {
  0% {left: 0;}
  100% {left: 500px;}
}

Step3.

Add JavaScript

Note: Don’t forget to add jQuery to the <head> section.

jQuery:

const dist = document.querySelector('#bee');

document.querySelector('button').addEventListener('click', () => {
  dist.classList.remove('moveright');
  setTimeout(function(){
    dist.classList.add('moveright');
  },100);
});

and JavaScript:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("bar");  
    var width = 10;
    var id = setInterval(frame, 15);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width  + "%";
        
      }
    }
  }
}

Enjoy coding!

Categories
JQuery Web development

jQuery setTimeOut method / Coffee, coffee more coffee…

CSS coffee animation

Demo:

*to see the animation on the website click here.

What do you need to do?

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

Step1.

Add HTML

<div class="container">
<div id="circle">
     <div class="mug">
       <div class="handle"></div>
       <div class="inside">
         <div class="coffee"></div>
       </div>
       <div class="drink"></div>
       <div class="drip"></div>
        <div class="drip1"></div>
        <div class="drip2"></div>
     </div>
     <div class="fill"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

.container {
  position: relative;
}

#circle {
  position: relative;
  background-color: #A1C181;
  width:450px;
  height:450px;
  border-radius: 50%;
  overflow:hidden;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

Style the mug:

.mug {
  position: absolute;
  width: 170px;
  height: 180px;
  background-color: #FCCA46;
  top: 135px;
  left:140px;  
}

.mug:after {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:-18px;
}

.mug:before {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:158px;
  box-shadow: 1px 25px 3px rgba(0,0,0,0.09);
}
.handle {
  position: absolute;
  border: 17px solid #FCCA46;
  border-radius:50%;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 25px;  
}

.inside {
  position: absolute;
  content:"";
  width: 155px;
  height: 40px;
  border-radius:50%;
  background-color: #ffe066;
  top:-13px;
  left: 7px;
  z-index:1;
  overflow: hidden; 
}
Coffee jQuery

Add Coffee and drip:

.coffee {
  position: absolute;
  width: 200px;
  left:-20px;
  height: 40px;
  border-radius:50%;
  background-color: #432818;
  top:30px;
  
}

.drip {
  position: absolute; 
  width: 5px;
  height: 5px;
  background-color: #432818;
  z-index:2;
  left:60px;
  top:20px;
  
}

.drip1 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:35px;
  top:20px;
  background-color: #432818;
}

.drip2 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:130px;
  top:20px;
  background-color: #432818;
}

.fill {
  position: absolute;
  width: 500px;
  height: 500px;
  top:450px;
  background-color: #432818;
  z-index:3;
}

.drink {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #432818;
  top:-150px;
  left: 75px;
  z-index:2;
}

Step3.

Add jQuery

setTimeout(function(){
    $(".drink").animate({
        "height": "+=275",
        top: "-=100"
    })
}, 2500, "ease")


setTimeout(function(){
    $(".coffee").animate({
        "height": "+=300",
        top: "-=100"
    })
}, 3000, "ease")

setTimeout(function(){
    $(".drip").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 4500, "ease")

setTimeout(function(){
    $(".drip1").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 5500, "ease")

setTimeout(function(){
    $(".drip2").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 6500, "ease")

setTimeout(function(){
    $(".fill").animate({
        "height": "+=500",
        top: "-=500"
    }, 5000)
}, 5500, "ease")

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Coraline/ Other Mother – Walking Animation

coraline other mother

In this animation, we can move the Other Mother to the right, or to the left side using the control buttons.

Demo:

*to see the animation on the website click here.

What do you need to do?

You need to have a walking cycle image in .png format (for the training purposes you can use mine which I drew) and follow the steps below:

CSS Walking Cycle
  1. Add HTML
  2. Add CSS
  3. Add JavaScript/jQuery

Before you start – remember to add jQuery in your head section. You can read – how to add jQuery to HTML here.

Step1.

Add HTML

Draw the container, door, other Mother and the buttons.

<div class="other-mother">
  <div class="othermother"></div>
  <div class="shadow"></div>
  <div class="door"></div>
  <div class="knob"></div>
<button id ="go"> Walk </button>
<button id ="left"> Left </button> 
<button id ="right"> Right </button> 
</div>

Step2.

Add CSS

Set the colour the position of the background and elements:

body {
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  
  overflow: hidden;
}

.other-mother {
  position: relative;
  top:-100px;
}

Style the door:

.shadow {
  position: relative;
  background-color: #eae2b7;
  width: 120px;
  height:170px;
  perspective: 100px;
}

.shadow:before {
  content:"";
  position: absolute;
  width: 370px;
  height:500px;
  background-color: #eae2b7;
  transform: rotateX(90deg) skew(55deg);
  top:115px;
  left:230px;
}

.shadow:after {
  content:"";
  position: absolute;
  background-color: #403d39;
  top:-20px;
  left:-20px;
  width: 90px;
  height: 210px;
  transform: rotateY(-30deg);
}

.door {
  position: absolute;
  width:0;
  height:0;
  border-left: 67px solid transparent;
  border-top:40px solid #eae2b7;
  top:0;
  left:0;
}

.door:before {
  content:"";
  position: absolute;
  width:200px;
  height:50px;
  background-color: #333;
  left:-100px;
  top:-90px;
}

.door:after {
  position: absolute;
  content:"";
  width:5px;
  height:181px;
  background-color: #292724;
  left:-3px;
  top:-1px;
}

.knob {
  position: absolute;
  background-color: #292724;
  width: 20px;
  height:7px;
  border-radius:10px;
  left:38px;
  top:125px;
  transform: rotate(30deg);
  box-shadow:1px 3px rgba(0,0,0,0.1);
}

.knob:before {
  content:"";
  position: absolute;
  height:5px;
  width:79px;
  background-color: #292724;
  top:-85px;
  left:-96px;
}
CSS Door

Add the Other Mother:

.othermother {
  z-index:100;
  top:45px;
  left:0;
  position: absolute;
  height: 224px;
  width: 130px; 
  background-image:url(
"https://lenadesignorg.files.wordpress.com/2020/05/1.png?w=1024"); 
}
other mother

Style the buttons:

button {
  text-align: center;
  background-color: #e5e5e5;
  border-radius:10px;
  font-size: 16px;
  color: #333;
  border: none;
  width:70px;
  transition: .2s;
  display: block;
  margin-left:200px;
  margin-top:-50px;
}

button:hover {
  background-color: #ef233c;
}

.left{
  transform: scaleX(-1); 
}

Step3.

Add JavaScript/jQuery

$(document).ready(function(){
  var leftButton = $("#left"); 
  var rightButton = $("#right"); 
  var goButton = $("#go"); 
  var walking = false; 
  var stepNum = 5; 
  var stepTimeout; 
  var divWindow = $(".othermother"); 
  var divPosition = 0; 
  var direction = 1; 
  var speed = 10; 
   
  goButton.click(function(){
    walking = (!walking) ? true : false; 
    if(walking){
      goButton.html("Stop"); 
      step();  
    } 
    else{
      goButton.html("Walk"); 
      clearTimeout(stepTimeout); 
    }
  });
  
  leftButton.click(function(){
    divWindow.addClass("left"); 
    direction = -1; 
  }); 
  
  rightButton.click(function(){
    divWindow.removeClass("left"); 
    direction = 1; 
  }); 
  
  function step(){
    divWindow.css("background-position", (-130 * stepNum) + "px"); 
    divPosition = divPosition + (direction * speed);
    divWindow.css("left", divPosition + "px"); 
    stepNum = (stepNum + 1) % 8; 
    stepTimeout = setTimeout(step, 750/speed); 
  }; 
}); 

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS & jQuery 3d Cube

3d Cube

Demo:

*the cube is gonna rotate with the move of the mouse.
*to see the CSS & jQuery 3d Cube on the website click here.

What do you need to do?

To create the CSS & jQuery rotating cube follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript/jQuery

Step1.

Add HTML

Each cube has 6 sides. We need to create them in HTML:

<div id="wrap">
    <div id="D3Cube">
        <div id="side1"></div>
        <div id="side2"></div>
        <div id="side3"></div>
        <div id="side4"></div>
        <div id="side5"></div>
        <div id="side6"></div>
    </div>
</div>

Step2.

Add CSS

body {
  background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(233,210,148,1) 100%);
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
}

#wrap {
    position:relative;
}
#D3Cube {
    position: relative;
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 250px;
    height: 250px;
    float: left;
    overflow: hidden;
    opacity: 0.8;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F9E79F;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #85C1E9;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F1948A;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #1ABC9C;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #8E44AD;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #D7DBDD;
   }

Step3.

Add JavaScript/jQuery

$(document).mousemove(function(e) {
  $('#3dCube').css('transform', 'rotateX(0deg) rotateY(0deg)');
  
  var rotate_X;
  var rotate_Y;
  var invert = false;
  
  if (invert) {
    rotate_X = e.pageX;
    rotate_Y = e.pageY;
  } else if (!invert) {
    rotate_X = e.pageX;
    rotate_Y = -e.pageY;
  }
  
  $('#D3Cube').css('transform', 'rotateX(' + rotate_Y + 'deg) rotateY(' + rotate_X + 'deg)')
});

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

CSS Perspective Property, CSS Perspective-orgin Property & 3d Cube

CSS Perspective property

Today we’ll talk about the CSS Perspective property, then we’ll go to the CSS Perspective-origin property and in the end, we’ll create the 3d cube using pure CSS.

  1. CSS Perspective property
  2. CSS Perspective-origin property
  3. 3d Cube

CSS Perspective Property

The CSS perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

CSS Syntax:

perspective: length|none;

Where:

length– how far the element is placed from the view

none– default value. Same as 0. The perspective is not set

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#square1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 5px solid red;
  perspective: 100px;  
}
#square2, #square4 {
  padding: 50px;
  position: absolute;
  border: 5px solid blue;
  background-color: lightpink; 
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  opacity:0.5; 
}
#square3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 5px solid red;
  perspective: none;
}
</style>
</head>
<body>

<h2>perspective: 100px:</h2>
<div id="square1">1
  <div id="square2">2</div>
</div>
<h2>perspective: none:</h2>
<div id="square3">3
  <div id="square4">4</div>
</div>
</body>

Output:

CSS Perspective Property

CSS Perspective-origin Property

The perspective-origin property property defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

CSS Syntax:

perspective-origin: x-axis y-axis;

Where:

x-axis – defining where the view is placed at the x-axis (left, center, right, length, %). Default value: 50%.

y-axis – defining where the view is placed at the y-axis (top, center, bottom, length, %). Default value: 50%.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#square1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 150px;
  margin-top:30px;
  border: 5px solid red;
  perspective: 100px;
  perspective-origin: right;  
}
#square2, #square4, #square6 {
  padding: 50px;
  position: absolute;
  border: 5px solid red;
  background-color: red;
  background: lightpink; 
  opacity:0.5;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}
#square3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 150px;
  margin-top:30px;
  border: 5px solid red;
  perspective: 150px;
  perspective-origin: top left;
}
#square5 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-top:30px;
  margin-left: 150px;
  border: 5px solid red;
  perspective: 100px;
  perspective-origin: -80%;  
}
</style>
</head>
<body>
<h2>perspective-origin: right:</h2>
<div id="square1">1
  <div id="square2">2</div>
</div>
<h2>perspective-origin: top left:</h2>
<div id="square3">3
  <div id="square4">4</div>
</div>
<h2>perspective-origin: -80%:</h2>
<div id="square5">5
  <div id="square6">6</div>
</div>
</body>
</html>

Output:

CSS Perspective property

3d Cube

Using all knowledge from above we can create now a 3d cube.

We can create cubes setting different perspectives.

Example1:

Perspective: 150px;

<!DOCTYPE html>
<html>
<head>
<style>

.ex1 {
  perspective: 150px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: lightpink;
  opacity:0.5;
  border: 1px solid green;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="ex1">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>

</body>
</html>

Output:

Example2:

Perspective: 800px:

<!DOCTYPE html>
<html>
<head>
<style>
.ex2 {
  perspective: 800px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: lightpink;
  opacity:0.5;
  border: 1px solid green;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="ex2">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>
</body>
</html>

Output:

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

Happy Earth Day! /lettering.js

CSS Earth Day

Demo:

To create Happy Earth Day! /lettering.js effect follow the steps below:

Step1.

Add HTML

<div class="container">
  <div class="earth">
    <div class="continent"></div>
    <div class="continent2"></div>
  </div>
  <div class="eyes"></div>  
  <div class="smile"></div>
  <div class="shadow">
    <div class="circle"><h1>Happy Earth Day!</h1></div>
  </div>
    </div>

Step2.

Add JQuery

Add first these in the <head> section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

and then a script block with the .lettering() method:

<script>
	$(function() {
        $("h1").lettering();
    });
	</script>

Note: The resulting code will churn our .h1 and output the following:

<h1>
  <span class="char1">H</span>
  <span class="char2">a</span>
  <span class="char3">p</span>
  <span class="char4">p</span>
  <span class="char5">y</span>
  <span class="char6"></span>
  <span class="char7">E</span>
  <span class="char8">a</span>
  <span class="char9">r</span>
  <span class="char10">t</span>
  <span class="char11">h</span>
  <span class="char12"></span>
  <span class="char13">D</span>
  <span class="char14">a</span>
  <span class="char15">y</span>
  <span class="char16">!</span>
</h1>

Step3.

Add CSS

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

body {
  background-color: #53CABD;
  height: 100vh;
  justify-content:center;
  align-items: center;
  display: flex;
}
.container {
  position: relative;
}

Style the Earth and add continents:

.earth {
  position: relative;
  background-color: #3498DB;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  overflow: hidden;
  left:25px;
  top: 25px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: earth alternate infinite 400ms 40ms ease-in-out;
}
.continent {
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 120px;
  height: 90px;
  border-radius: 50%; 
  left: 45px;
  
}
  
.continent:after {
  content:"";
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 80px;
  height: 110px;
  border-radius: 50%; 
  top:50px;
  left:35px;
  
}
.continent:before {
  content:"";
  position: absolute;
  display: block;
  background-color: #2ECC71;
  width: 20px;
  height: 40px;
  border-radius: 50%; 
  top:120px;
  left:115px;
  transform: rotate(40deg);
  

}
.continent2 {
  position: absolute;
  background-color: #2ECC71;
  width: 120px;
  height: 140px;
  border-radius: 50%; 
  top: 150px;
  left: 180px;
}
.continent2:after {
  content:"";
  position: absolute;
  background-color: #2ECC71;
  width: 60px;
  height: 70px;
  border-radius: 50%; 
  left:-30px;
  top:50px;
}
.continent2:before {
  content:"";
  position: absolute;
  background-color: #2ECC71;
  width: 40px;
  height: 70px;
  border-radius: 50%; 
  left:-120px;
  top:10px;
  transform: rotate(-40deg);
}
CSS Earth Animation

Make the Earth smile:

.eyes {
  position: absolute;
  display: block;
  background-color:black;
  z-index: 10;
  border-radius:50%;
  width: 30px;
  height: 30px;
  top:130px;
  left: 95px;
  box-shadow: 80px 0 black;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}
.eyes:before {
  content:"";
  position: absolute;
  background-color: white;
  width: 10px;
  height: 10px;
  border-radius:50%;
  top: 10px;
  left: 5px;
  box-shadow: 80px 0 white;
}

.smile {
  position: absolute;
  top: 160px;
  left: 130px;
  width: 40px;
  height: 20px;
  opacity:0.5;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  background:#000;
}
.smile:after {
  content:"";
  position: absolute;
  top: 8px;
  left: 5px;
  width: 80%;
  height: 70%;
  border-radius: 100px 100px 0 0;
  background: #5DADE2;
  opacity: 1;
}
CSS Smiling Earth

Add an extra background to the Earth:

.shadow {
  position: absolute;
  border-radius: 50%;
  top:-50px;
  left:-50px;
  background-color: #FCF3CF;
  width: 400px;
  height: 400px;
  z-index:-10;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
CSS Earth Day

The text is easy to manipulate in your CSS using an ordinal .char# pattern. 

.circle {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h1 span {
  font-size:33px;
  font-family: tahoma;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 35px;
  top: -65px;
  transform-origin: bottom;  
}

.char1 {
  transform: rotate(4deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}
.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

Step4.

Add CSS Animation

For the Earth’s eyes:

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 1);
    }
}

and the globe:

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

Enjoy coding!

Categories
JQuery Web development

jQuery Intro/ Adding jQuery to HTML

jQuery is a lightweight, “write less, do more”, JavaScript library.

There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and also the most extendable.

jQuery Introduction

The purpose of jQuery is to make it much easier to use JavaScript on your webpage. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

Before you start studying jQuery, you should have a basic knowledge of:

  1. HMTL
  2. CSS
  3. JavaScript

Let’s get jQuery started:

Adding jQuery to HTML

There are several ways to start using jQuery on your web site. You can:

  1. There are several ways to start using jQuery on your web site. You can:
  2. Include jQuery from a CDN, like Google

Downloading jQuery

There are two versions of jQuery available for downloading:

  1. Production version – this is for your live website because it has been minified and compressed
  2. Development version – this is for testing and development (uncompressed and readable code)

Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag.

Note: The <script> tag should be inside the <head> section.

<head>
<script src="jquery-3.4.1.min.js"></script>
</head>

jQuery CDN

If you don’t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Both Google and Microsoft host jQuery.

To use jQuery from Google or Microsoft, use one of the following:

Google CDN:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

Output:

Microsoft CDN:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

Output:

Enjoy coding!