Text Typing Animation effect using HTML & CSS | Without JavaScript

The text typing effect is one of the best animations using which we can make the texts to look letter-by-letter on the screen which seems like it is being typed as we watch. In this article, we will see how to implement the text typing animation / typewriter effect using HTML and CSS only. Blinking cursor is designed using "border-right" property and typing animation is performed by showing the characters to appear one after another. 

HTML

<div class="text-typing">
  <p>Welcome to codingflag&nbsp;</p>
</div>

CSS

body {
  margin:0px;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ddd;
}
.text-typing {
  padding:20px 30px;
  background:#f5f5f5;
  font-size:35px;
  font-family:monospace;
  border-radius:50px;
}
.text-typing p {
  margin:0px;
  white-space:nowrap;
  overflow:hidden;
  animation:typing 4s steps(22,end) forwards,
            blink 1s infinite;
}
@keyframes typing {
  0% { width:0% }
  100% { width:100% }
}
@keyframes blink {
  0%,100% {
    border-right:2px solid transparent;
  }
  50% {
    border-right:2px solid #222;
  }
}

Fade Text Animation using HTML, CSS & JavaScript

This article takes you through how to design fade text animation using HTML, CSS and JavaScript. Here, we have used JavaScript to convert text into individual span element and span element is styled using CSS.  Three properties i.e. "position" , "opacity" and "blur" are used to achieve the fading animation effect.

HTML

<div class="center">
  <div class="text-animation">
    CSS Fade Text Animation.
  </div>
</div>

CSS

body {
  background:#111;
  font-family:"Oswald",sans-serif;
}
.text-animation {
  color:#fff;
  opacity:0;
}
.text-animation span {
  position:relative;
  top:10px;
  left:10px;
  font-size:50px;
  font-weight:600;
  opacity:0;
  text-transform:uppercase;
  animation:fade 400ms ease-in-out forwards;
}
.center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
@keyframes fade {
  0% {
    top:10px;
    left:10px;
    filter:blur(15px);
    opacity:0;
  }
  50% {
    filter:blur(10px);
    opacity:0.9;
  }
  100% {
    top:0px;
    left:0px;
    filter:blur(0px);
    opacity:1;
  }  
}

JS

var wrapper = document.getElementsByClassName("text-animation")[0];
wrapper.style.opacity="1";
wrapper.innerHTML = wrapper.textContent.replace(/./g,"<span>$&</span>");

var spans = wrapper.getElementsByTagName("span");

for(var i=0;i<spans.length;i++){
  spans[i].style.animationDelay = i*80+"ms";
}  

Designing iOS Progress Bar Animation using HTML & CSS

In this article, we will see how to design iOS style progress bar using HTML and CSS only. To create iOS theme we have used "linear-gradient" and shadow is obtained using "background" and "skew".

HTML

<div class="container">
  <img src="https://goo.gl/jNcbdo" alt="ios_logo" />
  <div class="progress">
    <div class="progress-bar">
      <div class="shadow"></div>
    </div>
  </div>
</div>

CSS

html,body {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  background: rgb(246, 247, 248);
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.container img {
  margin-bottom: 15px;
  width: 75px;
}
.progress {
  position: relative;
  width: 24em;
  height: 0.25em;
  background-color: rgb(229, 233, 235);
}
.progress-bar {
  position: relative;
  height: 100%;
  background-image: -webkit-linear-gradient(to right, rgb(76, 217, 105), rgb(90, 200, 250), rgb(0, 132, 255), rgb(52, 170, 220), rgb(88, 86, 217), rgb(255, 45, 83));
  background-image: linear-gradient(to right, rgb(76, 217, 100), rgb(90, 200, 250), rgb(0, 122, 255), rgb(52, 170, 220), rgb(88, 86, 214), rgb(255, 45, 85));
  background-size: 24em 0.25em;
  border-radius: 10px;
  -moz-animation: iosProgress 6s ease-in;
  -webkit-animation: iosProgress 6s ease-in;
  animation: iosProgress 6s ease-in;
  animation-delay:.15s;
}
.shadow {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 50px;
  background-image: -webkit-linear-gradient(to bottom, rgb(232, 235, 235), transparent);
  background-image: linear-gradient(to bottom, rgb(232, 235, 235), transparent);
  transform: skew(50deg);
  transform-origin: 0 0;
}

/* Animations */
@-moz-keyframes iosProgress {
  0%, 100% {transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);}
  0% {width: 0;}
  100% {width: 100%;}
}
@-webkit-keyframes iosProgress {
  0%, 100% {transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);}
  0% {width: 0;}
  100% {width: 100%;}
}
@keyframes iosProgress {
  0%, 100% {transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);}
  0% {width: 0;}
  100% {width: 100%;}
}

