Sanwebcorner | Programming Blog

Html5 In-built Validation for Form fields without any validation code

Here we will see now how to set the validation for all form fields without any validation code means Validation without validation code. Yes it is called as a built in validation, It is available in html5. Now we will see one by one with live example. Below i list out some of the fields with validation please check out those examples. Mostly here we will use the patterns to validate the fields with the specific format and conditions. 

Html5 In-built Validation for Form fields

Validation Without Validation Code in Html5

Html5: Required

required is one of the attribute used to validate the input field should not be blank(empty), It should contain some value. If you are not entering any value to the particular input required field it displays the error messages like 'Please fill out this field'.

Code:
<form onsubmit="alert('Submitted.');return false;" action="" >
  Name:  <input type="text" name="name" required>
  <input type="submit" value="submit">
</form>

Live Example:
Name:



Html5 Name Field Validation:

Mostly the name or username condition is should be the character small letter or capital letter. So i validate this name field like to enter only the character no special character and numbers are allowed here. Some of the usernames contain number so you can modify the pattern here just add 0-9 in pattern. Almost this is the Html5 name validation.

Name validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="[a-zA-Z]+" value="" >          
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Email Field Validation:

Html5 Email validation is one of the important validation it is pre defined validation you just set the type="email" so the email validation done. No need to enter any email patterns here in Html5. check out the below live example.

Email validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="email" required="" >          
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Mobile Number Field Validation:

Most of the Html5 Mobile validation is should be number and digit restriction. Here i will validate the mobile number should be only numeric number and minlength=10 and maxlength=12. I think this is validation is enough to get real mobile number, If you want to add some condition please update the html5 pattern. see the live demo below to validate 
  
Mobile validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" minlength="10" maxlength="12" pattern="[0-9]+" name="mobile" required="">           
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Password Field Validation:

Html5 password validation is fully customization it is not a unique some of the people don't have any restriction for this password field. This password validation is totally different from different websites. here have a restriction at least  one capital letter and at least one small letter at least one number and  it should be 10 digit longer.

If you want one special character and one number and caps letter and small letter  AND min 8 character means you can use this pattern to validation : (?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$

Password validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="password" minlength="10"  pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$name="password" required="">           
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Date Field Validation:

Date validation in html5 is one of simple thing but it haves the different format Here i will used this format  DD.MM.YYYY . If you want different format means you can use the different html5 pattern. check the live example demo below for date field.

For example i given some pattern here
YYYY-MM-DD : [0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])
MM/DD/YYYY : (0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d
Date validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" placeholder="Format: DD.MM.YYYY">         
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Time Field Validation:

Here is the time validation using html5 inbuilt validation. You can use this time pattern for time validation. checkout the live example demo below to check the how the time validation working. If you want different time format please update the pattern .

Time validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}" placeholder="Format: HH:MM:SS">        
<input type="submit" value="submit">
 </form>

Live Demo



Html5 URL Field Validation:

This is url field html5 validation. This is predefined one, No need any of the validation pattern for this field only set the type="url" so it automatically check the validation for url. Check the below live example how the validation works for the url.
url validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="url" id="url" name="url" required>       
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Credit card Number Validation:

Credit card number validation in html5 with the help of pattern. This credit card number should be 13 to 16 digit numeric number to validate this using this html5 pattern [0-9]{13,16}. Check out the below example for credit card number validation.

credit card validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="[0-9]{13,16}" value=""  placeholder="Credit card No.">     
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Indian Postal Code (pin code)  Validation:

This is one of the validation to validate the postal code or pin code validation. The Indian postal code contains the 6 digit number and not start with 0. Here i validate the pin code should be 6 digits number and it should not be start with 0. If you want any updation in the postal code validation you can change the  html5 pattern according to your requirement. Please refer the demo below 

Postal code  validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="^[1-9][0-9]{5}$" value=""  placeholder="Postal Code">  
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Number Validation:

