Categories
CSS HTML JavaScript JQuery Web development

Sketchborad JavaScript

sketch board javascript

Do you like sketching? Did you know that you can sketch on Java Script canvas too?

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

What do you need to do?

To create the JavaScript sketch board you need to have the pencil cursor in .png/ SVG format (for practising you can use mine below) and follow the steps below:

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

Step1.

Add HTML

Create the canvas-wrap, add canvas and buttons.

<div id="canvas-wrap">
  <div class="sketch-board">
    <div class="paper"></div>
  </div>
  <div class="paperclip"></div>
<canvas id="canvas"></canvas>
<button class="button" id="clear">Clear</button>
<button class="button" id="undo">Undo</button>
<button class="button" id="brushBlack">Black</button>
<button class="button" id="brushYellow">Yellow</button>
<button class="button" id="brushRed">Red</button>
<button class="button" id="brushBlue">Blue</button>
<button class="button" id="brushGreen">Green</button>

</div>

Step2.

Add CSS

Set the background colour and the size:

body {
  background-color: #EFD5C3;
  height: 100vh;  
}

Add canvas-wrap:

#canvas-wrap {
  position: relative;
  left: 35%;
}

And the canvas with mouse cursor:

canvas {  
  background-color: #fff;
  cursor: url(https://lenadesignorg.files.wordpress.com/2020/06/pencil.png?w=79) 5 80, auto;
  z-index:100;
}

Style the sketchboard:

.sketch-board {
  position: absolute;
  width: 700px;
  height: 500px;
  background-color: #c19875;
  z-index:-5;
  border-radius: 30px;
  left: -80px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.sketch-board:before {
  background-color: #EFD5C3;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 30px;
  content:"";
  left: 30px;
  top: 170px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.paper {
  background-color: #e6e3dc;
  width: 500px;
  height: 350px;
  position: absolute;
  top: 90px;
  left: 120px;
}

.paperclip {
  position: absolute;
  width: 150px;
  height: 40px;
  border: 7px solid #c0c0c0;
  border-radius: 20px;
  left: 200px;
  top: 25px;
  box-shadow: 5px -5px 0 rgba(0,0,0,0.07);
  z-index:1;
}

.paperclip:after {
  position: absolute;
  content:"";
  width: 200px;
  height: 30px;
  top: -20px;
  left:-25px;
  background-color: #8b786d;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  border-radius: 20px;  
}

Style buttons:

.button {
  background-color: #00a6a6;
  border: none;
  border-radius:20px;
  color: #fff;
  padding: 7px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  top: 450px;
  left:45px;
  position: relative;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #73bfb8;
}
JavaScript drawing

Step3.

Add JavaScript/ jQuery

Note: Remember to add jQuery (code above) in the <head> section in your code.

var canvas = document.querySelector('canvas');
  canvas.style.position = 'absolute';
  canvas.style.top = "80px";
  canvas.style.left = "50px";

var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 350;

var lastX;
var lastY;
var mouseX;
var mouseY;
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isMouseDown = false;
var brushSize = 3;
var brushColor = "#000";

ctx.lineJoin = ctx.lineCap = 'round';

var points = [];


function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    ctx.beginPath();
    if (ctx.lineWidth != brushSize) {
        ctx.lineWidth = brushSize;
    }
    if (ctx.strokeStyle != brushColor) {
        ctx.strokeStyle = brushColor;
    }
    ctx.moveTo(mouseX, mouseY);
    points.push({
        x: mouseX,
        y: mouseY,
        size: brushSize,
        color: brushColor,
        mode: "begin"
    });
    lastX = mouseX;
    lastY = mouseY;
    isMouseDown = true;
}

function handleMouseUp(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    isMouseDown = false;
    points.push({
        x: mouseX,
        y: mouseY,
        size: brushSize,
        color: brushColor,
        mode: "end"
    });
}


function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    if (isMouseDown) {
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
        lastX = mouseX;
        lastY = mouseY;
       
        points.push({
            x: mouseX,
            y: mouseY,
            size: brushSize,
            color: brushColor,
            mode: "draw"
        });
    }
}

$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});