Creating Animated Popup / Modal / Dialogue Box using HTML, CSS & JavaScript

Popup boxes / Modal are useful way of showing an important information to the website visitors. In this post we will see how to create an animated popup box with zoom in effect and close button using HTML, CSS and JavaScript.

HTML

<div class="popup center">
  <div class="icon">
    <i class="fa fa-check"></i>
  </div>
  <div class="title">
    Success!!
  </div>
  <div class="description">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nihil provident voluptatem nulla placeat
  </div>
  <div class="dismiss-btn">
    <button id="dismiss-popup-btn">
      Dismiss
    </button>
  </div>
</div>
<div class="center">
  <button id="open-popup-btn">
    Open Popup
  </button>
</div>

CSS

body {
  background:#ddd;
  font-family:"Raleway";
}
.center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.popup {
  width:350px;
  height:280px;
  padding:30px 20px;
  background:#f5f5f5;
  border-radius:10px;
  box-sizing:border-box;
  z-index:2;
  text-align:center;
  opacity:0;
  top:-200%;
  transform:translate(-50%,-50%) scale(0.5);
  transition: opacity 300ms ease-in-out,
              top 1000ms ease-in-out,
              transform 1000ms ease-in-out;
}
.popup.active {
  opacity:1;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  transition: transform 300ms cubic-bezier(0.18,0.89,0.43,1.19);
}
.popup .icon {
  margin:5px 0px;
  width:50px;
  height:50px;
  border:2px solid #34f234;
  text-align:center;
  display:inline-block;
  border-radius:50%;
  line-height:60px;
}
.popup .icon i.fa {
  font-size:30px;
  color:#34f234;
} 
.popup .title {
  margin:5px 0px;
  font-size:30px;
  font-weight:600;
}
.popup .description {
  color:#222;
  font-size:15px;
  padding:5px;
}
.popup .dismiss-btn {
  margin-top:15px;
}
.popup .dismiss-btn button {
  padding:10px 20px;
  background:#111;
  color:#f5f5f5;
  border:2px solid #111;
  font-size:16px;
  font-weight:600;
  outline:none;
  border-radius:10px;
  cursor:pointer;
  transition: all 300ms ease-in-out;
}
.popup .dismiss-btn button:hover {
  color:#111;
  background:#f5f5f5;
}
.popup > div {
  position:relative;
  top:10px;
  opacity:0;
}
.popup.active > div {
  top:0px;
  opacity:1;
}
.popup.active .icon {
  transition: all 300ms ease-in-out 250ms;
}
.popup.active .title {
  transition: all 300ms ease-in-out 300ms;
}
.popup.active .description {
  transition: all 300ms ease-in-out 350ms;
}
.popup.active .dismiss-btn {
  transition: all 300ms ease-in-out 400ms;
}

JS

document.getElementById("open-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.add("active");
});

document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.remove("active");
});

Design Animated Toggle Button using HTML & CSS

Most of the time we use JavaScript to make custom checkbox, toggle switch button etc.. But in this post we will see how to create a toggle switch button using HTML Checkbox element and CSS without using JavaScript . 

