Tag: #webdeveloper

Categories
Web development

CSS Scarecrow

CSS scarecrow

Demo:

*to see the CSS Scarecrow on the website click here.

To create the CSS Scarecrow follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div id="scare-crow">
<div class="circle">
  <div class="scarecrow">
    <div class="head"></div>
    <div class="hat"></div>
    <div class="eyes"></div>
    <div class="smile"></div>
    <div class="jumper"></div>
    <div class="patch"></div>
    <div class="stick"></div>
    <div class="straw"></div> 
  </div>
  </div>
</div>

Step2.

Add CSS

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

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

#scare-crow {
  position: relative;
}

.circle {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #db995a;
  box-shadow: 10px 5px 1px rgba(0,0,0,0.07);
}

.circle:before {
  content:"";
  background-color: #2a3c24;
  width: 400px;
  height:200px;
  border-radius:50%;
  top:250px;
  position:absolute;
  left:0;
}

.circle:after {
  content:"";
  position: absolute; 
  background-color: #f4ae4a;
  width: 120px;
  height: 30px;
  border-radius: 100px;
  left: 270px;
  top: 80px;
  box-shadow: -50px 30px #db995a, 20px 30px #f4ae4a, -60px 60px #f4ae4a, 30px 60px #f4ae4a, -80px 90px #db995a, 80px 90px #db995a, 10px 90px #f4ae4a, -2px 120px #f4ae4a,-280px 30px #f4ae4a, -245px 60px #db995a, -280px 60px #f4ae4a,-300px 90px #f4ae4a;
}
CSS Scarecrow

Style the Scarecrow:

.scarecrow {
  position: absolute;
}

.head {
  position: absolute; 
  background-color: #ff6d00;
  width: 60px;
  height:90px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  z-index:5;
}

.head:before {
  content:"";
  position: absolute;
  background-color: #ff6d00;
  width: 60px;
  height:90px;
  left:50px;
  top:0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: inset -10px 5px 0 rgba(0,0,0,0.07);
  
}

.head:after {
  content:"";
  position: absolute;
  width: 60px;
  height:90px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background-color: #ff8500;
  left:25px;
}

.hat {
  width: 130px;
  height: 60px;
  border-radius:50%;
  position: absolute;
  background-color: #ad5015;
  top:85px;
  left: 135px;
  box-shadow: inset -20px -5px 0 rgba(0,0,0,0.07);
  z-index:10;
}

.hat:before {
  content:"";
  position: absolute;
  border-bottom: 50px solid #ad5015;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 50px;
  top:-30px;
  left:25px;
}

.hat:after {
  content:"";
  position: absolute;
  background-color: #ad5015;
  border-radius:50%;
  width:50px;
  height:15px;
  top:-38px;
  left:40px;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,0.07);
}

.eyes {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid black;
  left:170px;
  top:150px;
  z-index:7;
}

.eyes:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 17px solid transparent;
  border-top: 12px solid black;
  left:20px;
  top:-12px;
  
}

.smile {
  position: absolute;
  background-color: black;
  width: 35px;
  height: 13px;
  border-radius: 0 0 100px 100px;
  left:185px;
  top:170px;
  z-index:7;
}

.smile:before {
  content:"";
  position: absolute; 
  background-color: #ff8500;
  width: 7px;
  height: 9px;
  top:-5px;
  left:7px;
}

.smile:after {
  content:"";
  position: absolute; 
  background-color: #ff8500;
  width: 7px;
  height: 9px;
  left:18px;
  top:8px;
}

.jumper {
  position: absolute;
  background-color: #4059ad;
  width:250px;
  height: 50px;
  z-index:2;
  top: 160px;
  left:75px;
  border-radius: 0 0 30px 30px;
}

.jumper:before {
  content:"";
  position: absolute;
  background-color: #4059ad;
  border-radius: 0 0 30px 0;
  width: 150px;
  height: 140px;
  left:55px;
}

.jumper:after {
  content:"";
  position: absolute;
  background-color: #4059ad;
  width: 30px;
  height:80px;
  border-radius: 0 0 20px 0;
  top:90px;
  left:55px;
    
}

.stick {
  z-index:1;
  width: 15px;
  height: 100px;
  background-color: #57240f;
  position: absolute;
  top:300px;
  left:195px;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
}

.stick:before {
  content:"";
  position: absolute;
  width: 300px;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
  background-color: #57240f;
  height: 15px;
  top:-140px;
  left:-145px;
  border-radius:10px;
}