function redrawAll() {

    if (points.length == 0) {
        return;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < points.length; i++) {

        var pt = points[i];

        var begin = false;

        if (ctx.lineWidth != pt.size) {
            ctx.lineWidth = pt.size;
            begin = true;
        }
        if (ctx.strokeStyle != pt.color) {
            ctx.strokeStyle = pt.color;
            begin = true;
        }
        if (pt.mode == "begin" || begin) {
            ctx.beginPath();
            ctx.moveTo(pt.x, pt.y);
        }
        ctx.lineTo(pt.x, pt.y);
        if (pt.mode == "end" || (i == points.length - 1)) {
            ctx.stroke();
        }
    }
    ctx.stroke();
}

function undoLast() {
    points.pop();
    redrawAll();
}

$("#brushGreen").click(function () {
    brushColor = "#89bd9e";
});
$("#brushYellow").click(function () {
    brushColor = "#fde74c";
});
$("#brushRed").click(function () {
    brushColor = "#e55934";
});
$("#brushBlue").click(function () {
    brushColor = "#5bc0eb";
});

$("#brushBlack").click(function () {
    brushColor = "#000";
});

var interval;
$("#undo").mousedown(function () {
    interval = setInterval(undoLast, 20);
}).mouseup(function () {
    clearInterval(interval);
});

var clear = function(){
  ctx.clearRect(0,0,500,350);
};

$('#clear').on("click",clear);

To see the live output of the animation go to my Codepen.

Enjoy coding!

Categories
CSS HTML JavaScript Web development

Roll the dice!

We know now how to toss a coin using JavaScript, so why not to try a roll the dice too?

CSS Dice 3d

Try to roll double six!

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

To create the Dice game follow the steps below:

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

Step1.

Add HTML

Create the Game container and another one for dice, and dots.

Note: to creating the dice you need to know how to create 3d cube. If you need more information about 3d cube and CSS perspective check the tutorial CSS Perspective Property, CSS Perspective-origin Property and 3d Cube.

 <div class="game">
    <div class="container">
      <div id='dice1' class="dice dice-one">
        <div id="dice-one-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-one-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-one-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-one-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-one-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-one-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div>
   </div>
    <div class="container">
      <div id='dice2' class="dice dice-two">
        <div id="dice-two-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-two-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-two-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-two-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-two-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-two-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div> 
   </div>
   <div id='roll' class='roll-button'><button>Roll dice!</button></div>
  </div> 

Step2.

Add CSS

Set the colour of the background, and the position of the elements.

body {
  background-color: #6a994e;
  perspective: 900px; 
  height: 100vh;
 }

.game {
  position: relative;
  width: 100%;
  height: 50%; 
}

.container {
  position: relative;
  display: inline-block;
  left:40%;
  top: 200px;

}

Style the button:

.roll-button {
  margin-left: 15px; }

button {
  position: absolute;
  left:55%;
  top:-350px;
  padding: 15px 50px;
  color: #fff;
  background-color: #f4d35e;
  border: none;
  font-size: 20px;
  border-radius: 20px; 
  box-shadow: 1px 3px #50514F;
  outline: none;
  transition: .3s; }

button:hover, button:active {
  outline: none;
  background: #50514F;
  cursor: pointer;
  margin-top: 15px; }

Add dice and dots:

.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1s; }

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 5px 5px -10px;
  border-radius: 20px;
  background-color: #ef233c;
  box-shadow: inset 2px 2px #d90429;}

.dice-one {
  left: 450px; }

.dice-two {
  left: 300px;
  top:-200px;
}

.side {
  position: absolute;
  background-color: #ffF;
  border-radius:5px;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 2em;
}

.side:nth-child(1) {
  transform: translateZ(3.1em); }

.side:nth-child(6) {
  transform: rotateY(90deg) translateZ(3.1em); }

.side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(3.1em); }

.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(3.1em); }

.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(3.1em); }

.side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(3.1em); }

.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%; }

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; }

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%; }

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; }

.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%; }

.six-2 {
  top: 50%;
  left: 20%; }

.six-5 {
  top: 50%;
  left: 80%; 
}
3d roll dice javascript

Add .show elements which will spin the dice:

.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); }