HTML

<div class="toggle-btns">
  <div class="toggle-btn">
    <input type="checkbox" id="toggle-btn-1">
    <label for="toggle-btn-1"></label>
  </div>
  <div class="toggle-btn red">
    <input type="checkbox" id="toggle-btn-2">
    <label for="toggle-btn-2"></label>
  </div>
</div>

CSS

div.toggle-btns {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
div.toggle-btn {
  margin:20px;
}
.toggle-btn label {
  positon:relative;
  display:block;
  width:100px;
  height:50px;
  background:#aaa;
  border-radius:30px;
  transition:all 300ms linear;
}

.toggle-btn label:before {
  position:relative;
  content:"";
  width:40px;
  height:40px;
  background:#ddd;
  display:block;
  border-radius:50%;
  top:5px;
  left:10px;
  transition:all 300ms linear;
}
.toggle-btn.red input:checked + label {
  background:orangered;
}
.toggle-btn input:checked + label {
  background:#00acee;
}
.toggle-btn input:checked + label:before {
  left:50px;
}

.toggle-btn input {
  display:none;
}

Create Sortable List With Draggable Items using HTML, CSS & JavaScript

In this post, we will use Sortable.js library to create sortable list with draggable items. This stuff can be useful for us while creating To-Do App, Music Player Apps etc.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js" integrity="sha512-ELgdXEUQM5x+vB2mycmnSCsiDZWQYXKwlzh9+p+Hff4f5LA+uf0w2pOp3j7UAuSAajxfEzmYZNOOLQuiotrt9Q==" crossorigin="anonymous"></script>

<div class="center">
  <div class="list-group" id="player-list">
    <div class="list-group-item">
      <div class="handle flex-center">
        <i class="fa fa-bars"></i>
      </div>
      <div class="thumbnail flex-center">
        <img src="https://picsum.photos/id/1004/100" alt="">
      </div>
      <div class="details">
        <h2>Perfect</h2>
        <p>Ed Sheeran</p>
      </div>
      <div class="btn flex-center">
        <i class="fa fa-heart"></i>
      </div>
    </div>
    <div class="list-group-item">
      <div class="handle flex-center">
        <i class="fa fa-bars"></i>
      </div>
      <div class="thumbnail flex-center">
        <img src="https://picsum.photos/id/1005/100" alt="">
      </div>
      <div class="details">
        <h2>Alone</h2>
        <p>Alan Walker</p>
      </div>
      <div class="btn flex-center">
        <i class="fa fa-heart"></i>
      </div>
    </div>
    <div class="list-group-item">
      <div class="handle flex-center">
        <i class="fa fa-bars"></i>
      </div>
      <div class="thumbnail flex-center">
        <img src="https://picsum.photos/id/1008/100" alt="">
      </div>
      <div class="details">
        <h2>Not Afraid</h2>
        <p>Eminem</p>
      </div>
      <div class="btn flex-center">
        <i class="fa fa-heart"></i>
      </div>
    </div>
    <div class="list-group-item">
      <div class="handle flex-center">
        <i class="fa fa-bars"></i>
      </div>
      <div class="thumbnail flex-center">
        <img src="https://picsum.photos/id/1009/100" alt="">
      </div>
      <div class="details">
        <h2>Hello</h2>
        <p>Adele</p>
      </div>
      <div class="btn flex-center">
        <i class="fa fa-heart"></i>
      </div>
    </div>
    <div class="list-group-item">
      <div class="handle flex-center">
        <i class="fa fa-bars"></i>
      </div>
      <div class="thumbnail flex-center">
        <img src="https://picsum.photos/id/1042/100" alt="">
      </div>
      <div class="details">
        <h2>In the end</h2>
        <p>Linkin Park</p>
      </div>
      <div class="btn flex-center">
        <i class="fa fa-heart"></i>
      </div>
    </div>
  </div>
</div>

CSS

* {
  margin:0px;
  padding:0px;
}
body {
  background:#ddd;
  font-family:"Raleway";
}
.center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.flex-center {
  display:flex;
  justify-content:center;
  align-items:center;
}
.list-group {
  width:450px;
  background:#f5f5f5;
}
.list-group .list-group-item {
  display:flex;
  border-bottom:1px solid #ccc;
}
.list-group .list-group-item > div {
  padding:15px 0px;
}
.list-group .list-group-item .handle {
  width:50px;
  background:#eee;
  border:1px solid #ddd;
  cursor:pointer;
}
.list-group .list-group-item .handle i.fa {
  color:#555;
} 
.list-group .list-group-item .handle:hover i.fa {
  color:#111;
}
.list-group .list-group-item .thumbnail {
  padding:0px 10px;
}
.list-group .list-group-item .thumbnail img {
  width:50px;
  border-radius:50%;
}
.list-group .list-group-item .details {
  flex:1;
}
.list-group .list-group-item .details h2 {
  font-size:16px;
  color:#111;
  padding:0px 5px 3px;
}
.list-group .list-group-item .details p {
  color:#555;
  font-size:14px;
  padding:0px 7px;
}
.list-group .list-group-item .btn {
  width:50px;
}
.list-group .list-group-item .btn i.fa {
  color:#aaa;
}
.list-group .list-group-item .btn:hover i.fa {
  color:#00acee;
}

JS

let player = document.getElementById("player-list");
new Sortable(player,{
  handle:'.handle',
  animation:200
})

Create Responsive Animated Fullscreen Navigation Menu using HTML, CSS & JavaScript

In this article, we will see how to create responsive animated fullscreen sidebar navigation menu using HTML, CSS & JavaScript.

HTML

<div class="navigation">
  <div class="ham-btn" onclick="showNav()">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="links">
    <div class="link">
      <a href="#">Home</a>
    </div>
    <div class="link">
      <a href="#">Dashboard</a>
    </div>
    <div class="link">
      <a href="#">About</a>
    </div>
    <div class="link">
      <a href="#">Contact</a>
    </div>
  </div>
</div>
<div class="content">
  <h1>This is title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur impedit quaerat repellendus, ipsa consequuntur eos voluptatibus excepturi officia ea magni, quisquam minus, dolorum rem at ducimus ratione dolore quas necessitatibus.</p>
</div>

CSS

body {
  margin:0px;
  font-family:"Open Sans",sans-serif;
}
.content {
  padding:20px;
  font-size:18px;
}
.navigation {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:#111;
  z-index:200;
  clip-path:circle(25px at calc(100% - 45px) 45px);
  transition:all 500ms ease-in-out;
}
.navigation.active {
  clip-path:circle(75%);
}
.navigation .ham-btn {
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
  border-radius:50%;
  cursor:pointer;
}
.navigation .ham-btn span {
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  width:50%;
  height:2px;
  background:#f5f5f5;
  transition:all 200ms ease-in-out;
}
.navigation .ham-btn span:nth-child(1) {
  top:30%;
}
.navigation .ham-btn span:nth-child(2) {
  top:50%;
}
.navigation .ham-btn span:nth-child(3) {
  top:70%;
}

.navigation.active .ham-btn span:nth-child(1) {
  top:50%;
  transform:translate(-50%,-50%) rotate(45deg);
}
.navigation.active .ham-btn span:nth-child(2) {
  display:none;
}
.navigation.active .ham-btn span:nth-child(3) {
  top:50%;
  transform:translate(-50%,-50%) rotate(-45deg);
}

.navigation .links {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.navigation .links a {
  position:relative;
  display:inline-block;
  margin:20px 0px;
  font-size:20px;
  font-weight:600;
  text-decoration:none;
  color:#f5f5f5;
  text-transform:uppercase;
  letter-spacing:5px;
}
.navigation .links a:after {
  content:"";
  position:absolute;
  left:0px;
  bottom:-5px;
  height:2px;
  width:0%;
  background:tomato;
  transition:all 300ms ease-in-out;
}
.navigation .links a:hover:after {
  width:100%;
}

JS

function showNav(){
  document.getElementsByClassName("navigation")[0].classList.toggle("active");
}

Create a Custom Range Slider using HTML, CSS & JavaScript

In this post we will see how we can create a custom range slider using HTML CSS & JavaScript. The moment we change thumb of slider, the it's range value is reflected in label.

HTML

<div class="slider">
  <input type="range" min="0" max="100" value="20" oninput="rangeValue.innerText = this.value">
  <p id="rangeValue">20</p>
</div>

CSS

body {
  background:#dce6ea;
}
.slider {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:250px;
  height:30px;
  padding:20px;
  background:#f5f5f5;
  border:1px solid #00acee;
  border-radius:20px;
  display:flex;
  align-items:center;
  box-shadow:0px 10px 20px rgba(0,0,0,0.15);
}
.slider p {
  font-size:18px;
  font-weight:600;
  font-family:sans-serif;
  padding-left:20px;
  color:#00acee;
}
.slider input[type="range"] {
  -webkit-appearance:none !important;
  width:200px;
  height:1px;
  background:#00acee;
  border:none;
  outline:none;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none !important;
  width:20px;
  height:20px;
  background:#f5f5f5;
  border:2px solid #00acee;
  border-radius:50%;
  cursor:pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
  background:#00acee;
}

Create a Simple Popup / Modal using HTML, CSS & JavaScript

Popup boxes / Modal are useful way of showing an important information to the website visitors. In this post we will see how to create a simple popup box with shadow overlay and close button using HTML, CSS and JavaScript.

HTML

<div class="popup" id="popup-1">
  <div class="overlay"></div>
  <div class="content">
    <div class="close-btn" onclick="togglePopup()">&times;</div>
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aspernatur laborum rem sed laudantium excepturi veritatis voluptatum architecto, dolore quaerat totam officiis nisi animi accusantium alias inventore nulla atque debitis.</p>
  </div>
</div>

<button onclick="togglePopup()">Show Popup</button>

CSS

.popup .overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.7);
  z-index:1;
  display:none;
}