You can also validate numbers. Here is the validation is to accept numbers both decimal and without decimal numbers for example 5.8, 1500, 15,000 like that. check the below live example. you can change the  html5 patterns for validation according to your condition.
Numbers with or without decimals:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="[-+]?[0-9]*[.,]?[0-9]+" value=""  placeholder="Format: 7 or 7.9 or 7,9"> 
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Color Code Validation:

You also validate the color code, check the below  html5 pattern to validate color code and check the below live example  demo. I hope this will be very useful.
Color code  validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" value=""  placeholder="Format is #CCC or #CCCCCC">  
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Price format  Validation:

You can validate price also. Here the  html5 price validation should be allowed the price two digits after the decimal point. If you are entering more than 2 digits it won't accept the value. You will modify the patterns according to your validation. 
Price  validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="\d+(\.\d{2})?" value=""  placeholder="Price (Format: 5.00)">  
<input type="submit" value="submit">
 </form>

Live Demo



Html5 Domain format  Validation:


Here you can validate the domain name it should be a string with dot after the dot 2digit minimum condition set in the html5 pattern. check out he live example demo below
Domain validation code:
<form onsubmit="alert('Submitted.');return false;">          
<input type="text" required="" pattern="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$" value=""  placeholder="san.com">  
<input type="submit" value="submit">
 </form>

Live Demo
If you want to customize the error code means you can use the javascript to customize the form field validation error codes. 

Bounce Effect on hover the button using css and Html

Bounce Effect on hover the button is one of the simple css3 concept. When hover the button it bounces this effect purely done by using the css3 code. The below following code used to display the bounce effect


@keyframes bounce {
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateY(0);
-ms-transform:     translateY(0);
transform:         translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform:     translateY(-30px);
transform:         translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform:     translateY(-15px);
transform:         translateY(-15px)
}
}
span {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 180px;
  background-color: green;
  border-radius: 1%;
  line-height: 80px;
  text-align: center;
  text-transform: uppercase;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  color: white;
  font-weight:bold;
}
span:hover {
  cursor: pointer;
  animation-name: bounce;
  -moz-animation-name: bounce;
}

Here is the demo link. Check out the demo link to live preview of this example bounce effect. And also the option to download the code you can download and execute file.
I hope this example is very useful




<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Bounce Effect on Hover the button</title>
<style>
@keyframes bounce {
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateY(0);
-ms-transform:     translateY(0);
transform:         translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform:     translateY(-30px);
transform:         translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform:     translateY(-15px);
transform:         translateY(-15px)
}
}
span {
position: absolute;
top: 50%;
left: 50%;
height: 80px;
width: 180px;
background-color: green;
border-radius: 1%;
line-height: 80px;
text-align: center;
text-transform: uppercase;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
color: white;
font-weight:bold;
}
span:hover {
cursor: pointer;
animation-name: bounce;
-moz-animation-name: bounce;
}
</style>

</head>
<body>
<div class="wrapper">
<span class="bounce_button">Hover Me</span>
</div>

<h2><a href="http://sanwebcorner.com">www.sanwebcorner.com</a></h2>
</body>
</html>

On Hover Change text to image using simple css code.

Here will see how to create the concept like on hover the text display the image. The particular image shown from bottom to top slide effect. on mouse hover the text will hide and image will display with slide effect. on mouse out the image will hide and the text will display.

This is one of the simple concept it will done by using simple css code. Here is the example shows the concept. In this example the text his 'Hover Here' when you hover the text my tutorial logo will display. This types of concept will use for some place in websites.

Now will see how it works first the div called .c--anim-btn this div first we should set the height of the div to give overflow hidden for this div and then on over the div margin-top will give show the logo will visible particular place the text will be hide. I hope this example is useful.






<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 hover text animate in div</title>

<style>
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}

.c--anim-btn, .c-anim-btn {
transition: 0.3s;  
}

.c--anim-btn {
height: 64px;
font: normal normal 700 1.2em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;

}

.c-anim-btn{
margin-top: 0em;
}

