Loading Shimmer

Hi folks, In this tutorial, we will create a loading shimmer effect with pure CSS. First of all, we should know about the loading shimmer. When we loading any data from any server, we have to send a request to the server for the required data. After that server read the request and send data according to the request. To reading the request and collecting data for the request the server will take some time. In between this process, our window screen will be blank. At that time we can show the loading shimmer to the user. When the user will show the loading shimmer he/she can imagine that something is loading and he can wait for the time. 

Now let's learn how to create a loading shimmer with plain HTML and CSS.

Live Demo:

HTML:

<div class="card animated-background">
      <div class="background-masker line-one-third"></div>
      <div class="background-masker line-full"></div>
      <div class="background-masker line-one-forth"></div>
      <div class="background-masker line-full"></div>
      <div class="background-masker line-full"></div>
      <div class="background-masker line-full"></div>
      <div class="background-masker line-full"></div>
      <div class="background-masker line-full"></div>
</div>

CSS:

.card {
  border: 15px solid #fff;
  margin: 10px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.05), 

                       0 1px 2px 0 rgba(0,0,0,.1), 

                       0 2px 20px 0 rgba(0,0,0,.2);
}

.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #e5e5e5 8%, #f5f5f5 18%, #e5e5e5 33%);
  background-size: 800px 104px;
  height: 130px;
  position: relative
}

@keyframes shimmer {
  0% {
      background-position: -200px 0
  }
  100% {
      background-position: 468px 0
  }
}

.background-masker {
  height: 10px;
  background: #fff;
}
.background-masker:nth-child(n+4):not(:last-child) {
  margin-bottom: 10px;
}

.background-masker.line-one-third {
  width: 30%;
  margin-left: 70%;
}
.background-masker.line-one-forth {
  width: 20%;
  margin-left: 80%;
}
.background-masker.full {
  width: 100%;
}

 Live Demo:

CSS Flexbox

Hi folks, In this tutorial we will learn about the CSS display property Flex, what it is, its benefits and how we can use it in our code. CSS Flexible Box Layout, commonly known as Flexbox, is a CSS3 web layout model for displaying items in a single dimension — as a row/column. Flexbox is described as a layout model for user interface design. The items can grow and shrink in a flex layout. Space can be assigned to the items themselves or distributed between or around the items. Flexbox enables alignment of items on the main or cross axis. It also allows responsive elements within a container.

Live Demo:

Properties for the flex container

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content  

display:
The container becomes flexible by setting the display property to flex container (inline or block) depending on the given value.  


 

.container {
  display: flex; /* or inline-flex */
}

flex-direction:
This property will define the direction/axis of the flex items. Think of flex items as primarily laid out either in horizontal rows or vertical columns. 


 

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row: left to right
row-reverse: right to left
column: top to bottom
column-reverse: bottom to top 

flex-wrap:
The flex-wrap property specifies whether the flex items should wrap or not. By default, flex items will all try to fit into one line. You can change that and allow the items to wrap as needed with this property. 


 

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap: flex items will be in one line.
wrap: flex items will wrap into multiple lines.
wrap-reverse: flex items will wrap into multiple lines, but in reverse order. 

flex-flow:
This is a shorthand property for both the flex-direction and flex-wrap properties. 
  

.container {
  flex-flow: flex-direction || flex-wrap;
}

justify-content:
The justify-content property is used to align the flex items. 






 
 

.container {
  justify-content: flex-start | flex-end | center ... space-evenly;
} 

flex-start: aligns the flex items at the start of the container.
flex-end: aligns the flex items at the end of the container.
center: aligns the flex items at the center of the container.
space-between: display the flex items with space between the lines.
space-around: display the flex items with space around the lines.
space-evenly: display the flex items with equal space between the lines.

align-items:
The align-items property is used to align the flex items vertically. 



 


 

.container {
  align-items: flex-start | flex-end | center | stretch | baseline;
}

flex-start: aligns the flex items at the top of the container.
flex-end: aligns the flex items at the bottom of the container.
center: aligns the flex items in the middle of the container.
stretch: stretches the flex items to fill the container.
baseline: the flex items are aligned such as their baselines align

align-content:
The align-content property is used to align the flex lines when there is extra space in the cross-axis. This is similar to how justify-content aligns individual items within the main-axis. 


 

.container {
  align-content: flex-start | flex-end | center ... space-around;
}

flex-start: displays the flex lines at the start of the container
flex-end: displays the flex lines at the end of the container
center: display the flex lines in the middle of the container
stretch: stretches the flex lines to take up the remaining space
space-between: displays the flex lines with equal space between them
space-around: displays the flex lines with space around them