.popup .content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:#fff;
  width:500px;
  height:250px;
  z-index:2;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  font-family:"Open Sans",sans-serif;
}

.popup .close-btn {
  cursor:pointer;
  position:absolute;
  right:20px;
  top:20px;
  width:30px;
  height:30px;
  background:#222;
  color:#fff;
  font-size:25px;
  font-weight:600;
  line-height:30px;
  text-align:center;
  border-radius:50%;
}

.popup.active .overlay {
  display:block;
}

.popup.active .content {
  transition:all 300ms ease-in-out;
  transform:translate(-50%,-50%) scale(1);
}

button {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:15px;
  font-size:18px;
  border:2px solid #222;
  color:#222;
  text-transform:uppercase;
  font-weight:600;
  background:#fff;
}

JS

function togglePopup(){
  document.getElementById("popup-1").classList.toggle("active");
}

Liquid Fill Animation Effect using HTML & CSS Without SVG

Liquid fill animation designed using HTML & CSS only. To do this, we have used only single div tag and fill effect is achieved using :before selector. Below is the preview of what we are going to design in this post.

HTML

<div class="box">
  Fill Effect
</div>

CSS

body {
  margin:0px;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Open Sans",sans-serif;
  background:#222;
}
.box {
  width:200px;
  height:200px;
  border:10px solid #ccc;
  border-radius:10px;
  line-height:200px;
  text-align:center;
  color:#ddd;
  font-size:25px;
  font-weight:600;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:#00acee;
  left:50%;
  transform:translateX(-50%);
  border-radius:40%;
  animation:fill 7s ease-in-out infinite;
  z-index:-1;
}
@keyframes fill {
  from {
    top:250px;
    transform:translateX(-50%) rotate(0deg);
  }
  to {
    top:-50px;
    transform:translateX(-50%) rotate(360deg);
  }
}