.c--anim-btn:hover .c-anim-btn{
margin-top: -4em;
}
</style>

</head>
<body>
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
Hover Here
</span>
<span>
<a href="http://sanwebcorner.com"><img src="san-logo.png" style="    height: 35px;
margin-top: 15px;"></a>
</span>
</div>
<h2><a href="http://sanwebcorner.com">www.sanwebcorner.com</a></h2>
</body>
</html>

Horizontal Marquee News ticker using Html & Css

Horizontal Marquee News ticker is the one of the important thing in website pages. Today we will see how to create this simple News ticker. The Horizontal marquee is one of the method to display flash news scrolling horizontally. Every website needs this type of news ticker section to display flash news in their website.

Here is the different div i am using to display horizontally marquee news ticker. text1 div is to display the marquee text and .news span is the heading text for flash news. news div for overall width. This is very simple here i am using different colors you can change it by using simple css code. Below is the demo page and also have the download page visit the demo page to see the live demo for this example. I hope this simple concept really helpful.







<html>
<head>
<title> Horizontal Marquee News ticker using Html & Css </title>
<style>
.blue {
    background: #347fd0;
}

.news {
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
       width: 890px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 4px;
    padding: 1px;
    -webkit-user-select: none;
}

.news span {
    float: left;
    color: #fff;
    padding: 9px;
    position: relative;
    top: 1%;
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
    font: 16px 'Raleway', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    cursor: pointer;
}

.text1{

box-shadow:none !important;
    width: 750px;
}
</style>
</head>
<body>
<div class="news blue">
<span>Latest News</span><span class="text1" ><marquee>Marquee text.....</marquee></span>
</div>
</body>
</head>
</html>

How to Create Super Sliding tab using Css and Jquery

This is one of the interesting topic to create a tab section in different manner, Yes today we will see how to create super sliding tab menu with the help of simple css and Jquery. This example is very useful for developers because lot of website contains this types of tab section.

This types of super sliding tab section will reduce the webpage because it shows the specified contents for specified tab menu. When you click another tab menu it gives the relevant content and hides the previous content.

Here to hide and show the content we are using the jquery and java script and also article sliders. For layouts we are using the css code. This example is fully responsive in the mobile view it shows the different slide menu.

Here is the full css and html code for this example. You can download the code and use it for your website. And also have the live demo, check out the live demo to show the result of this example. I hope this is very useful.



Html code for Super Sliding Tab Menu:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sliding Tab Menu using css and jquery</title>
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}


ol,
ul {
list-style: none
}

table {
border-collapse: collapse;
border-spacing: 0
}
</style>

<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>
<h1 style="text-align:center;">Slider Tab:</h1>
</header>
<nav>
<ul>
<li class="gnav1">Tab Menu1</li>
<li class="gnav2">Tab Menu2</li>
<li class="gnav3">Tab Menu3</li>
<li class="gnav4">Tab Menu4</li>
</ul>
</nav>
<div class="contents" id="contents">
<div class="container">
<article id="page1" class="show top">
<section>
<h1>Tab1 Title</h1>
<p>This is tab one.</p>
</section>
</article>
<article id="page2">
<section>
<h1>Tab2 Title</h1>
<p>This is tab two.</p>
</section>
</article>
<article id="page3">
<section>
<h1>Tab3 Title</h1>
<p>This is tab three.</p>
</section>
</article>
<article id="page4">
<section>
<h1>Tab4 Title</h1>
<p>This is tab four.</p>
</section>
</article>
<article id="page5">
<section>
<h1>Tab5 Title</h1>
<p>This is tab five</p>
</section>
</article>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
$(document).ready(function(){
var item_num = $('nav li').length + 1;
var btn_state = true;

$('nav li').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});

$('nav li').on('click',function(){
if(btn_state){
btn_state = !btn_state;
$('nav li').removeClass('currentPage');
$(this).addClass('currentPage');

var i = $('nav li').index(this);
$('article').removeClass('show');
$('article').addClass('hide');
$('article').eq(i).addClass('show');

setTimeout(function(){
btn_state = !btn_state;
},500);
}
});
});
</script>
</body>
</html>

