Categories
CSS HTML JavaScript

CSS Earth & Moon

Hello! Can you believe it’s November already? Time flies like crazy!

CSS Rocket
Do you like this image? Check more images in theย store.

I am a fan of space exploration and can’t pass reading any new article about travel in space. So today I prepared the CSS Earth & Moon animation. I hope one day we can travel to the moon and back ๐Ÿ˜‰

*animation opened in the Firefox 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
  4. Add some JavaScript

Step1.

Add HTML

<div class="container">
  <div class="earth">
    <div class="green"></div>
     </div>
  <div class="clouds">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
  </div>
  <div class="stars">
    <div class="star1">+</div>
    <div class="star2">+</div>
    <div class="star3">+</div>
  </div>
  <div id="moveMoon" class="moon"></div>
</div>

Step2.

Add CSS

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

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

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

Style the earth and the continents:

.earth {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #00a5cf;
  overflow: hidden;
  box-shadow: 1px 1px 150px rgba(255,255,255,0.5), inset -5px -5px 0px rgba(0,0,0,0.08);
}

.green {
  position: absolute;
  background: url("https://lenadesign.org/wp-content/uploads/2020/11/map.png") repeat 0 0;
  left:0;
  top:-70px;
  width: 640px;
  height: 480px;
  animation: spin 17s linear infinite; 
}

*to add continents you can use my image in .png format below:

Style the moon, clouds and stars:

.moon {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: #95A5A6;
  border-radius:50%;
  left:-50px;
  box-shadow: 1px 1px 70px rgba(255,255,255,0.5), inset -5px -5px 0px rgba(0,0,0,0.08);
}

.moon:before {
  position: absolute;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.09);
  content:"";
  width:25px;
  height:25px;
  border-radius:50%;
  top:10px;
  left:10px;
}

.moon:after {
  position: absolute;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.09);
  content:"";
  width:15px;
  height:15px;
  border-radius:50%;
  top:40px;
  left:40px;
}

.clouds {
  position: absolute;
}

.cloud1 {
  position: absolute;
  width: 150px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  top:200px;
  left:-50px;
  filter: blur(8px);
  box-shadow: -5px 5px 4px;
}

.cloud2 {
  position: absolute;
  width: 150px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  top:100px;
  left:190px;
  filter: blur(8px);
  box-shadow: 5px -5px 4px;
}

.stars {
  position: absolute;
  color: rgba(255,255,255,0.7);
  font-weight: bold;
  font-size: 25px;
  text-shadow: 1px 1px 20px white;
  
}

.star1 {
  position: absolute;
  left: 300px;  
  animation: flash 1s ease infinite alternate;
}

.star1:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-80px;
  top:-50px;
  
}

.star1:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-180px;
  top:340px;
}

.star2 {
  position: absolute;
  left: -70px;  
  top:100px;
  animation: flash 1.5s ease infinite alternate;
}

.star2:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:80px;
  top:170px;
}

.star2:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:390px;
  top:40px;
}

.star3 {
  position: absolute;
  top:270px;
  left:310px;
  animation: flash .7s ease infinite alternate;
}

.star3:before {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-270px;
  top:-270px;
}

.star3:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:rgba(255,255,255,0.7);
  box-shadow: 1px 1px 20px white;
  left:-390px;
  top:-70px;
}

Step3.

Add CSS Animation

To move continents:

@keyframes spin {  
  from { background-position: 0 0; }
    to { background-position: -600px 0; }
}

To flash stars:

@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

Step4.

Add JavaScript

To move moon around the earth:

var ElementRevolver = (function() {
    
    function getPosition(settings, ellapsedTime) {
        var angle = getAngle(settings, ellapsedTime);
        return {
            x: Math.round(settings.center.x + settings.radius * Math.cos(angle)),
            y: Math.round(settings.center.y + settings.radius * Math.sin(angle))
        };
    }
    
    function getAngle(settings, ellapsedTime) {
        return ellapsedTime / settings.interval * 2 * Math.PI * settings.direction - settings.startPositionRad;
    }
    
    function start(id, settings) {
        var el = document.getElementById(id),
            startTime = (new Date()).getTime(),
            width = el.offsetWidth,
            height = el.offsetHeight;
        if(el['#rev:tm'] !== null) stop(id);
        el.style.position = settings.cssPosition || 'absolute';
        if(!settings.startPositionRad) settings.startPositionRad = settings.startPositionDeg / 180 * Math.PI;
        el['#rev:tm'] = setInterval(function() {
            var pos = getPosition(settings, (new Date()).getTime() - startTime);
            el.style.left = (pos.x - Math.round(width / 2)) + 'px';
            el.style.top = (pos.y - Math.round(height / 2)) + 'px';
        }, settings.updateInterval);
        if(settings.iterations > -1) setTimeout(function() {
            stop(id);
        }, settings.iterations * settings.interval);
    }
    
    function stop(id) {
        var el = document.getElementById(id);
        if(el['#rev:tm'] === null) return;
        clearInterval(el['#rev:tm']);
        el['#rev:tm'] = null;
    }
    
    return {
        start: start,
        stop: stop
    };
    
})();

ElementRevolver.start('moveMoon', {
    radius: 200,
    center: { x: 150, y: 150 },
    interval: 8000,
    direction: 1,
    iterations: -1,
    startPositionDeg: 0,  
    updateInterval: 50
});

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

Enjoy coding!

Categories
CSS JQuery Web development

CSS/jQuery Ghost Animation

Happy Halloween everyone! To celebrate the spookiest day of the year I prepared the CSS/jQuery Ghost animation tutorial. To create the Halloween Ghost follow the steps below.

  1. Add HTML
  2. Add CSS with the CSS Animation
  3. Add jQuery
*animation opened in the Firefox browser.
*to see the live output of the animation click here.

Step1.

Add HTML

<div id="container">
  <div class="ghost">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
    <div class="shadow"></div> 
  </div>
</div>

Step2.

Add CSS

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

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

#container {
  position: relative;
  z-index:10;
  color: white;
  font-size: 200px;
  text-shadow: 2px 2px black;  
}

Style the Ghost, and add an animation:

.ghost {
  position: relative;
  left:-100px;
  top:-100px;
  animation: bounce-out-down 4s ease infinite;
}

@keyframes bounce-out-down {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.top {
  position: absolute;
  background-color: #f7ede2;
  width: 109px;
  height:150px;
  border-radius: 50px 50px 0 0;
}

.top:after {
  content:"";
  position: absolute;
  background-color: #272640;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top:35px;
  left:25px;  
  
}

.top:before {
  content:"";
  position: absolute;
  background-color: #272640;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top:35px;
  left:58px; 
}

.middle {
  position: absolute; 
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  top:130px;
}

.middle:after {
  content:"";
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  left:28px;
  top:-5px;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  left:56px;
  top:-2px;
}

.bottom {
  position: absolute;
  background-color: #f7ede2;
  width: 25px;
  height: 40px;
  border-radius: 30px;
  top:132px;
  left:84px;
}

Add the shadow with an animation:

.shadow {
  background-color: #272640;
  position: absolute;
  width: 109px;
  height:30px;
  border-radius:50%;
  top:200px;
  left:-100px;
  top:95px;
  animation: bounce 4s ease infinite;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: scaleX(0.95);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.1);
  }
}

Step 3.

Add jQuery

*Don’t forget to add the jQuery library link in the section of your document. To see how to add jQuery to HTML document click here.

$("#container").hover(function () {
    $(this).append($("<span>Boo!</span>"));
},function () {
    $(this).find('span').slideUp('fast');
});

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

Enjoy coding!

Categories
CSS JQuery

CSS Halloween Pumpkin

Halloween is coming! So it’s pumpkin time. Follow the steps below and create your own CSS spooky pumpkin!

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

Firstly, we will create the pumpkin with CSS and secondly, we will add some jQuery to spin the pumpkin eyes to make it more spooky!

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