Create Custom Right Click / Context Menu using HTML, CSS & JavaScript

Web apps are using their own customized context menu to present users with relevant actions. In a web browser, when a right-click action is performed, contextmenu event gets fired. In order to deploy a customized context menu, we’ll need to prevent default behaviour, and then set up, trigger, and position our own menu.

HTML

<div id="context-menu">
  <div class="item">
    <i class="fa fa-cut"></i> Cut
  </div>
  <div class="item">
    <i class="fa fa-clone"></i> Copy
  </div>
  <div class="item">
    <i class="fa fa-paste"></i> Paste
  </div>
  <div class="item">
    <i class="fa fa-trash-o"></i> Delete
  </div>
  <hr>
  <div class="item">
    <i class="fa fa-refresh"></i> Reload
  </div>
  <div class="item">
    <i class="fa fa-times"></i> Exit
  </div>
</div>

CSS

body {
  margin:0px;
  font-family:"Open Sans",sans-serif;
}
#context-menu {
  position:fixed;
  z-index:10000;
  width:150px;
  background:#1b1a1a;
  border-radius:5px;
  transform:scale(0);
  transform-origin:top left;
}
#context-menu.active {
  transform:scale(1);
  transition:transform 300ms ease-in-out;
}
#context-menu .item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#context-menu .item:hover {
  background:#555;
}
#context-menu .item i {
  display:inline-block;
  margin-right:5px;
}
#context-menu hr {
  margin:2px 0px;
  border-color:#555;
}