.show-6 {
  transform: rotateX(-900deg) rotateZ(1080deg); }

.show-3 {
  transform: rotateY(-450deg) rotateZ(-1440deg); }

.show-4 {
  transform: rotateY(810deg) rotateZ(720deg); }

.show-5 {
  transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-2 {
  transform: rotateX(450deg) rotateZ(-720deg); }

Step3.

Add JavaScript

Note: To generate a random number of the dice dots we need to use Math.floor(Math.random() * 6) + 1;
If Math.random() were to roll 0.9, we take that and multiply it by 6 which gives us 5.4. Then we take the floor of that which is 5. Then we add 1 which gives us a final result of 6. So the random numbers will only be between 1 and 6.

var elDiceOne       = document.getElementById('dice1');
var elDiceTwo       = document.getElementById('dice2');
var elComeOut       = document.getElementById('roll');

elComeOut.onclick   = function () {rollDice();};

function rollDice() {

  var diceOne   = Math.floor((Math.random() * 6) + 1);
  var diceTwo   = Math.floor((Math.random() * 6) + 1);
 
  console.log(diceOne + ' ' + diceTwo);

  for (var i = 1; i <= 6; i++) {
    elDiceOne.classList.remove('show-' + i);
    if (diceOne === i) {
      elDiceOne.classList.add('show-' + i);
    }
  }

  for (var k = 1; k <= 6; k++) {
    elDiceTwo.classList.remove('show-' + k);
    if (diceTwo === k) {
      elDiceTwo.classList.add('show-' + k);
    }
  } 
  setTimeout(rollDice(), 1000);
}

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

Enjoy coding!

Categories
CSS HTML Web development

CSS Windsurfing

I love water sports – can’t wait to Windsurf again!

CSS Windsurfing Animation

Thinking about the wind and the waves I created the Windsurfing animation using just pure CSS.

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

To create the animation you’ll need 2 images of the waves in .png format. For your training, you can use mine pictures below which I created in Adobe Photoshop, and then follow the steps below:

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

Step1.

Add HTML

<div class="container">
  <div class="windserfing">
    <div class="sail">
      <div class="boom"></div>
      <div class="mast"></div>
    </div>
    <div class="board"></div>
    <div class="surfer">
      <div class="head"></div>
      <div class="hair"></div>
      <div class="sunglasses"></div>
      <div class="top"></div>
      <div class="shorts"></div>
      <div class="leg"></div>
      <div class="leg2"></div>
      <div class="arm"></div>
      <div class="arm2"></div>
    </div>
    </div>
   <div class="wave1"></div>
   <div class="wave2"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background, container:

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

Style the Sail:

.windsurfing {
  position:relative; 
  animation: surf 2s ease infinite;
}

.sail{
  position: relative;
  width: 0;
  height: 0;
  border-top: 280px solid transparent;
  border-right: 110px solid rgba(237, 246, 125, 0.95);
  border-bottom: 50px solid transparent;
  transform-style: preserve-3d;
  left:30px;
  top:-40px;
  z-index:5;
}
.sail:before {
  position: absolute;
  content:"";
  width:65px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:-130px;
  left:50px;
  transform: rotate(25deg);
}
.sail:after {
  position: absolute;
  content:"";
  width:123px;
  height:5px;
  background-color: #F896D8;
  border-radius:100px;
  top:20px;
  left:-7px;
  transform: rotate(25deg);
}

.boom {
  width: 145px;
  height: 150px;
  border: solid 10px black;
  border-radius: 50%;
  top: -125px; 
  left: -20px; 
  position: absolute;
  transform: rotate3d(0.4, 0.2, 0, 75deg); 
  box-sizing: border-box;
}
.mast {
  position: absolute;
  width:5px;
  height:360px;
  background-color: black;
  left:110px;
  top:-280px;
  border-radius:100px;
  z-index:1;
}
.mast:before {
  position: absolute;
  content:"";
  background-color:black;
  width:25px;
  height:10px;
  top:350px;
  left:-10px;
  border-radius:30px 30px 0 0;
}
CSS Sail

Style the Board:

.board {
  width:300px;
  height: 50px;
  position:absolute;
  background-color: #724CF9;
  border-radius:50%;
  left:-60px;
  top:300px;
  box-shadow: inset 15px -10px 0 #564592;
}
.board:after {
  content:"";
  position: absolute;
  border-radius:0 0 100% 50%;
  width:20px;
  height:40px;
  background-color: #564592;
  left:40px;
  top:40px;
  transform: skew(-25deg);
}
CSS Windsurfing

Add the Windsurfer:

.surfer {
  position:absolute;
  top:0;
  left:0;
}
.head {
  position:absolute;
  background-color: #ffcb69;
  border-radius:50%; 
  width:45px;
  height:50px;
  top:110px;
  left:-55px;
  box-shadow: inset 3px 8px 0 black;
}
.head:before {
  position:absolute;
  content:"";
  width:15px;
  height:15px;
  background-color: #ffcb69;
  left:35px;
  top:20px;
  border-radius: 0 40px;
  
}
.head:after {
  content:"";
  position: absolute;
  border-radius:50%;
  box-shadow: inset 2px 2px 0 black;
  width:15px;
  height:15px;
  top:15px;
  left:10px;
}

.sunglasses {
  position: absolute;
  width: 8px;
  height:15px;
  border-radius:50%;
  background-color: brown;
  top:120px;
  z-index:5; 
  left:-15px;
  box-shadow: inset 2px 2px 0 black;
  
}
.sunglasses:before {
  content:"";
  position:absolute;
  width:25px;
  height:3px;
  background-color:black;
  top:5px;
  left:-22px;
}

.sunglasses:after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background-color:black;
  border-radius:50%;
  top:-10px;
  left:-5px;
}