.stick:after {
  content:"";
  position: absolute; 
  background-color: #deb841;
  width:5px;
  height:45px;
  border-radius: 10px;
  left: 20px;
  top: 60px;
  transform: rotate(20deg);
  
}

.straw {
  position: absolute;
  background-color: #deb841;
  width:5px;
  height: 45px;
  top: 360px;
  border-radius: 10px;
  left: 200px;
  z-index:1;
  
}

.straw:before {
  content:"";
  position: absolute;
  background-color: #deb841;
  width:5px;
  height: 45px;
  border-radius:10px;
  left:-25px;
  transform:rotate(-20deg);
  
}

.straw:after {
  content:"";
  position: absolute;
  background-color: #deb841;
  width:45px;
  top:-190px;
  height: 5px;
  border-radius:10px;
  left:-140px;
  transform: rotate(-30deg);
  
}

.patch {
  position: absolute; 
  width: 30px;
  height: 40px;
  background-color: #d7263d;
  left: 230px;
  top:230px;
  z-index:2;
  box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
  
}

.patch:after {
  content:"";
  position: absolute;
  background-color: black;
  width:2px;
  height: 15px;
  left:5px;
  top:-5px;
  
}

.patch:before {
  content:"";
  position: absolute;
  background-color: black;
  width:2px;
  height: 8px;
  left: 20px;
  top:37px;
  
}
CSS scarecrow

To see the live output of the code above go to lenastanley.com.

Enjoy coding!

Read also:

CSS Spooky House Animation

CSS Halloween Ghost Animation

Pure CSS Halloween Pumpkin/ Jack O Lantern

Categories
Web development

JavaScript Toggle Class

Working as a web developer, you need to often add, remove, and toggle CSS classes based on the user interactions with elements on the web page.

JavaScript Toggle Class

Toggling the class means if there is no class name assigned to the element, then a class name can be assigned to it dynamically.

Toggle between adding and removing a class name from an element with JavaScript!

Example:

Step1.

Add HTML

Toggle between adding a class name to the div element with id=”myDIV” (in this example we use a button to toggle the class name).

<button onclick="myFunction()">Click me</button>

<div id="myDIV">
  This is a DIV element.
</div>

Step2.

Add CSS

Add a class name to toggle:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: lightblue;
  color: red;
  font-size: 25px;
}

Step3.

Add JavaScript

Get the <div> element with id=”myDIV” and toggle between the “mystyle” class:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Output:

This is a DIV element.

Enjoy coding!

Read also:

CSS Toggle Switch

How to create the Comparison Slider?

CSS & JavaScript Bee Progress Bar

Categories
Web development

JS Simple Signature Pad

Create the Signature Pad and export the file as PNG.

signature pad

Demo:

What do you need to do?

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

Step1.

Add HTML

Create the canvas-wrap: 

<div id="canvas-wrap">
<canvas id="canvas"></canvas>   
<div id="buttons">
       <div id="text">Please sign above</div>
       <input type="button" id="download" value="Save as PNG"/>
      <input type="button" id="clear" value="Clear">
    </div>
</div>

Step2.

Add CSS

body {
  height: 100vh;
}

canvas {  
  background-color: #fff;
  border-radius: 15px;
  border: 5px solid black; 
}

#canvas-wrap {
  position: relative;
 
}

 #download, #clear {
        position: relative;
        top: 0;
        left: 170px;
        padding: 10px;
        background-color: #57c4e5;
        border: 3px solid black;
        color: black;
        display: block-inline;
        margin-top: 5px;
        margin-right:5px;
        transition: .3s;
      }

#download:hover, #clear:hover {
  background-color: transparent;
}

#text {
  position:relative;
  font-weight: bold;
  left: 190px;
}

Step3.

Add JavaScript

To draw on the canvas: 

var canvas = document.querySelector('canvas');
  canvas.style.position = 'relative';
  canvas.style.top = "0";
  canvas.style.left = "0";

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

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

var isDrawing, drawLine;

canvas.onmousedown = function(event) {
  isDrawing = true;
  drawLine = { x: event.clientX, y: event.clientY };
};

canvas.onmousemove = function(event) {
  if (!isDrawing) return;

  ctx.beginPath();
  
  ctx.moveTo(drawLine.x, drawLine.y);
  ctx.lineTo(event.clientX, event.clientY);
  ctx.stroke();
     
  drawLine = { x: event.clientX, y: event.clientY };
};

canvas.onmouseup = function() {
  isDrawing = false;
};

To clear the canvas:

document.getElementById('clear').addEventListener('click', function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }, false);

To export the file as PNG: 