JS

window.addEventListener("contextmenu",function(event){
  event.preventDefault();
  var contextElement = document.getElementById("context-menu");
  contextElement.style.top = event.offsetY + "px";
  contextElement.style.left = event.offsetX + "px";
  contextElement.classList.add("active");
});
window.addEventListener("click",function(){
  document.getElementById("context-menu").classList.remove("active");
});

Build Your Own Live Code Editor Using HTML, CSS & JavaScript

We will need three textarea tags which will correspond to the HTML, CSS and JavaScript code. To actually show the compiled code, we will also need an iframe which allows an html document to be inserted into an existing html page. 

HTML

<div class="code-area">
  <textarea id="htmlCode" placeholder="HTML Code" 
            oninput="showPreview()"></textarea>
  <textarea id="cssCode" placeholder="CSS Code" 
            oninput="showPreview()"></textarea>
  <textarea id="jsCode" placeholder="JavaScript Code" 
            oninput="showPreview()"></textarea>				
</div>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
}
.code-area {
  display: flex;
  flex-direction:column;
  width: 50%;
  border-right:1px solid #555;
}
.code-area textarea {
  resize: none;
  outline: none;
  width: 100%;
  height: 33.33%;
  font-size: 18px;
  padding: 10px;
}
.preview-area {
  width: 50%;
}
.preview-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

JS

function showPreview(){
  var htmlCode = document.getElementById("htmlCode").value;
  var cssCode = "";
  var jsCode = ""+document.getElementById("jsCode").value+"";
  var frame = document.getElementById("preview-window").contentWindow.document;
  frame.open();
  frame.write(htmlCode+cssCode+jsCode);
  frame.close();
}

Create Horizontal Tabs using HTML, CSS and JavaScript

This article tells us about how we can design tabs using HTML, CSS and JavaScript. Tab layout is divided into three elements i.e. tab header, active tab indicator, and tab body. The tabs are designed using flexbox.

HTML