.top {
  position:absolute;
  width:20px;
  height:50px;
  border-top: 25px solid #41ead4;
  border-left: 35px solid #41ead4;
  border-bottom: 30px solid transparent;
  border-right: 20px solid transparent;
  border-radius:50%;
  top:150px;
  left:-70px;
}

.shorts {
  z-index:5;
  position:absolute;
  width:45px;
  height:40px;
  background-color: #CC444B;
  top:225px;
  left:-60px;
  transform: skew(10deg) rotate(-40deg);
  border-radius: 30px 0 0 0;
}
.shorts:before {
  content:"";
  position:absolute;
  width:36px;
  height:40px;
  background-color: #DA5552;
  top:7px;
  left:8px;
  border-radius: 30px 0 0 0;
  transform: skew(5deg) rotate(-30deg);
}

.shorts:after {
  content:"";
  position: absolute;
  width:38px;
  height:10px;
  left:10px;
  background-color: #CC444B;
}

.leg {
  position:absolute;
  width:5px;
  height:70px;
  background-color: #ffcb69;
  top:250px;
  left:5px;
  transform: rotate(-35deg);
}

.leg:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
}

.leg2 {
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:40px;
  top:250px;
  left:-31px;
  transform: rotate(-35deg);
}

.leg2:before {
  content:"";
  position: absolute; 
  width:5px;
  height:40px;
  background-color: #ffcb69;
  transform: rotate(35deg);
  top:35px;
  left:-11px;
}

.leg2:after {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:30px;
  height:10px;
  border-radius: 0 30px 0 0;
  top:70px;
  left:-22px;
}

.arm { 
  position: absolute; 
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:168px;
  left:-5px;
  transform: rotate(-45deg);
  z-index:-1;
}
.arm:before {
  content:"";
  position:absolute;
  background-color: #ffcb69;
  width:5px;
  height:35px;
  top:5px;
  left:11px;
  transform: rotate(45deg);
}

.arm:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:2px;
  left:25px;
  border-radius: 0 30px 30px 30px;
}

.arm2 {
  position:absolute;
  background-color: #ffcb69;
  width:35px;
  height:5px;
  top:155px;
  left:-21px;
  z-index:-1;
  
}
.arm2:after {
  content:"";
  position: absolute;
  background-color: #ffcb69;
  width:15px;
  height:15px;
  transform: rotate(-45deg);
  top:-7px;
  left:40px;
  border-radius: 0 30px 30px 30px;
}