window.onload = function(){
var save = document.getElementById('download');

 save.onclick = function(){
    download(canvas, 'signature.png');
  }

}

function download(canvas, filename) {
  var lnk = document.createElement('a'), e;
  lnk.download = filename;
  lnk.href = canvas.toDataURL("image/png;base64");
  
  if (document.createEvent) {
    e = document.createEvent("MouseEvents");
    e.initMouseEvent("click", true, true, window,
                     0, 0, 0, 0, 0, false, false, false,
                     false, 0, null);

    lnk.dispatchEvent(e);
  } else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
  }
}

Enjoy coding!

Read also:

CSS& JavaScript Sketch board

CSS/JS Eye Follows Mouse Cursor + Blink on Hover

CSS & JavaScript Bee Progress Bar

Categories
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!

Read also:

CSS Steaming Coffee

Simple CSS Birthday Cake

CSS Coffee Express Animation

Categories
Web development

Heads or Tails? Toss a Coin!

Heads or Tails? Toss a Coin!
Heads or Tails? Toss a Coin!


Toss a Coin JavaScript

Demo:

*to see the Coin Toss animation on the website click here.

What do you need to do?

To create coin flip animation you will need two images of the coin (front and back) in .png format and follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. Add JavaScript
flip a coin
coin toss

Step1.

Add HTML

<div id="coin"></div>
<div id="button">Toss a coin</div>

Step2.

Add CSS

body {
  background-color: #457b9d; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  
}

#coin {
   position: relative;
}

#button {
  background-color:#e9c46a;
  color:#fff;
  padding:15px 15px;
  border-radius:30px;
  display:inline-block;
  transition:0.5s;
  cursor:pointer;
}

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

Step3.

Add CSS Animation

.animate-coin {
  animation: flip 2s 1;
}

@keyframes flip {
  0% {
    transform: rotateX(0deg);
    
  }
  50% {
    transform: rotateX(3600deg);
    
  }
  100% {
    transform: rotateX(7200deg);
    
  }
}

Step4.

Add JavaScript

let coin = document.getElementById("coin");
let button = document.getElementById("button");
let heads = 0;
let tails = 0;

function coinToss() {
  let x = Math.floor(Math.random() * 2);
  if (x === 0) {
    coin.innerHTML = '<img class="heads animate-coin" src="https://lenadesign.org/wp-content/uploads/2020/06/head.png?w=100"/>';   
    heads += 1;
   
  } else {
    coin.innerHTML = '<img class="tails animate-coin" src="https://lenadesign.org/wp-content/uploads/2020/06/tail.png?w=100"/>';
     tails += 1;
  }
}