<div class="tabs">
  <div class="tab-header">
    <div class="active">
      <i class="fa fa-code"></i> Code
    </div>
    <div>
      <i class="fa fa-pencil-square-o"></i> About
    </div>
    <div>
      <i class="fa fa-bar-chart"></i> Services
    </div>
    <div>
      <i class="fa fa-envelope-o"></i> Contact
    </div>
  </div>
  <div class="tab-indicator"></div>
  <div class="tab-body">
    <div class="active">
      <h2>This is code section</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
    </div>
    <div>
      <h2>This is about section</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
    </div>
    <div>
      <h2>This is services section</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
    </div>
    <div>
      <h2>This is contact section</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
    </div>
  </div>
</div>

CSS

body {
  background:#ddd;
  font-family:"Raleway";
}
.tabs {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:500px;
  height:250px;
  background:#f5f5f5;
  padding:20px 30px;
  overflow:hidden;
  border-radius:50px;
  box-shadow:5px 10px 5px #ccc;
}
.tabs .tab-header {
  height:60px;
  display:flex;
  align-items:center;
}
.tabs .tab-header > div {
  width:calc(100% / 4);
  text-align:center;
  color:#888;
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  text-transform:uppercase;
  outline:none;
}
.tabs .tab-header > div > i {
  display:block;
  margin-bottom:5px;
}
.tabs .tab-header > div.active {
  color:#00acee;
}
.tabs .tab-indicator {
  position:relative;
  width:calc(100% / 4);
  height:5px;
  background:#00acee;
  left:0px;
  border-radius:5px;
  transition:all 500ms ease-in-out;
}
.tabs .tab-body {
  position:relative;
  height:calc(100% - 60px);
  padding:10px 5px;
}
.tabs .tab-body > div {
  position:absolute;
  top:-200%;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 500ms ease-in-out 0ms,
    transform 500ms ease-in-out 0ms;
}
.tabs .tab-body > div.active {
  top:0px;
  opacity:1;
  transform:scale(1);
}

JS

let tabHeader = document.getElementsByClassName("tab-header")[0];
let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
let tabBody = document.getElementsByClassName("tab-body")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for(let i=0;i<tabsPane.length;i++){
  tabsPane[i].addEventListener("click",function(){
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabBody.getElementsByClassName("active")[0].classList.remove("active");
    tabBody.getElementsByTagName("div")[i].classList.add("active");
    
    tabIndicator.style.left = `calc(calc(100% / 4) * ${i})`;
  });
}

Preview Image Before Upload using HTML, CSS & JavaScript

There are many ways to achieve this. The most efficient way would be to use URL.createObjectURL() on the image file from your <input> element. Pass this URL to img.src to tell the browser to load the selected image.

HTML

<div class="center">
  <div class="form-input">
    <label for="file-ip-1">Upload Image</label>
    <input type="file" id="file-ip-1" accept="image/*" onchange="showPreview(event);">
    <div class="preview">
      <img id="file-ip-1-preview">
    </div>
  </div>
</div>

CSS