.hair {
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:15px;
  height:15px;
  top:97px;
  left:-40px;
}
.hair:before {
  content:"";
  position:absolute;
  background-color: black;
  border-radius:50%;
  width:12px;
  height:12px;
  left:12px;
  top:6px;
}

and add the Waves:

.wave1, .wave2 {
  height: 300px;
  position: absolute;
  width: 1000px;
  z-index: 99;
  left: -400px;
  top:280px;
  opacity:0.6;
}

.wave1 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe3-1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 8.7s infinite linear; 
  -moz-animation:    wave-animation1 8.7s infinite linear; 
  -o-animation:      wave-animation1 8.7s infinite linear; 
   animation:        wave-animation1 8.7s infinite linear; 
}

.wave2 {
  background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe1.png?w=1024') repeat-x;
  -webkit-animation: wave-animation1 6.3s infinite linear;
  -moz-animation:    wave-animation1 6.3s infinite linear; 
  -o-animation:      wave-animation1 6.3s infinite linear; 
  animation:         wave-animation1 6.3s infinite linear; 
}
CSS Waves

Step3.

Add CSS Animation

To Surf:

@keyframes surf {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px) rotate(-7deg);}
	60% {transform: translateY(-15px) rotate(3deg);}
}

and for the Waves:

@-webkit-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-moz-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@-o-keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% { background-position: 1601px 0; }
}
@keyframes wave-animation1 {
  0%   { background-position: 0 0; }
  100% {background-position: 1601px 0;}
}

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

Enjoy coding!

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 HTML Web development

Thinking about traveling? CSS Plane Animation

Paper plane gif

Thinking about travelling? Me…yes. Unfortunately, we need to wait to travel again.

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

To create CSS Plane Animation follow the steps below:

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

Step1.

Add HTML

<div class="container">
  <div class="clouds">
    <div class="cloud"></div>
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  <div class="plane">
    <div class="body">
      <div class="pollution"></div>
      </div>
    <div class="window">
      <div class="window1"></div>
  </div>
</div>
  <div class="mountains">
    <div class="mountain1"></div>
    <div class="mountain2"></div>
    <div class="mountain3"></div>
    <div class="mountain4"></div>
    <div class="mountain5"></div>
    <div class="mountain6"></div>
    <div class="mountain7"></div>
    <div class="mountain8"></div>
  </div>
</div> 

Step2.

Add CSS

Set the colour of the background:

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

Style the container and the plane:

.container {
  position: relative;
  
}
.plane {
  position: relative;
  left: 40%;
  top: 200px;
  animation: move 9s linear infinite;
}
.body {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height: 50px;
  border-radius: 20px 50px 50px 50px;
  box-shadow:inset -15px -15px 1px #157ea1;
}
.body:after {
  content:"";
  position: absolute;
  width: 60px;
  height: 150px;
  border-radius: 30px 30px 30px 30px;
  background-color: #fff;
  transform: skew(50deg);
  border-racius: 30px;
  top:-50px;
  left: 110px;
  
}
.body:before {
  position: absolute;
  content:"";
  background-color:#fff;
  width: 25px;
  height: 40px;
  top:-20px;
  left: 0;
  border-radius: 20px;
  
}

