Categories
JavaScript Web development

Heads or Tails? Coin Flip JS

Heads or tails? Can’t decide? 🙂

Coin tossing JS

Flip coin with JavaScript!

*animation opened in the Safari browser.
To see the live output 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 (to practise you can use these below) and follow the steps below:

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

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: scale3d(1,1,1) rotateX(0deg);
    
  }
  50% {
    transform: scale3d(1,1,1) rotateX(3600deg);
    
  }
  100% {
    transform: scale3d(1,1,1) rotateX(7200deg);
    
  }
}

Step4.

Add JavaScript

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

/* On click of button spin coin ainamtion */
function coinToss() {
  /* Random number 0 or 1  */
  var x = Math.floor(Math.random() * 2);
  /* If statement */
  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();
}

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 JavaScript JQuery

CSS/jQuery/JS Playing Cube

Let’s take a closer look on another example of the tutorial CSS Perspective Property, CSS Perspective-orgin Property & 3d Cube and let’s create a 3d Playing Cube.

CSS Playing Cube

Click and drag the cube and change its the position!

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

To create a 3d playing cube you will need 6 pictures. 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:80vh;
  background: linear-gradient(6deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.game {
  perspective: 800px;
}
.cube {
  font-size: 50px;
  width: 100px;
  margin: 4.5em auto;
  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://lenadesign.org/wp-content/uploads/2020/04/1-1.png?w=100');}
.top {transform: rotateX(90deg) translateZ(1em);
       background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/4-1.png?w=100');}

.right {transform: rotateY(90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/5-1.png?w=100');}

.left {transform: rotateY(-90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/2-1.png?w=100');}

.bottom {transform: rotateX(-90deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/2020/04/3-1.png?w=100');}

.back {transform: rotateY(-180deg) translateZ(1em);
background-image:url('https://lenadesign.org/wp-content/uploads/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)");
}

To see the live output go to lenastanley.com.

Enjoy coding!

Categories
JavaScript 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>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 200px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid red;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">Look at the text. The perspective of the text has been changed too. </div>
</div>
<script>
function myFunction() {
  document.getElementById("ex1").style.perspective = "100px";
}
</script>
</body>
</html>

Output:

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|initial|inherit"

Where:

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

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

initial- sets this property to its default value.

inherit- inherits this property from its parent element.

Example:

!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 2px solid red;
  perspective: 125px;
}
#ex2 {
  padding: 50px;
  position: absolute;
  border: 2px solid green;
  background-color: lightpink;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="ex1">Ex1
  <div id="ex2">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:

To see more examples of the perspective-property and 3d cube click here, here and here.

Enjoy coding!

Categories
#SVG 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 format to store images. so…what’s the difference between a PNG and SVG

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. 

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

Images with height=”142″ width=”142″, and after resizing to height=”842″ width=”842″:
PNG is fussy if the pixel density is not high enough. SVG format, can be scaled to any size without losing quality.
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.

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.

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?

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

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 with 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 on code first:

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

*the HTML <svg>element is a container for SVG graphics.
*and this part is nothing other than CSS.
*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:

This SVG only has one layer, if you have an image with more layers you can animate and style each layer separately.

To see the live example go to lenastanley.com.

Hope this helps 🙂

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!

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

Categories
CSS Web development

CSS Animation- Windmill

I visited Windmills in Rotterdam last month. It was really great to walk around the mills (you can see some pictures on my Instagram).

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

Inspired by this amazing time I created CSS Windmill animation. If you would like to learn how to create CSS Windmill Animation, follow the steps below.

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

What do you need to do?

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

Let’s start!

Step1.

Add HTML

Draw your Windmill:

<div class="container">
  <div class="circle"></div>
  <div class="windmill">
    <div class="sun"></div>
    <div class="clouds"></div>
    <div class="clouds1"></div>
    <div class="mill"></div>
    <div class="grass"></div>
    <div class="roof"></div>
     <div class="fan">
            <div class="fan1"></div>
            <div class="fan2"></div>
            <div class="fan3"></div>
            <div class="fan4"></div>
        </div>
    <div class="bricks"></div>
    <div class="door"></div>
    <div class="window"></div>
  </div>
</div>

Step2.

Add CSS

Set the color and position of your background:

body {
  background: #1A5276;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  position:relative;
}
.circle {
  top:-230px;
  left:-280px;
  position:absolute;
  width:450px;
  height:450px;
  background-color: #50befa;
  border-radius:50%;
  z-index:-30;
  box-shadow:inset 10px 10px 0 rgba(0,0,0,0.07);
}
.circle:after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background-color: #50befa;
  border-radius:50%;
  left:350px;
  top:140px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.circle:before {
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  background-color: #50befa;
  border-radius:50%;
  left:340px;
  top:10px;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
}
CSS Animation Background

Style the sky, add Sun and Clouds:

.sun {
  position: absolute;
  border-radius: 50%;
  background-color: #FBF799;
  width: 50px;
  height:50px;
  left:-150px;  
  top: -170px;
  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;
}
.clouds {
  position:absolute;
  width:160px;
  height:50px;
  border-radius:100px;
  background-color:white; 
  opacity:0.7;
  top:-100px;
  left:-200px;
  z-index:-22;
  animation: cloud 10s linear alternate-reverse infinite;
}
.clouds1 {
  content:"";
  position:absolute;
  width:140px;
  height:50px;
  border-radius:100px;
  background-color:white; 
  left:-320px;
  top:-175px;
  animation: cloud 10s linear alternate infinite;   
  opacity:0.8;
  
}
.clouds:before {
  content:"";
  position:absolute;
  width:160px;
  height:50px;
  border-radius:100px;
  background-color:white; 
  left:290px;
  top:-65px;
  
}
    

The animation should look like that:

CSS Background - Clouds and Sun

Add windmill with the roof:

.windmill {
  position:relative; 
  top:0;
}
.mill {
  position:absolute; 
  border-bottom: 200px solid #EFD5C3;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 200px;
  z-index:-10;
  top:-50px;
  left:-30px;
}
.mill:after {
  position:absolute;
  content:"";
  width:270px;
  height:15px;
  border-radius:100px;
  background-color:#4D250C;
  top:190px;
  left:-35px;
}
.mill:before {
  content:"";
  position:absolute;
  width:240px;
  height:15px;
  border-radius:100px;
  background-color:#4D250C;
  top:85px;
  left:-20px;
}
.grass {
  position:absolute;
  background-color:#196F3D;
  width:400px;
  height:50px;
  border-radius:100px;
  top:150px;
  left:-100px;
  z-index:-20;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
}
.grass:after {
  content:"";
  position:absolute;
  background-color:#196F3D;
  width:350px;
  height:30px;
  border-radius:0 0 100px 100px;
  top:50px;
  left:25px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.roof {
  position:absolute; 
  width:210px;
  height:15px;
  border-radius:100px;
  background-color:#4D250C;
  top:-60px;
  left:-5px;
  z-index:-5;
}
.roof:after {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid #4D250C;
  top:-90px;
  left:5px;
}
.roof:before {
  position:absolute;
  content:"";
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:20px;
  left:150px;
}


.bricks {
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:-25px;
  left:160px;
  
}
.bricks:after {
  content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:25px;
  left:-160px;
  
}
.bricks:before {
  content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:40px;
  left:-150px;
  
}
.door {
  position:absolute;
  background-color:#784212;
  border:3px solid #4D250C;
  width:50px;
  height:70px;
  border-radius:30px 30px 0 0;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  top:70px;
  left:65px;
}
.door:after {
  content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:25px;
  left:60px;
}
.door:before {
   content:"";
  position:absolute;
  width:30px;
  height:13px;
  border-radius:100px;
  background-color:#CA6F1E;
  top:10px;
  left:70px;
}
.window {
  position:absolute;
  border-radius: 30px 30px 0 0;
  border:3px solid #4D250C;
  box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
  background-color:#1A5276;
  width:40px;
  height:40px;
  top:-8px;
  left:70px;
  
}
.window:after {
  content:"";
  position:absolute;
  background-color:#4D250C;
  width:3px;
  height:40px;
  left:18px;
}
.window:before {
  content:"";
  position:absolute;
  background-color:#4D250C;
  width:40px;
  height:3px;
  left:0;
  top:20px;
}

The animation should look like that:

CSS Mill

and add the fan:

.fan {
 z-index: 10;
 width: 192px;
 height: 192px;
 position: absolute;
 left: 0;
 top: -155px;
 animation: spin 12s linear infinite;

}
.fan1 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 92px; 
  top:-30px;
  z-index:6;
  }
.fan1::before {
    positioN: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
.fan2 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 150px;
  top:18px;
  transform: rotate(90deg);
  z-index:6;
  }
.fan2::before {
    positioN: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
.fan3 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 92px;
  top:78px;
  transform: rotate(180deg);
  z-index:6;
  }
.fan3::before {
    positioN: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
.fan4 {
  position: absolute;
  width: 8px;
  height: 150px;
  background-color: brown;
  margin-right: 100px;
  left: 30px;
  top:18px;
  transform: rotate(-90deg);
  z-index:6;
  }
.fan4::before {
    position: absolute;
    content: "";
    background-color: red;
    opacity: 0.8;
    width: 30px;
    height: 100px;
    left: 8px;
    z-index:6;
    border-radius: 2px;
    box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  }
CSS Windmill

Step3.

Add CSS Animation

For sun and clouds:

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

And for windmill’s fan:

@keyframes spin { 100% { transform:rotate(360deg); } }

To see the live output visit: lenastanley.com

Enjoy coding!

Categories
JavaScript Web development

JavaScript HTML DOM/Events

HTML DOM allows JavaScript to react to HTML events.

JavaScript HTML DOM Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:

onclick=JavaScript

Examples of HTML events:

  1. When a user clicks the mouse
  2. When a web page has loaded
  3. When an image has been loaded
  4. When the mouse moves over an element
  5. When an input field is changed
  6. When an HTML form is submitted
  7. When a user strokes a key

In this example, the content of the <h1> element is changed when a user clicks on it:

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>

Output:

HTML Event Attributes

To assign events to HTML elements you can use event attributes.

Assign an onclick event to a button element:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html> 

Output:

Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript:

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html> 

Output:

The onload and onunload Events

The onload and onunload events are triggered when the user enters or leaves the page.

The onload event can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

The onload and onunload events can be used to deal with cookies.

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p id="demo"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html> 

Output:

The onchange Event

The onchange event is often used in combination with validation of input fields.

Below is an example of how to use the onchange. The upperCase() function will be called when a user changes the content of an input field.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

Enter your name: <input type="text" id="fname" onchange="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

</body>
</html>

Output:

The onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element:

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:lightblue;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>

<script>
function mOver(obj) {
  obj.innerHTML = "Thank You"
}

function mOut(obj) {
  obj.innerHTML = "Mouse Over Me"
}
</script>

</body>
</html> 

Output:

The onmousedown, onmouseup and onclick Events

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:yellow;width:90px;height:20px;padding:40px;">
Click Me</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "Release Me";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="Thank You";
}
</script>

</body>
</html> 

Output:

Enjoy coding!

Categories
JavaScript Web development

JavaScript HTML DOM/Animations

Learn to create HTML animations using JavaScript.

JavaScript HTML DOM Animations
  1. Create an Animation Container – all animations should be relative to a container element.
<div id ="container">
  <div id ="animate">My animation will go here</div>
</div>

2. Style the Elements:

The container element should be created with style =“position: relative”

The animation element should be created with style =“position: absolute”.

<!Doctype html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}
</style>
<body>

<h2>My First JavaScript Animation</h2>

<div id="container">
<div id="animate"></div>
</div>

</body>
</html>

Output:

3. Animation Code – JavaScript animations are done by programming gradual changes in an element’s style.

The changes are called by a timer. When the timer interval is small, the animation looks continuous.

function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}

Try it yourself:

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

Output:

Enjoy coding!