Step1.

Add HTML

<div id="content">
  <div id="pumpkin">
    <div class="middle"></div>
    <div class="back"></div>
    <div class="stalk"></div>
    <div class="stalk2"></div>
    <div class="eyes">
      <div class="eye1"></div>
      <div class="eye2"></div>
    </div>
     <div class="smile"></div>
    <div class="smile1"></div>
    <div class="shadow"></div>
  </div>
</div>

Step2.

Add CSS

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

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

Style the pumpkin:

#content {
  position: relative;
}

#pumpkin {
  position: relative; 
  top:-200px;
  left:-150px;
}

.middle {
  position: absolute; 
  background-color: #ff9500;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset -5px 5px 0 rgba(0,0,0,0.07);
  z-index:10;
  
}
.middle:before {
  content:"";
  position: absolute;
  background-color: #ff9500;
  width: 120px;
  height:180px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  left:-120px;
}

.middle:after {
  content:"";
  position: absolute;
  background-color: #ffa200;
  width: 120px;
  height:180px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  left:-55px;
  top:15px;
}

.back {
  position: absolute; 
  background-color: #ff8800;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset -5px 5px 0 rgba(0,0,0,0.07);
  z-index:1;
  left:60px;
  top:80px;
  
}

.back:before {
  position: absolute; 
  content:"";
  background-color: #ff7b00;
  width: 120px;
  height:180px;
  left:147px;
  top:100px;
  border-radius: 50% 50% 50% 50% / 50% 50% 40% 40%;
  box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
  top:0;
  left:60px;
  
  
}

 .stalk {
      background: #344e41;
      width: 35px;
      height: 35px;
      position: relative;
      text-align: center;
      transform: rotate(20deg) skew(-30deg);
      z-index: 11;
      left: 130px;   
      top: 100px;
      box-shadow: inset 5px 5px 0 rgba(0,0,0,0.07);
      border-radius:2px;
    }
    .stalk:before {
      content: "";
      position: absolute;
      border-radius:2px;
      top: 0;
      left: 0;
      height: 35px;
      width: 35px;
      background: #344e41;
      transform: rotate(135deg) ;
      box-shadow: inset 5px 5px 15px rgba(0,0,0,0.09);
    }

.stalk2 {
  position:absolute;
  width:50px;
	height:45px;
	border-top:18px solid #344e41;
	border-right:12px solid #344e41;
	border-top-right-radius:100px;
  left:90px;
  z-index:12;
  top:60px;
}

.stalk2:after {
  background-color: #26362e;
  border-radius:50%;
  content:"";
  position: absolute;
  width:10px;
  height:18px;
  top:-18px;
  left:-5px;
}
CSS Pumpkin

Style and animate eyes:

.eyes {
  position: absolute;
  z-index:30;
}

.eye1 {
  position: absolute;
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 80px;
  top:110px;
  transform-origin: center;
  box-shadow: inset -5px -5px 0 #333;
}

.eye2 {
  position: absolute;
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform-origin: center;
  left: 160px;
  top:110px;
  box-shadow: inset -5px -5px 0 #333;
}

.eye1:after {
  position: absolute;
  content:"";
  background-image: radial-gradient(circle closest-side, red,
      transparent);
  width: 30px;
  height:30px;
  border-radius:50%;
  Left: 20px;
  box-shadow: 4px 3px 40px yellow;
  animation: eye 0.7s infinite;
  
}

.eye2:after {
  position: absolute;
  content:"";
  background-image: radial-gradient(circle closest-side, red,
      transparent);
  width: 30px;
  height:30px;
  border-radius:50%;
  Left: 10px;
  box-shadow: 4px 3px 40px yellow;
  animation: eye 0.7s infinite;
  
}

@keyframes eye {
  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 smile of the pumpkin:

.smile {
  position: absolute;
  width:95px;
	height:40px;
  border-radius: 0 0 100px 100px;
  background-color: black;
	top:225px;
  left:100px;
  z-index:20;  
  box-shadow: inset 4px 3px 35px yellow;
}

.smile:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #ffa200;
  top:-5px;
  left:10px;
}