.window {
  position: absolute;
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  top: 5px;
  left: 170px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window:after {
  position: absolute; 
  content:"";
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -50px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.window:before {
  content:"";
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -95px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1 {
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -140px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1:after { 
  content:"";
  position: absolute;
  background-color: #3bbfeb;
  width: 25px;
  height: 20px;
  border: 4px solid #d2d5d6;
  left: 180px;
  top: -5px;
  transform:skew(20deg); 
  border-radius: 20px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
 }

Add coluds:

.clouds {
  position: absolute;
  left: 175px;
}
 .cloud {
  position: absolute;
  top: 120px;
  left: 200px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud1 {
  position: absolute;
  top: 200px;
  left: 300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud1::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }
.cloud2 {
  position: absolute;
  top: 120px;
  left: 1000px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud2::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud3 {
  position: absolute;
  top: 200px;
  left: 1300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud3::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }

Add mountains:

.mountains {
  position: absolute;
}
.mountain1 {
  position: absolute;
  left: 90px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain1:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain1:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain2 {
  position: absolute;
  top: 350px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain2:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain2:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain3 {
  position: absolute;
  left: 490px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain3:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain3:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain4 {
  position: absolute;
  top: 350px;
  left: 650px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain4:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain4:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain5 {
  position: absolute;
  left: 790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain5:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain5:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain6 {
  position: absolute;
  top: 350px;
  left: 1250px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain6:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain6:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain7 {
  position: absolute;
  left: 1790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain7:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain7:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain8 {
  position: absolute;
  top: 350px;
  left: 1550px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain8:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain8:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}

Airplane pollution:

.pollution {
  position: absolute;
  background-color: #fff;
  top: 30px;
  left: -55px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 1s linear infinite;
  z-index:4; 
}
.pollution:after {
  content:"";
  position: absolute;
  background-color: #fff;
  top: 10px;
  left: -65px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 2s linear infinite;
  z-index:4; 
}
.pollution:before {
  content:"";
  position: absolute;
  background-color: #fff;
  top: -15px;
  left: -85px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 3s linear infinite;
  z-index:4; 
}

Step3.

Add CSS Animation

To make the plane move:

@keyframes move{  
  from{ 
    left:-200px; 
  }
  to{ 
    left:130%; 
  }
}

For clouds:

@keyframes cloud {
  100% {
    transform: translateX(95px);
  }
}

For airplane pollution:

@keyframes steam { 
    20% {opacity: 0.6;}
    35% {left: 100px opacity: 0.6;}
    70% {left: 70px  opacity: 0;} 
  }

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

Enjoy coding!

Categories
CSS HTML Web development

CSS Background Change Animation – Day & Night

CSS Night & Day

Hello! To change the element/ background colour we can use the CSS Animation.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: example;
  animation-duration: 5s;
  border-radius: 50%;
}

@keyframes example {
  0%   {background-color: green;}
  25%  {background-color: blue;}
  50%  {background-color: yellow;}
  100% {background-color: red;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Output:

Now when you know the base of the background change animation we can go further.

In the animation below I used exactly the same rule of the changing background.

*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.

Step1.

Add HTML

<div class="container">
  <div class="window">
    <div class="frame"></div>
    <div class="windowsill"></div>
    <div class="holder"></div>
    <div class="curtain"></div>
  </div>
  <div class="cat">
    <div class="tail"></div>
    <div class="ears"></div>
  </div>
  <div class="sun"></div>
  <div class="moon"></div>
  </div>

Step2.

Add CSS

Set the size and the color of the background:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #53CABD;
  animation: background 10s linear infinite alternate;
}

Set the position of the container and the window:

.container {
  top:-200px;
  left:-150px;
  position: relative;
}
.window {
  position: relative;
}

Style the frame, window sill, and curtains:

.frame {
  position: absolute; 
  width: 450px;
  height: 250px;
  background-color: #41BEDD;
  border: 10px solid #311C1C;
  border-radius: 5px;
  box-shadow:inset -15px -15px 0 rgba(0,0,0,0.07);
  left:-80px;
  animation: frame 10s linear infinite alternate;
  
}
.frame:after {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -50px;
  left: 515px;
}
.windowsill {
  position: absolute;
  width: 580px;
  height: 30px;
  background-color: #311C1C;
  top: 265px;
  left:-125px;
  border-radius: 50px;
  box-shadow: 15px 15px rgba(0,0,0,0.07);
  
}
.windowsill:after {
  content:"";
  position: absolute;
  width: 600px;
  height: 10px;
  background-color: #BDBDBD;
  top:-300px;
  left: -20px;
  
}
.windowsill:before {
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #BDBDBD;
  top: -305px;
  left: -35px;
  
}
.holder {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-right: 200px solid transparent;
  left: -120px;
  top:-25px;

}
.holder:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-right: 50px solid transparent;
}
.holder:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-5px;
  top:-5px;
}
.curtain {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 300px solid #962c48;
  border-left: 200px solid transparent;
  top:-25px;
  left:240px;
}
.curtain:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid #962c48;
  border-left: 50px solid transparent;
  left:-50px;
}
.curtain:before {
  content:"";
  position: absolute;
  background-color: #962c48;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  left:-10px;
  top:-5px;
}

Style a cat:

.cat {
  position: absolute;
  z-index:10;
}
.tail {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius:50%;
  box-shadow:inset 10px -5px 0 black;
  top: 210px;
  left:80px;
  transform: rotate(5deg);
}
.tail:after {
  content:"";
  position: absolute;
  background-color: black;
  width: 70px;
  height: 80px;
  top: -20px;
  left:20px;
  border-radius:50%;
  box-shadow: 10px -15px 0 rgba(0,0,0,0.07);
}
.tail:before {
  content:"";
  position: absolute;
  background-color: black;
  box-shadow: 5px -15px 0 rgba(0,0,0,0.07);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top:-50px;
  left: 30px;
}
.ears {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:152px;
  left:145px;
  transform: rotate(20deg);
  
}
.ears:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black; 
  top:12px;
  left:-40px;
  transform: rotate(-40deg);
}

Add Sun and Moon:

.sun {
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation: sun 10s alternate infinite;
  
}
.sun:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  
}
.sun:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
}
.moon {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height:50px;
  left:130px;  
  top: 70px;
  box-shadow:inset -15px -15px 0 #c7ebde;
  animation: fade-in 10s infinite alternate;
}
.moon:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 100px;
  height:100px;
  opacity:0.5;
  top: -23px;
  left:-25px;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
  
}
.moon:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #ceede2;
  width: 150px;
  height:150px;
  opacity:0.3;
  box-shadow: 0px 1px 30px 0px rgba(255, 255, 255, 1);
  left:-50px;
  top:-50px;
  animation-delay: 10s;
  animation: moon 10s alternate infinite;
}

Step3.

Add CSS Animation

For the background:

@keyframes background {
  0% {
    background: #53CABD;
  }
  100% {
    background: rgba(3, 43, 62, .94);
  }
}

For the window:

@keyframes frame {
  0% {
    background: #41BEDD;
  }
  100% {
    background: #23355e;
  }
}

For Sun:

@keyframes sun {
  0 {transform: scale(0.8) rotate(360deg);opacity:1;}
  50% {opacity:1;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0;}
}

and for the Moon:

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
    50% {
    opacity: 0.3;
    transform: translateY(0);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes moon {
  0 {transform: scale(0.3) rotate(360deg);opacity:0;}
  50% {opacity:0.2;}
  100% {transform: scale(1.1) rotate(360deg);opacity:0.1;}
}

To see the live output of the animation visit lenastanley.com.

Enjoy coding!

Categories
HTML Web development

HTML SVG

The HTML <svg> tag is a container for SVG graphics. HTML <svg> is used to define graphics for the Web. SVG stands for Scalable Vector Graphics

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Example1 – draw a circle:

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200">
  <circle cx="100" cy="100" r="60"
  stroke="blue" stroke-width="4" fill="red" />
</svg>
 
</body>
</html>

Output:

Example2 – rectangle and rounded rectangle.

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</br>
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>
 
</body>
</html>

Output:

Example3 – draw a star.

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:yellow;stroke:black;stroke-width:5;fill-rule:evenodd;" />
</svg>
 
</body>
</html>

Output:

Example4 – SVG Logo

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="purple" font-size="45" font-family="Verdana"
  x="50" y="86">Logo</text>
</svg>

</body>
</html>

Output:

Differences Between SVG and Canvas:

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Note: Before you start to learn SVG you should have some basic understanding of the following: HTML and XML.

Enjoy coding!

Categories
HTML JavaScript Web development

HTML Canvas

If you want to start to learn JavaScript you need to know what is the HTML . The HTML <canvas> tag is used draw graphics on the website.

The HTML <canvas> tag is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas Examples:

Example1

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;">
</canvas>

</body>
</html>

Output:

Example2 – draw a line:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:2px solid black;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Output:

Example3 – draw a circle:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

Output:

Example4 – draw a text:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="250" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hava a good day!",10,50);
</script>

</body>
</html>

Output:

Example5 – draw linear gradient:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"lightblue");
grd.addColorStop(1,"grey");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Output:

Example6 – draw an image:

<body>
<p>Image to use:</p>
<img id="dance" src="dance.jpg" alt="Dancer" width="320" height="240">

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="640" height="480"
style="border:1px solid #d3d3d3;"></canvas>

<p><button onclick="myCanvas()">Click here</button></p>

<script>
function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("dance");
  ctx.drawImage(img,10,10);
}
</script>
</body>

Output:

Enjoy coding!

Categories
HTML Web development

HTML id

In one of the previous posts, we were talking about the HTML class attribute which defines equal styles of elements, today we’ll focus on the second very important attribute which defines HTML element – HTML id.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).The id attribute can be used on any HTML element.

The id value can be used by CSS and JavaScript to perform certain tasks for the element with the specific id value.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#header {
  background-color: pink;
  color: white;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h1 id="header">Header</h1>

</body>
</html>

Output:

Difference Between Class and ID:

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#header {
  background-color: pink;
  color: white;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: green;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h2>Difference Between Class and ID</h2>

<!-- A unique element -->
<h1 id="header">The Capitals</h1>

<!-- Multiple similar elements -->
<h2 class="city">Brussels</h2>
<p>Brussels is the capital of Belgium.</p>

<h2 class="city">Madrid</h2>
<p>Madrid is the capital of Spain.</p>

<h2 class="city">Lisbon</h2>
<p>Lisbon is the capital of Portugal.</p>

</body>
</html>

Output:

Using The id Attribute in JavaScript:

JavaScript can access an element with a specified id by using the getElementById method (you can ready more about this method here):

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("header").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

Output:

Enjoy coding!

Categories
CSS HTML Web development

CSS Coffee To Go

Monday without Coffee? I can’t imagine it! Today I created in CSS Cup of Coffee to Go. To learn how to create Coffee To Go follow this tutorial step by step and watch the video tutorial.

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

What do you need to do?

  1. Add HTML
  2. Add CSS

Step 1.

Add HTML

<div class="coffeetogo">
   <div class="left"></div>
   <div class="right"></div>
   <div class="middle-section"> 
      <div class="logo"></div>
   </div> 
</div>

Step 2.

Add CSS

Set up the color of the background.

body {
  background: #B0C4DE;
}

Now, we’ll style a coffee cup.

.coffeetogo{
  top: 60px;
  left: 60px;
  width: 220px;
  height: 290px;
  position: relative;
  background: #800000;
  box-shadow: inset 0px 0px 15px 0px
}

.coffeetogo:before{
   content: '';
   position: absolute;
   top: -35px;
   left: 50%;
   transform: translateX(-50%);
   background: white;
   width: 250px;
   height: 35px;    
   border-radius: 20px;
   box-shadow: inset 0px 0px 15px 0px
   
}

.coffeetogo:after{
   content: '';
   position: absolute;
   background: white;
   top: -50px;
   left: 20%;
   transform: translateX(-50%);
   width: 50px;
   height: 15px; 
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   box-shadow: inset 0px 0px 15px 0px
}

Our coffee cup should look like that now:

Let’s give the cup the shape:

.left{
    position: absolute;  
    left: 0;
    border-style: solid;
    border-width: 300px 0 0 40px;
    border-color: transparent transparent transparent #B0C4DE;
    z-index: 999;
}

.right{
    position: absolute;
    right: 0; 
    border-style: solid;
    border-width: 0 0 300px 40px;
    border-color: transparent transparent #B0C4DE transparent;
    z-index: 999;
 
}

The cup is more looking like a cup now ;).

Add the logo.

.middle-section{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background: #8D7147; 
    width: 100%;
    height: 170px;
    box-shadow: inset 0px 0px 5px 0px
}

.logo {
      top:35px;
      left: 57px;
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #3A2306;
      border-color: #241508;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
      box-shadow: inset 0px 0px 15px 0px
    }
    .logo:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #3A2306;
      border: 18px solid #3A2306;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
      
    }
   .logo:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: #241508;
      border: 18px solid #241508;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
      
    }

The Coffee to go is ready!

To see the live output visit: lenastanley.com.

Watch also video tutorial:

Enjoy coding!