Live Demo:

Properties for the flex items
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order:
The order property controls the order in which they appear in the flex container. 


 

.item {
  order: integer; /* default is 0 */
} 

flex-grow:
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. If one of the children has a value of 2, the remaining space would take up twice as much space as the others. 


 

.item {
  flex-grow: number; /* default is 0 */
} 

flex-shrink:
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. 
 

.item {
  flex-shrink: number; /* default is 1 */
} 

flex-basis:
This property specifies the initial length of a flex item. 
 

.item {
  flex-basis: length | auto; /* default is auto */
} 

flex:
This is the shorthand for flex-grow, flex-shrink and flex-basis properties. 
 

.item {
  flex: none | flex-grow || flex-shrink || flex-basis;
} 

align-self:
This property specifies the alignment for the item inside the flexible container.  


 

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
} 

 Live Demo:

Image Comparison

Hi Folks, In this tutorial, you will learn how to create an image comparison effect with pure CSS and Javascript. With the help of this tutorial, you can create a create creative effect to compare the original and filtered image on mouse move.

Demo:

HTML:

First of all, you have to create a div#container containing another div#layer.

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

CSS:

* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

section {
    background: url(img-2.jpg);
}

#layer {
    background: url(img-1.jpg);
    border-left: 2px solid #000;
}

section,
#layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-position: center center ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Javascript:

var slide = document.getElementById('layer');
window.onmousemove = function (e) {
    var x = e.clientX;
    slide.style.left = x + 'px';
}

Demo:

Color Picker

Hi friends, In this post you will learn how to create a color picker tool with pure JavaScript. In this tool we will create a color palette dynamically with our defined custom colors and simply destroy it after selection of color. We will use the bootstrap framework for styling the tool. Let's do this:

Live example: https://jsfiddle.net/trickyui/4hm2wyep/

First of all you have to add bootstrap and google material icons libraries locally or through CDN.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

HTML

<div class="input-group">
     <input type="text" class="form-control">
     <div class="input-group-addon color-palette" data-id="colors">
         <i class="material-icons" data-id="cat_color">lens</i>
     </div>
</div>

CSS
For styling the tool you have to add some CSS for styling the tool:

.color-palette{
     position: relative;
}
 .color-palette .color-box {
     position: absolute;
     padding: 6px;
     right: 0px;
     top: 100%;
     z-index: 9;
     min-width: 270px;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     background-color: #ffffff;
     border-radius: 4px;
     border: 1px solid #f5f5f5;
}
 .color-palette .color-box > div {
     float: left;
     width: 30px;
     height: 30px;
     border: 3px solid #ffffff;
     border-radius: 50%;
     margin: 6px;
}


JavaScript

// Colors
var colors = ['#ef4438', '#e71f63', '#8f4098', '#65499d', '#4555a5', '#478fcc', '#38a3dc', '#0abbd3', '#009688', '#4dae4c', '#8ac147', '#cddc35', '#fde937', '#fbc015', '#f8981f', '#f0592b', '#afbdc4', '#607d8b', '#bdaaa4', '#795649', '#eeeded', '#9d9d9d', '#616161', '#202020'];

var elements = document.querySelectorAll('[data-id="cat_color"]');
elements.forEach(function (e) {
   e.addEventListener('click', function (ev) {
      if (document.querySelectorAll('.color-box').length >= 0) {
         document.querySelectorAll('.color-box').forEach(function (e) {
              e.remove();
         });
         var node = document.createElement("DIV");
         node.setAttribute('class', 'color-box');
         node.setAttribute('id', 'color_box');
         for (i = 0; i < colors.length; i++) {
             var item = document.createElement('DIV');
             item.setAttribute('class', 'color');
             item.setAttribute('style', 'background-color:' + colors[i]);
             item.setAttribute('onclick', 'setColor(this)');
             node.appendChild(item);
         }
         e.parentNode.appendChild(node);
      }
   });
});

// select the color from palette
function setColor(color) {
       color.parentNode.previousElementSibling.style.color = color.style.backgroundColor;
}

// remove the palette on document click
window.onload = function () {
   document.onclick = function (e) {
       var elem = document.getElementById('color_box');
       if (elem) {
           if (e.target.dataset.id !== 'cat_color' && e.target.id !== 'color_box') {
             document.getElementById('color_box').remove();
           }
       }
   }
}

For live example please go to this link: Live example: https://jsfiddle.net/trickyui/4hm2wyep/

Image slideshow with CSS and JavaScript

Hi friends, in this post you will learn how to create a images slideshow with pure CSS and javascript. To create the image slideshow, simply to add some images in your HTML page and show/hide them sequentially. You have to follow the steps and learn.