.smile:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid #ffa200;
  top:22px;
  left:37px;
}

.smile1 {
  position: absolute;
  background-color: #ffa200;
  width: 101px;
  height: 15px;
  border-radius:50%;
  top:220px;
  z-index:34;
  left: 97px;
  
}

and add some shadow:

.shadow {
  position: absolute;
  width: 320px;
  height: 70px;
  background-color: red;
  border-radius:50%;
  left:-10px;
  top:245px;
  filter: blur(45px);
}

Step3.

Add jQuery

$("#pumpkin").mousemove(function(e) {
  var eyes = $(".eye1, .eye2");
  var x = (eyes.offset().left) + (eyes.width() / 2);
  var y = (eyes.offset().top) + (eyes.height() / 2);
  var rad = Math.atan2(e.pageX - x, e.pageY - y);
  var rot = (rad * (180 / Math.PI) * -1) + 180;
  eyes.css({
    '-webkit-transform': 'rotate(' + rot + 'deg)',
    '-moz-transform': 'rotate(' + rot + 'deg)',
    '-ms-transform': 'rotate(' + rot + 'deg)',
    'transform': 'rotate(' + rot + 'deg)'
  });
});

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

Enjoy coding!

Categories
CSS Web development

CSS Bubbles

CSS Bubble

I’ve got a lot of emails regarding my tutorial “How to create Bubbles in Photoshop” and I would like to thank you all for warm words! I am really happy to hear that this tutorial helped you with your work! It keeps me motivated. Some of you asked me to prepare the tutorial on how to create Bubbles in CSS, so here we are today! Ta-daaaah! CSS Bubbles tutorial is ready! Please follow the steps below and create awesome bubbles on your web page.

*animation opened in the Firefox browser.
To see the live output of the animation click here.
  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

Create the container and add some bubbles:

<div class="container">
  <div class="bubbles">
    <div class="bubble1"></div>
    <div class="bubble2"></div>
    <div class="bubble3"></div>
    <div class="bubble4"></div>
    <div class="bubble5"></div>
    <div class="bubble6"></div>
    <div class="bubble7"></div>
    <div class="bubble8"></div>
    <div class="bubble9"></div>
    <div class="bubble10"></div>
  </div>
</div>

Step2.

Add CSS

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

body {
  background-color: #00b4d8; 
  overflow-x: hidden;
  height: 100vh;
  
}
.container {
  position: relative;
  z-index: -10;
  top:0;
  
}

Style the bubbles:

.bubbles {
  position: fixed;
  opacity:0.9;
}

.bubble1 {
  position: absolute; 
  width: 100px;
  height: 100px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  animation: up 18s linear infinite;
  top:600px;
  left:1000px;
  
}

.bubble1:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:25px;
  height:50px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(8px);
}

.bubble2 {
  position: absolute; 
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:800px;
  top: 700px;
  animation: up 20s linear infinite;
}

.bubble2:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.6);
  border-radius:50%;
  width:12.5px;
  height:25px;
  left:15px;
  top:7px;
  transform: rotate(25deg);
  filter: blur(8px);
}

.bubble3 {
  position: absolute; 
  width: 80px;
  height: 80px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:1200px;
  top:800px;
  animation: up 25s linear infinite;
}

.bubble3:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:20px;
  height:40px;
  left:15px;
  top:10px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble4 {
  position: absolute; 
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -5px -5px 8px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  animation: up 27s linear infinite;
  left:800px;
  top: 700px;
}

.bubble4:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.8);
  border-radius:50%;
  width:10px;
  height:8px;
  left:7px;
  top:5px;
  transform: rotate(25deg);
  filter: blur(5px);
}

.bubble5 {
  position: absolute; 
  width: 90px;
  height: 90px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:350px;
  top:700px;
  animation: up 23s linear infinite;
}