button.onclick = function() {
  coinToss();
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

CSS & JavaScript Memory Game

Games

CSS/jQuery/JS Playing Cube

CSS Dice

Demo:

*to see the animation on the website click here.
*click and drag the cube and change its position.

To create a 3d playing cube you will need 6 pictures (one of each side of the cube). You can use these below:

and then:

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

Step1.

Add HTML

<div class="game">
  <div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
  </div>
</div>

Step2.

Add CSS

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

.game {
  perspective: 800px;
}
.cube {
  font-size: 50px;
  width: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);
        background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/1-1.png?w=100');}
.top {transform: rotateX(90deg) translateZ(1em);
       background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/4-1.png?w=100');}

.right {transform: rotateY(90deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/5-1.png?w=100');}

.left {transform: rotateY(-90deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/2-1.png?w=100');}

.bottom {transform: rotateX(-90deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/3-1.png?w=100');}

.back {transform: rotateY(-180deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/6-1.png?w=100');}

Step3.

Add jQuery/JavaScript

var lastMouseX = 0,
	lastMouseY = 0;
var rotX = 0,
	rotY = 0;

$(document).on("mousedown", function(ev) {
	lastMouseX = ev.clientX;
	lastMouseY = ev.clientY;
	$(document).on("mousemove", mouseMoved);
});
$(document).on("mouseup", function() {
	$(document).off("mousemove", mouseMoved);
});

function mouseMoved(ev) {
	var deltaX = ev.pageX - lastMouseX;
	var deltaY = ev.pageY - lastMouseY;

	lastMouseX = ev.pageX;
	lastMouseY = ev.pageY;

	rotY -= deltaX * 0.1;
	rotX += deltaY * 0.1;

	$(".cube").css("transform", "translateX( 0px) rotateX( " + rotX + "deg) rotateY(" + rotY + "deg)");
}

Enjoy coding!

Read also:

CSS & jQuery 3d Cube

Roll the dice!

3d

Categories
Web development

HTML DOM Style perspective property/ perspectiveOrigin Property

In my previous tutorial, you could learn about the CSS Perspective property and the CSS Perspective-origin property. You can make a step forward and define the 3d shape also using JavaScript by HTML DOM Style perspective property, and perspective-origin property.

HTML DOM Style Perspective property

HTML DOM Style Perspective Property

The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.

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

Note: The perspective property only affects 3D transformed elements!

Syntax:

object.style.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>
#element-1{
  position: relative;
  margin: auto;
  height: 100px;
  width: 150px;
  padding: 10px;
  border: 2px solid #2a9d8f;
  perspective: 200px;
}
#element-2 {
  padding: 24px;
  position: absolute;
  border: 2px solid #2a9d8f;
  background-color: #e9c46a;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="element-1">Example:
  <div id="element-2">Look at the text. The perspective of the text has been changed too! </div>
</div>
<script>
function myFunction() {
  document.getElementById("element-1").style.perspective = "150px";
}
</script>
</body>
</html>

Output:

perspective property

HTML DOM Style PerspectiveOrigin Property

The perspectiveOrigin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

When defining the perspectiveOrigin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

Syntax:

object.style.perspectiveOrigin = "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>
#example1 {
  position: relative;
  margin: auto;
  height: 100px;
  width: 150px;
  padding: 10px;
  border: 2px solid #2a9d8f;
  perspective: 125px;
}
#example2 {
  padding: 50px;
  position: absolute;
  border: 2px solid #2a9d8f;
  background-color: #e9c46a;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="example1">Example:
  <div id="example2">Look at the text. The perspective of the text has been changed too!</div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspectiveOrigin = "10px 50%";
}
</script>
</body>
</html>

Output:

perspective property

Enjoy coding!

Read also:

JavaScript HTML DOM

JavaScript Math Object

Categories
Web development

SVG vs PNG/ How to add SVG to HTML?/ FAQ SVG

Most of us know that when building stuff for the website, optimizing HTML, CSS, JavaScript, or whatever else is good — but if you don’t optimize images, all other efforts will be in vain, and your website won’t look good.

SVG Introduction

If you follow my blog, for sure you noticed that in many tutorials I am using images in .png format, however, there is also a different image format that works well with the web page – SVG.

Why am I choosing PNGs and SVGs?

These formats support transparency, which does not support .jpg.

SVG and PNG both are a type of image formats to store images. so…what’s the difference between a PNG and SVG? 

A PNG (Portable Network Graphics) file is a raster or bitmap image file format. A raster image is made up of a fixed number of pixels [or building blocks] that form a complete image. 

The image cannot be enlarged without distortion occurring. (When you zoom in on a raster image, the pixels become visibly grainy.) Common raster image files include png, jpg and gif formats. 

An SVG (Scalable Vector Graphics) file is a vector image file format. A vector image uses geometric forms such as points, lines, curves, and shapes (polygons) to represent different parts of the image as discrete objects. These forms can be individually edited. A vector image remains crisp and clear at any resolution or size.

Example:

How to add SVG to HTML?
Images with height=”142″ width=”142″, and after resizing to height=”842″ width=”842″:
How to add SVG to HTML?
PNG is fussy if the pixel density is not high enough. SVG format can be scaled to any size without losing quality.
How to add SVG to HTML?
On the left side an image in .png format, on the right side .svg.

Of course, as usual, it depends on you, which format you prefer, however, always you can try using another one, and have a look at how it works with your web page.

If the sample above convinced you to try to use SVG let’s go further!

For sure you have lots of questions now! Here are some answers on the most frequent one:

FAQ SVG:

From where I can get SVG files?

You can find some free stocks of SVG images on Internet, or you can create them by yourself.

In which program I can create an SVG file?

Personally, I am using Adobe Illustrator, but if you don’t want to pay for the software you can use a free program like Inkscape to create SVG files.

How to create an SVG file in Adobe Illustrator?

Create your image in Adobe Illustrator.

SVG files
Tip: try to always give a name to the layer, you can easily later make any changes in SVG code (more about SVG code you will find below).

Go to File->Export->Export As… and choose format SVG.

How to add SVG to HTML?

by pressing the option Show Code you can see the code of your SVG (or you can open it in any HTML editor later):

How to add SVG to HTML?

How to add SVG to HTML?

You can do as I did in the example above, by using <img> element:

How to add SVG to HTML?

or copy the SVG code directly into HTML. You can read more about HTML SVG also here.

How to paste SVG code into HTML?

If you don’t want to do any changes to your image you can easily choose the first method (by <img> tag )to add your SVG file, but if you want to animate your image with CSS, or JavaScript you should go for method two:

Let’s take a look at the code first:

You do not need to be afraid of these numbers, you don’t need them for now.

SVG path
*the HTML <svg>element is a container for SVG graphics.
SVG path
*and this part is nothing other than CSS.
SVG path
*SVG code pasted and opened in Adobe Dreamweaver CC editor (you can use any HTML editor to edit the code!).

How to animate SVG?

To animate SVG you can use CSS or JavaScript. Let’s try to animate our dot with CSS:

Example:

To our green dot I added the animation – Jelly, and @keyframes:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
	<style>.cls-1{fill:#009640;}
		.cls-2{fill:#2fac66;}
		.cls-3{fill:#fff;}
	    	.cls-4{fill:#1d1d1b;}
		
		svg {
             width: 100%;
             max-width: 300px;
	     padding: 50px;
	     animation: jelly 0.5s infinite;
			}
  
			@keyframes jelly {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
}
	</style>
</head>

<body>
	<svg id="ball" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.18 126.18"><defs>
		</defs><title>ball</title><circle class="cls-1" cx="63.09" cy="63.09" r="63.09"/><circle class="cls-2" cx="60.97" cy="61.97" r="59.97"/><circle class="cls-3" cx="44.79" cy="49.74" r="15.18"/><circle class="cls-3" cx="80.92" cy="49.74" r="15.18"/><circle class="cls-4" cx="83.77" cy="55.5" r="9.42"/><circle class="cls-4" cx="47.12" cy="55.5" r="9.42"/><path class="cls-4" d="M234.32,209.25c0,13.43-11.93,24.31-26.65,24.31S181,222.68,181,209.25" transform="translate(-145.58 -137.79)"/></svg>
</body>
</html>

Output:

Hope this helps 🙂

Enjoy coding!

Read also:

How to resize an SVG image?

HTML SVG

Baggage Scan /SVG & JavaScript Animation

Categories
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 the 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. HTML
  2. CSS
  3. JavaScript

Let’s get jQuery started:

Adding jQuery to HTML

There are several ways to start using jQuery on your website:

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>

<h4>jQuery CDN</h4>

<p>Click on the button.</p>
<p>To hide the paragraphs.</p>

<button>Click me</button>

</body>
</html>

Output:

jQuery CDN

Click on the button.

To hide paragraphs.

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>

<h4>Microsoft CDN</h4>

<p>Click on the button.</p>
<p>To hide paragraphs.</p>

<button>Click me</button>

</body>
</html>

Output:

Microsoft CDN

Click on the button.

To hide paragraphs.

Enjoy coding!

Read also:

JavaScript Introduction

JavaScript Math Object

Categories
Web development

Sass @import and Partials

For sure you’ve noticed already that Sass makes CSS fun again. Today we’ll go a bit further with Sass Rules and we’ll go through the @import rule and Sass Partials.

I play with code.

Sass keeps the CSS code DRY (Don’t Repeat Yourself). One way to write DRY code is to keep related code in separate files.

You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. 

Sass Importing Files

Just like CSS, Sass also supports the @import directive.

Sass Import Syntax:

@import filename;

You can import as many files as you need in the main file:

@import "variables";
@import "colors";
@import "reset";

Example:

Let’s look at an example: You’ll need to create a reset file called “reset.scss”, that looks like this:

SCSS Syntax (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

and now we want to import the “reset.scss” file into another file which I called “test.scss”.

Here is how we do it: It is normal to add the @import directive at the top of a file; this way its content will have a global scope:

SCSS Syntax (test.scss):

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  color: green;
}

Output:

Sass Partials

By default, Sass transpiles all the .scss files directly. However, when you want to import a file, you do not need the file to be transpiled directly.

Sass has a mechanism for this: If you start the filename with an underscore, Sass will not transpile it. Files named this way are called partials in Sass.

So, a partial Sass file is named with a leading underscore:

Sass Partial Syntax:

_filename;

The following example shows a partial Sass file named “_colors.scss”. (This file will not be transpiled directly to “colors.css”):

Example:

“_colors.scss”:

$myRed: #DF361C;
$myBrown: #5B1D13;
$myBlue: #32C6D7;

Now, if you import the partial file, omit the underscore. Sass understands that it should import the file “_colors.scss”:

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  color: $myRed;
}

Enjoy coding!

Read also:

CSS Blurred Background Image

CSS Gradient Border