Css code for Super Sliding Tab Menu:

body, html {
  height: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  font-family: 'Cairo', sans-serif;
}



.wrapper {
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 8px;
  background: #f0f0f0;
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

header h1 {
    background: #FBB042;
    color: #FFF;
  padding: 1rem;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  position: relative;
  font-size:24px;
  z-index: 8;
}

nav {
  width: 100%;
    background: #FF9800;
}
@media (min-width: 769px) {
  nav {
    float: left;
    width: 127px;
    height: calc(100% - 4.8rem);
    border-radius: 0 0 0 8px;
  }
}
nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 769px) {
  nav ul {
    display: block;
  }
}
nav li {
  line-height: 3;
  padding: 0 1rem;
  border-right: 1px solid #f0f0f0;
  cursor: pointer;
  color: #fff;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  nav li {
    border-bottom: 1px solid #f0f0f0;
    border-right: none;
  }
}
nav li.hover {
  background: rgba(255, 255, 255, 0.2);
}
nav li.pressed {
  background: rgba(255, 255, 255, 0.7);
}
nav li.currentPage {
  background: rgba(255, 255, 255, 0.5);
}

#contents {
  box-sizing: border-box;
  position: absolute;
  height: calc(100% - 6rem);
  width: 100%;
  top: 7.8rem;
  left: 0;
  border-radius: 0 0 8px 0;
  overflow: hidden;
  background: -webkit-linear-gradient(315deg, #FF9800 0%, #FFCC7F 100%);
  background: linear-gradient(135deg, #FF9800 0%, #FFCC7F 100%);

}
@media (min-width: 769px) {
  #contents {
    height: calc(100% - 3rem);
    width: calc(100% - 8rem);
    top: 3rem;
    left: 128px;
  }
}