.bubble5:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:22px;
  height:48px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble6 {
  position: absolute; 
  width: 70px;
  height: 70px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:750px;
  top:700px;
  animation: up 15s linear infinite;
}

.bubble6:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:22px;
  height:48px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble7 {
  position: absolute; 
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:-400px;
  top: 700px;
  animation: up 20s linear infinite;
}

.bubble7:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.6);
  border-radius:50%;
  width:12.5px;
  height:25px;
  left:15px;
  top:7px;
  transform: rotate(25deg);
  filter: blur(8px);
}

.bubble8 {
  position: absolute; 
  width: 80px;
  height: 80px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:-600px;
  top:800px;
  animation: up 8s linear infinite;
}

.bubble8:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:20px;
  height:40px;
  left:15px;
  top:10px;
  transform: rotate(25deg);
  filter: blur(7px);
}

.bubble9 {
  position: absolute; 
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -5px -5px 8px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  animation: up 27s linear infinite;
  left:600px;
  top: 700px;
}

.bubble9:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.8);
  border-radius:50%;
  width:10px;
  height:8px;
  left:7px;
  top:5px;
  transform: rotate(25deg);
  filter: blur(5px);
}

.bubble10 {
  position: absolute; 
  width: 90px;
  height: 90px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  box-shadow:  inset -7px -7px 15px rgba(255, 255, 255, 0.3), 5px 5px 3px rgba(0,0,0,0.07);
  overflow:hidden;
  left:-350px;
  top:700px;
  animation: up 13s linear infinite;
}

.bubble10:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius:50%;
  width:22px;
  height:48px;
  left:15px;
  top:12px;
  transform: rotate(25deg);
  filter: blur(7px);
}

Step3.

Add CSS Animation

@keyframes up {
  100% { transform: translateY(-1000px);} 
}

To see the live output go to lenastanley.com.

Enjoy coding!

Categories
CSS Web development

CSS Scarecrow

Autumn harvest is coming, and with it Scarecrows ๐Ÿ™‚
Let’s create one with CSS!

scarecrow
Do you like this image? Check more images in the store.

CSS code opened in the Safari browser:

CSS Scarecrow
*to see the live output of the CSS code click here.

To create the Scarecrow above you need to add the first an HTML, and then style the HTML with CSS.

Step1.

Add HTML

<div id="circle">
<div class="content">
  <div class="clouds">
  <div class="cloud"></div>
  <div class="cloud1"></div>
  <div class="cloud2"></div>
  <div class="cloud3"></div>
  </div>
  <div class="grass"></div>
  <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;
}
#circle {
  positon: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #db995a;
  box-shadow: 10px 5px 1px rgba(0,0,0,0.07);
}

Add clouds to the background:

.content {
  position: relative;
}

.clouds {
  position: absolute;
  top:-10px;
}

.cloud {
  position: absolute; 
  background-color: #f4ae4a;
  width: 120px;
  height: 30px;
  border-radius: 100px;
  left: 270px;
  top: 80px;
}
.cloud:before {
  content:"";
  position: absolute;
  width: 100px;
  height: 30px;
  border-radius: 100px;
  top:30px;
  background-color: #f4ae4a;
  left: 40px; 
}

.cloud:after {
  content:"";
  background-color: #db995a;
  position:absolute;
  border-radius:100px;
  width:50px;
  height:30px;
  top:30px;
  left:20px;
}

.cloud1 {
  position: absolute;
  height:30px;
  width:160px;
  background-color: #f4ae4a;
  top:140px;
  left:250px;
  border-radius:100px;
}

.cloud1:after {
  content:"";
  position: absolute; 
  background-color: #db995a;
  height:30px;
  width:50px;
  border-radius:100px;
  top:30px;
  left:25px;
}

.cloud1:before {
  content:"";
  position: absolute;
  background-color: #f4ae4a;
  width: 80px;
  height: 30px;
  border-radius:100px;
  top:30px;
  left:50px;
}