Live demo: https://jsfiddle.net/trickyui/kxobru5y/

HTML:

<div class="slideshow">
<div class="slide"><img src="images/img1.jpg"></div>
<div class="slide"><img src="images/img2.jpg"></div>
<div class="slide"><img src="images/img3.jpg"></div>
<div class="slide"><img src="images/img4.jpg"></div>
<a class="prev" id="prev">&#10094;</a>
<a class="next" id="next">&#10095;</a>
</div>


CSS:

.slideshow {
position: relative;
    margin: 0 auto;
    width: 500px;
}
.next, .prev {
cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.3);
}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.slide {
    display:none;
}


Javascript:

 document.getElementById("prev").addEventListener("click", function(){
slider(-1);
});
document.getElementById("next").addEventListener("click", function(){
slider(1);
});
var slideIndex = 1;
showSlides(slideIndex);

function slider(n) {
showSlides(slideIndex += n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}

Live demo: https://jsfiddle.net/trickyui/kxobru5y/

Speed test meter with CSS and Jquery

Hi friends, in this tutorial you will learn how to create a speed test meter (speedometer) with pure CSS and Jquery animations. A speedometer works on the basis of speed and angle calculations. So, in this tutorial we will calculate the angle of a meter pointer and animate it.

Live demo: https://jsfiddle.net/trickyui/jwj52wmh/

HTML: 

In this example, we used "bootstrap.min.css" (Bootstrap 4) for design and style the meter. You can follow us or create your own design and style.

1. First of all we created a meter.

2.  Set pointers inside the meter.

3. Set a needle inside the meter for showing the speed.

<div class="box"> <h2 class="mb-4 text-center">Speedometer</h2> <div class="meter position-relative"> <img src="assets/images/meter-bg.png" alt="" class="img-fluid"> <span class="num" id="num_1"></span> <span class="num" id="num_2"></span> <span class="num" id="num_3"></span> <span class="num" id="num_4"></span> <span class="num" id="num_5"></span> <span class="num" id="num_6"></span> <span class="num" id="num_7"></span> <img src="assets/images/meter-hand.png" alt="" class="meter-hand" id="hand"> </div> <div class="text-center mt-2"> <div class="speed"><span id="speed">53.2</span></div> <div class="unit">MBPS</div> </div> </div>

CSS:

html { font-size: 10px; } body { font-family: 'Montserrat', sans-serif; font-size: 1.4rem; line-height: 1.4; font-weight: 300; color: #656565; } .box { width: 500px; max-width: 90%; margin: 5rem auto; padding: 3rem; display: block; border-radius: 1.5rem; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 15.84px 0.16px rgba(35, 31, 32, 0.1); } .meter { width: 188px; margin: 30px auto 0; position: relative; } .meter-hand { position: absolute; left: 50%; bottom: 6px; margin-left: -44px; z-index: 1; transition: all 2s ease-in-out; transform-origin: 94% 48%; } .speed { font-size: 3.2rem; font-weight: 700; line-height: 1; } #speed { min-width: 100px; display: inline-block; } .unit { font-size: 2rem; font-weight: 500; color: #bbe697; } .meter .num { font-size: 1rem; font-weight: 600; position: absolute; } #num_1 { left: 25px; top: 80px; } #num_2 { left: 37px; top: 56px; } #num_3 { left: 55px; top: 35px; } #num_4 { left: 87px; top: 25px; } #num_5 { right: 55px; top: 35px; } #num_6 { right: 37px; top: 56px; } #num_7 { right: 25px; top: 80px; }

JQuery:

$(function() { var speed = $('#speed').text(); $('#hand').animate({ textIndent: 0 }, { step: function(now) { now = speed; $('.meter .num').each(function() { for (var i = 0; i <= 6; i++) { $('#num_' + (i + 1)).text(i * 30); } }) if ((now / 180) > 1) { var m = now / 180; $('.meter .num').each(function() { for (var i = 0; i <= 6; i++) { $('#num_' + (i + 1)).text(Math.round(i * 30 * m) * 2); } }) $(this).css('-webkit-transform', 'rotate(' + 90 + 'deg)'); } else { $(this).css('-webkit-transform', 'rotate(' + now + 'deg)'); } $('#speed').prop('Counter', 0).animate({ Counter: now }, { duration: 2000, easing: 'linear', step: function(now) { $('#speed').text(Math.round(now * 100) / 100); } }); }, duration: '1000' }, 'linear'); });

Live demo: https://jsfiddle.net/trickyui/jwj52wmh/