article {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 2rem;
   background: -webkit-linear-gradient(315deg, #FF9800 0%, #FFCC7F 100%);
  background: linear-gradient(135deg, #FF9800 0%, #FFCC7F 100%);

  top: 0;
  left: -100%;
}
article.hide {
  -webkit-transition: left 0s 0.5s;
  transition: left 0s 0.5s;
}
article:nth-of-type(1) {
  z-index: 5;
}
article:nth-of-type(2) {
  z-index: 4;
}
article:nth-of-type(3) {
  z-index: 3;
}
article:nth-of-type(4) {
  z-index: 2;
}
article:nth-of-type(5) {
  z-index: 1;
}
article.show {
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
  left: 0;
  z-index: 6;
}
article section {
  width: 100%;
  color: #fff;
}
article section h1 {
  font-size: 1.5rem;
  margin: 0 0 2rem 0;
}

Multi Layered image effect on mouse hover with the help of simple css

In this post will tell you how to create multi layered image effect on mouse hover with the help of simple css3 code. And it is also called as a multi layered 3d effect on mouse hover. We have create four different layers with different transform direction to show the layers. And we also set the different opacity of each layers. The first one opacity is 0.4 second one 0.6 and third one 0.8 and final and fourth layer opacity point is 1.0. So this layers view when hover the particular image in different opacity value.


Multi Layered image effect
 The below line shows the 3d layers

.container:hover img:nth-child(4){
transform: translate(160px, -160px);
opacity: 1;
}
.container:hover img:nth-child(3){
transform: translate(120px, -120px);
opacity: 0.8;
}
.container:hover img:nth-child(2){
transform: translate(80px, -80px);
opacity: 0.6;
}
.container:hover img:nth-child(1){
transform: translate(40px, -40px);
opacity: 0.4;
}

I hope this multi layered image 3D effect on mouse hover example will really helpful. It is also looking very nice to see. Here i provided the live demo, please check the live demo to see the multi layered effect. And here have the full code use this code to your projects.

Code for Multi-layered image effect on hover:

<!DOCTYPE html>
<html>
<head>
<title>Multi Layered Effect with CSS3</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.container{
position: relative;
width: 360px;
margin-top: 250px;
background: rgba(0, 0, 0, 1);
background-size: cover;
transform: rotate(-20deg) skew(30deg) scale(0.9);
transition: 0.5s;

}
.container img{
position:  absolute;
width: 300px;
height: 250px;
transition: 0.5s;
cursor:  pointer;
}
.container:hover img:nth-child(4){
transform: translate(160px, -160px);
opacity: 1;
}
.container:hover img:nth-child(3){
transform: translate(120px, -120px);
opacity: 0.8;
}
.container:hover img:nth-child(2){
transform: translate(80px, -80px);
opacity: 0.6;
}
.container:hover img:nth-child(1){
transform: translate(40px, -40px);
opacity: 0.4;
}
</style>


</head>
<body>
<div class="container">
<img src="display-popup-on-page-load.png">
<img src="display-popup-on-page-load.png">
<img src="display-popup-on-page-load.png">
<img src="display-popup-on-page-load.png">
</div>
</body>
</html>

How to Create Animated Background Gradient using simple css3 code

Here we will see how to create animated gradient background for webpage. In this example background changed in gradient color and changed in another gradient color. It turns the gradient when changing the background. The background animation continuously changed. This animation purely done by using the simple css3 code. 

How to animated Background Gradient:

This example changes the background colors you can change the background color based on the given css3 code in body section.
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);




Code for Animated Background Gradient :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Create Animated Background  Gradient using simple css3 </title>
<style>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
</style>
</head>
<body>
<h1>Animated Background  Gradient using simple css3</h1>
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
</body>
</html>

Responsive time-line Vertical Design using simple pure css

Today we will see how to create responsive timeline vertical design using simple css code. This design helps the user to view the post or particular information for that particular time. It is user friendly and easily understand the timeline contents. Here is the example contains the code you can download and use this code. Click the demo link below to visit the result for this example i hope this post is very useful.



Code for Responsive Vertical-Timeline Design:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Responsive Vertical Timeline</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Droid+Sans'>
<style>
body {
background-color: #FF9C07;
min-height: 100vh;
margin: 0;
font-family: 'Droid Sans', sans-serif;
}
body:before {
content: '';
position: fixed;
top: 0px;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 4px;
background-color: #fff;
}
body .entries {
width: calc(100% - 80px);
max-width: 800px;
margin: auto;
position: relative;
left: -5px;
}
body .entries .entry {
width: calc(50% - 80px);
float: left;
padding: 20px;
clear: both;
text-align: right;
}
body .entries .entry:not(:first-child) {
margin-top: -60px;
}
body .entries .entry .title {
font-size: 32px;
margin-bottom: 12px;
position: relative;
color: #fff;
}
body .entries .entry .title:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 4px solid #ffffff;
background-color: #FF9C07;
border-radius: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -73px;
z-index: 1000;
}
body .entries .entry .title.big:before {
width: 24px;
height: 24px;
-webkit-transform: translate(8px, -50%);
transform: translate(8px, -50%);
}
body .entries .entry .body {
color: #ffffff;
}
body .entries .entry .body p {
line-height: 1.4em;
}
body .entries .entry:nth-child(2n) {
text-align: left;
float: right;
}
body .entries .entry:nth-child(2n) .title:before {
left: -63px;
}
body .entries .entry:nth-child(2n) .title.big:before {
-webkit-transform: translate(-8px, -50%);
transform: translate(-8px, -50%);
}