.cloud2 {
  position: absolute;
  background-color: #db995a;
  width: 50px;
  height:30px;
  border-radius:100px;
  top:170px;
  left:350px;
  
}

.cloud2:after {
  position: absolute;
  content:"";
  height:30px;
  width:90px;
  background-color: #f4ae4a;
  top:30px;
  border-radius:100px;
  left:-60px;
  
}

.cloud2:before {
  background-color: #f4ae4a;
  position: absolute;
  content:"";
  width:90px;
  height:30px;
  left:-360px;
  border-radius:100px;
  top:60px;
}

.cloud3 {
  position: absolute; 
  background-color: #f4ae4a;
  width: 60px;
  height: 30px;
  left:-10px;
  top:200px;
  border-radius:100px;
}

.cloud3:after {
  position: absolute;
  content:"";
  background-color: #db995a;
  height: 30px;
  width:50px;
  border-radius:100px;
  left:30px;
  
}

.cloud3:before {
  content:"";
  position:absolute;
  height:30px;
  width:120px;
  background-color: #f4ae4a;
  top:-30px;
  border-radius:100px;
  
}

And the grass:

.grass {
  background-color: #2a3c24;
  width: 400px;
  height:200px;
  border-radius:50%;
  top:250px;
  position:absolute;
  left:0;
}
CSS Autumn
*the output should look like that so far

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

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

Enjoy coding!

Categories
CSS JavaScript JQuery Web development

JavaScript Progress Bar/ Bee Progress Bar

A progress bar can be used to show a user how far along he/she is in a process ( such as a download, file transfer, or installation).

honey bee
Do you like this image? Check more images in the store.

In this tutorial, you’ll learn how to create a simple progress bar using JavaScript, and after that, we’ll add some CSS and jQuery to create an animated progress bar.

I. Simple Progress Bar

To create a Simple Progress Bar you need to:

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

Step1.

Add HTML

<div id="myProgress">
  <div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Click Me</button> 

Step2.

Add CSS

#myProgress {
  width: 100%;
  background-color: #839791;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #896978;
  text-align: center;
  line-height: 30px;
  color: white;
}

Step3.

Add JavaScript

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

Output:

II. Bee Progress Bar

Now, when you know how the progress bar works we will do step ahead!

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

To create the Bee Progress Bar follow the steps below:

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

Step1.

Add HTML

 <div id="progress">
   <div id="text"><h1>Honey Bee</h1></div>
  <div id="bee">
    <div class="head"></div>
    <div class="feeler1"></div>
    <div class="feeler2"></div>
    <div class="eye"></div> 
    <div class="body"></div>
    <div class="leg1"></div>
    <div class="leg2"></div>
    <div class="wing1"></div>
    <div class="wing2"></div>
    <div class="sting"></div>
  </div>
    <div class="background">
    <div class="honey"></div>
    <div class="honey1"></div>
    <div class="honey2"></div>
  </div> 
  <div class="bar" id="bar"></div>
</div>

<button id="button" class="button" onclick="move()">Click Me</button> 

Step2.

Add CSS

Set the background colour and position of elements:

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

Style the Bee:

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

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

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

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

.feeler2 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: -16px;
  left: 20px;
}

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

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

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

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

.sting {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 15px solid #f0efeb;
  left:-90px;
  top:29px;
  z-index:-2;
}

.leg1 {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  top: 57px;
  left: -3px;
}

.leg1:after {
  position: absolute;
  content:"";
  border-radius: 50%;
  box-shadow: inset -3px 3px 0px black;
  width: 20px;
  height: 20px;
  left: -53px;
}

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

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

.wing1 {
  position: absolute;
  background-color: #a8dadc;
  opacity: 0.7;
  width: 50px;
  height: 80px;
  border-radius: 50%;
  top:-53px;
  left:-48px;
  z-index:-4;
  transform-origin: top bottom;
	animation: fly 0.1s ease infinite;
}

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

Add animation to spin the wings:

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

Style the progress bar and the button:

#progress {
  position: absolute;
  width: 50%;
  background-color: #f26419;
  border-radius:100px;
  border: 3px solid black;
  box-shadow: 5px 5px 2px rgba(0,0,0,0.07); 
  top: 250px;
  left:25%;
}

#progress:after {
  content:"";
  background-image: 
}

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

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

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

Add some decoration:

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

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

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

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

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

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

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

Add @keyframes to move the bee:

.moveright {
  animation: moveright 2s forwards;
}

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

}
CSS Honey Bee Animation

Step3.

Add JavaScript/ jQuery

jQuery:

$(function() {
  $('#button').click(function() {
    $('#bee').addClass('moveright');
     setTimeout(function () {
    $("#bee").removeClass('moveright');
}, 4000);
  });
});

and JavaScript:

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

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

Enjoy coding!

Categories
CSS Web development

I’ts hot outside! /CSS Ice cream

It’s summer, it’s hot and sunny. I love it! Fancy some ice cream?

Do you like this image? Check more images in the store.
*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="icecream">
    <div class="ice">
      <div class="eyes"></div>
      <div class="smile"></div>
    </div>
    <div class="cone"></div>
    <div class="melt"></div>
    <div class="drip">
      <div class="drip2"></div>
      <div class="drip3"></div>
    </div>
  </div>
 <div class="shadow">
   <div class="top"></div>
   <div class="bottom"></div>
  </div>
</div> 

Step2.

Add CSS

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

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

Style the ice cream:

.icecream {
  position: absolute;  
}

.cone {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 200px solid #F7DC6F;
    
}
.cone:after {
  content:"";
  position: absolute;
  background-color: #F7DC6F;
  width: 140px;
  height: 25px;
  border-radius: 100px;
  top:-220px;
  left:-70px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
}
.cone:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 30px solid transparent;
  border-top: 200px solid rgba(0,0,0,0.07);
  top:-200px;
  left:15px;
  transform: rotate(8deg);
}
.ice {
  position:absolute;
  border-radius: 50%;
  background-color: #5DADE2;
  width: 160px;
  height: 160px;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  top: -150px;
  left:-20px;
}
.ice:after {
  content:"";
  position:absolute;
  border-radius: 100px;
  background-color: #5DADE2;
  width: 175px;
  height: 30px;
  top: 100px;
  left: -5px; 
}

Add eyes and the smile:

.eyes {
  position: absolute;
  border-radius: 50%;
  background-color: #000;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  top: 40px;
  left: 40px;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2s infinite;
}
.eyes:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #000;
  width: 20px;
  height: 20px;
  top: 0;
  left: 40px;
}
.smile {
  position: absolute;
  top: 70px;
  left: 50px;
  width: 40px;
  height: 20px;
  opacity:0.5;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  background:#000;
}
.smile:after {
  content:"";
  position: absolute;
  top: 8px;
  left: 5px;
  width: 80%;
  height: 70%;
  border-radius: 100px 100px 0 0;
  background: #5DADE2;
  opacity: 0.5;
}

Add the drip:

.melt {
  position: absolute;
  background-color: #5DADE2;
  z-index:1;
  width: 20px;
  height: 40px;
  border-radius: 0 0 30px 30px;
  top:-20px;
  left:20px;
}
.melt:after {
  content:"";
  position: absolute;
  background-color: #5DADE2;
  border-radius: 0 0 30px 30px;
  width: 20px;
  height: 50px;
  left:-30px;
}

.drip {
  position: absolute;
  left:-10px;
  top: 11px;
}

.drip2 {
  background-color: #5DADE2;
  top: 50px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius:50%;
  animation: down 2s infinite;
}

.drip3 {
  top: 173px;
  background-color: #5DADE2;
  position: absolute;
  width: 60px;
  height: 20px;
  border-radius:50%;
  left:-10px;
}

Step3.

Add CSS Animation

For eyes:

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

For the drip:

@keyframes down {
  from {top: 11px;}
  to {top: 170px;}
}

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

Watch also the video tutorial:

Enjoy coding!

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!