body {
  margin:0px;
  height:100vh;
  background:#333;
}
.center {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.form-input {
  width:250px;
  padding:20px;
  background:#fff;
  border:2px dashed #555;
}
.form-input input {
  display:none;
}
.form-input label {
  display:block;
  width:100%;
  height:50px;
  line-height:50px;
  text-align:center;
  background:#333;
  color:#fff;
  font-size:15px;
  font-family:"Open Sans",sans-serif;
  text-transform:Uppercase;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
}

.form-input img {
  width:100%;
  display:none;
  margin-top:10px;
}

javaScript

function showPreview(event){
  if(event.target.files.length > 0){
    var src = URL.createObjectURL(event.target.files[0]);
    var preview = document.getElementById("file-ip-1-preview");
    preview.src = src;
    preview.style.display = "block";
  }
}

Design Vertical Tabs using HTML, CSS & JavaScript

This article tells us about how we can design tabs using HTML, CSS and JavaScript. Tab layout is divided into three elements i.e. tab header, active tab indicator, and tab body. The tabs are designed using flexbox.

Building HTML Skeleton

<div class="tabs">
  <div class="tab-header">
    <div class="active">
      <i class="fa fa-code"></i> Code
    </div>
    <div>
      <i class="fa fa-pencil-square"></i> About
    </div>
    <div>
      <i class="fa fa-bar-chart"></i> Services
    </div>
    <div>
      <i class="fa fa-envelope"></i> Contact
    </div>
  </div>
  <div class="tab-indicator"></div>
  <div class="tab-content">
    
    <div class="active">
      <i class="fa fa-code"></i>
      <h2>This is code section</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis eum similique quisquam officiis neque, cumque dignissimos architecto nisi totam sapiente eos et illum laborum atque vero ea perferendis consectetur veritatis.</p>
    </div>
    
    <div>
      <i class="fa fa-pencil-square"></i>
      <h2>This is about section</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis eum similique quisquam officiis neque, cumque dignissimos architecto nisi totam sapiente eos et illum laborum atque vero ea perferendis consectetur veritatis.</p>
    </div>
    
    <div>
      <i class="fa fa-bar-chart"></i>
      <h2>This is services section</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis eum similique quisquam officiis neque, cumque dignissimos architecto nisi totam sapiente eos et illum laborum atque vero ea perferendis consectetur veritatis.</p>
    </div>
    
    <div>
      <i class="fa fa-envelope"></i>
      <h2>This is contact section</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis eum similique quisquam officiis neque, cumque dignissimos architecto nisi totam sapiente eos et illum laborum atque vero ea perferendis consectetur veritatis.</p>
    </div>
    
  </div>
</div>

Add a few lines of css to make it look nice and clean

* {
  box-sizing:border-box;
}
body {
  background:#ddd;
  font-family:"Raleway";
}
.tabs {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:680px;
  height:360px;
  padding:30px 20px;
  background:#f5f5f5;
  box-shadow:5px 5px 10px 5px #ccc;
  overflow:hidden;
}
.tabs .tab-header {
  float:left;
  width:180px;
  height:100%;
  border-right:1px solid #ccc;
  padding:50px 0px;
}
.tabs .tab-header > div {
  height:50px;
  line-height:50px;
  font-size:16px;
  font-weight:600;
  color:#888;
  cursor:pointer;
  padding-left:10px;
}
.tabs .tab-header > div:hover,
.tabs .tab-header > div.active {
  color:#00acee;
}
.tabs .tab-header div i {
  display:inline-block;
  margin-left:10px;
  margin-right:5px;
}
.tabs .tab-content {
  position:relative;
  height:100%;
  overflow:hidden;
}
.tabs .tab-content > div > i {
  display:inline-block;
  width:50px;
  height:50px;
  background:#555;
  color:#f5f5f5;
  font-size:25px;
  font-weight:600;
  text-align:center;
  line-height:50px;
  border-radius:50%;
}
.tabs .tab-content > div {
  position:absolute;
  text-align:center;
  padding:40px 20px;
  top:-200%;
  transition:all 500ms ease-in-out;
}
.tabs .tab-content > div.active {
  top:0px;
}

.tabs .tab-indicator {
  position:absolute;
  width:4px;
  height:50px;
  background:#00acee;
  left:198px;
  top:80px;
  transition:all 500ms ease-in-out;
}

Let's add functionality

function _class(name){
  return document.getElementsByClassName(name);
}

let tabPanes = _class("tab-header")[0].getElementsByTagName("div");

for(let i=0;i<tabPanes.length;i++){
  tabPanes[i].addEventListener("click",function(){
    _class("tab-header")[0].getElementsByClassName("active")[0].classList.remove("active");
    tabPanes[i].classList.add("active");
    
    _class("tab-indicator")[0].style.top = `calc(80px + ${i*50}px)`;
    
    _class("tab-content")[0].getElementsByClassName("active")[0].classList.remove("active");
    _class("tab-content")[0].getElementsByTagName("div")[i].classList.add("active");
    
  });
}