</style>
</head>
<body>
<div class="entries">
<div class="entry">
<div class="title">2011</div>
<div class="body">
<p>How to create time line vertical design.</p>
</div>
</div>
<div class="entry">
<div class="title">2012</div>
<div class="body">
<p>time-line Vertical Design</p>
</div>
</div>
<div class="entry">
<div class="title big">2013</div>
<div class="body">
<p>How to time line pure css</p>
</div>
</div>
<div class="entry">
<div class="title">2014</div>
<div class="body">
<p>time line pure css - vertical design</p>
</div>
</div>
<div class="entry">
<div class="title">2015</div>
<div class="body">
<p>VAdipisci totam omnis cum et suscipit excepturi et excepturi. Inventore sequi sit ut aliquid. Modi aut dolores dignissimos.</p>
<p>Delectus facere officia consequuntur molestias deserunt illo. Placeat laudantium beatae natus excepturi ab nihil voluptates.</p>
</div>
</div>
<div class="entry">
<div class="title big">2016</div>
<div class="body">
<p>Impedit dolorem commodi explicabo fugit aut alias voluptatem. Magnam earum rerum quae dicta quibusdam aliquam ut.</p>
</div>
</div>
<div class="entry">
<div class="title">2017</div>
<div class="body">
<p>Responsive  time-line Vertical Design using simple pure css</p>
</div>
</div>
</div>
</body>
</html>

Simple Gradient Background for webpage using css3 code

Today we will see how to create simple gradient background using css3 code. The css3 code allows the linear-gradient attribute to display the gradient background. The below code is the one to display the background gradient.

 background-image: linear-gradient(to bottom right, green, orange);

 Here we can used to bottom right position, it displays gradient from top left to bottom right, You can use the different position like, to left, to right, to bottom, to top, etc... This simple background gradient you can use instead of plain background color for body or any sections. This is very very simple and easy to use, Here is the css code you can use it and also demo link check it out , I hope this is is useful.


Simple Gradient Background for webpage using css3 code

Code for Simple Gradient Background:


<!DOCTYPE html>
<html>
<title>Simple Background Gradient for Website</title>
<head>
<style>
body {
background-image: linear-gradient(to bottom right, green, orange);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:780px;
}
</style>
</head>
<body>
<center>
<h1>Simple Background Gradient for Website</h1>
<p>This linear gradient starts at top left. It starts green, transitioning to orange:</p>
<h1>Simple Background Gradient for Website</h1>
<h2>www.sanwebcorner.com</h2>
</center>
</body>
</html>

Underline Animation Effect on hover the text using simple css

Using css we can animated several things, This is one of the different and interesting thinking to animated text underline bar with gradient with animation effect. Now will see how to create underline animation effect on hover the underline text using css.

In this underline animation the underline bar background gradient moves the left to right with different gradient background colors. You can change the gradient background colors by changing the background color codes in the below example code

background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 

This types of effects is really different thinking. Here is the full code for how to do the underline animation effect on hover the text using the simple css, You can download the full code here to use this underline animation. And also having the demo links to display the result of this example. I hope this example really helpful.

Html code for Underline Animation Effect on hover the text :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Animation Effect on hover the text using simple css</title>
<link rel="stylesheet" href="css/style.css">  
</head>
<body>
<div class="page-example">
<a href="http://www.sanwebcorner.com" target="_blank">Underline Gradient Animation Effect<br/></a>
</div>
<br/> <br/>
<div class="page-example">
<a href="http://www.sanwebcorner.com" target="_blank">Underline Gradient Animation Effect on hover<br/></a>
<br/><br/>
</div>

<div class="page-example">
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
<br/><br/>
</div>
</body>
</html>

Css Code for Underline Animation Effect on hover the text :

html{

line-height: 1.15;
}

a {
color: transparent;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
vertical-align: bottom;
}
a:after {
background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 5px no-repeat;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 400%;
will-change: transform;
z-index: -1;
}
a:hover:after {
-webkit-animation: underline-gradient 6s linear infinite;
animation: underline-gradient 6s linear infinite;
background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}

@-webkit-keyframes underline-gradient {
0% {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-75%, 0%, 0);
transform: translate3d(-75%, 0%, 0);
}
}

@keyframes underline-gradient {
0% {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-75%, 0%, 0);
transform: translate3d(-75%, 0%, 0);
}
}
/* page layout */
html,
body {
height: 90%;
}


.page-example {
font-size: 3vw;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}