Showing 16 Result(s)
To most webmasters, the term CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is simply a horizontal drop down menu

Responsive dropdown menu with logo

To most webmasters, the term CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is simply a horizontal drop down menu created by way of SCSS code, rather than hard-coding it into html, or using a scripting language, such as JavaScript. The drop down menu part refers to the way a sub-menu item “drops down” from its parent menu item. In tutorial you are able how to create submenu

HTML

<nav class="navbar">
  <div class="logo"><img src="http://viewtechindia.com/wp-content/uploads/2019/10/final-logo.png" alt="LOGO"></div>
  <div class="push-left">
    <button id="menu-toggler" data-class="menu-active" class="hamburger">
      <span class="hamburger-line hamburger-line-top"></span>
      <span class="hamburger-line hamburger-line-middle"></span>
      <span class="hamburger-line hamburger-line-bottom"></span>
    </button>    
    <ul id="primary-menu" class="menu nav-menu">
      <li class="menu-item current-menu-item"><a class="nav__link"  href="#">Home</a></li>
      <li class="menu-item dropdown"><a class="nav__link"  href="#">About</a>
         <ul class="sub-nav" >
          <li><a class="sub-nav__link" href="#">link 1</a></li>
          <li><a class="sub-nav__link" href="#">link 2</a></li>
          <li><a class="sub-nav__link" href="#">link 3 - long link - long link - long link</a></li>
        </ul>
      </li>
      <li class="menu-item dropdown"><a class="nav__link"  href="#">Contact</a>
        <ul class = "sub-nav">
          <li><a class="sub-nav__link"  href="#">link 1</a></li>
          <li><a class="sub-nav__link"  href="#">link 2</a></li>
          <li><a class="sub-nav__link"  href="#">link 3 - long link - long link - long link</a></li>
        </ul>
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Blog</a>       
      </li>
    </ul>
</div>
</nav>

SCSS

$primary: #fff;
$secondary: #ccc;
$ternary: #272727;
$dark: #444444;
body {
  background: linear-gradient(90deg, rgba(18,40,182,1) 3%, rgba(0,212,255,1) 100%);
  color: $ternary;
  font-size: 14px;
  margin: 0;
}
.logo {
  max-width: 200px;
}
.navbar {
  align-items: center;
  background: $primary;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
  padding: 10px 50px;
}
.push-left {
  margin-left: auto;
}
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  outline: none;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 1000;
  @media screen and (max-width: 768px) {
    display: inline-block;
  }
  &-line {
    background: $ternary;
    height: 3px;
    position: absolute;
    left: 0;
    transition: all 0.2s ease-out;
    width: 100%;
    .hamburger:hover & {
      background: #777;
    }
    &-top {
      top: 3px;
    }
    .menu-active &-top {
      top: 50%;
      transform: rotate(45deg) translatey(-50%);
    }
    &-middle {
      top: 50%;
      transform: translatey(-50%);
    }
    .menu-active &-middle {
      left: 50%;
      opacity: 0;
      width: 0;
    }
    &-bottom {
      bottom: 3px;
    }
    .menu-active &-bottom {
      bottom: 50%;
      transform: rotate(-45deg) translatey(50%);
    }
  }
}
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 0.25s ease-in;
  @media screen and (max-width: 768px) {
    background: $primary;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translatey(-100%);
    text-align: center;
    .menu-active & {
      transform: translatey(0%);
      opacity: 1;
    }
  }
  .menu-item a {
    color: $dark;
    display: block;
    line-height: 30px;
    margin: 0px 10px;
    text-decoration: none;
    text-transform: uppercase;
    &:hover {
      color: lighten($dark, 20);
      text-decoration: underline;
    }
    @media screen and (max-width: 768px) {
      font-size: 20px;
      margin: 8px;
    }
  }
}
.sub-nav {
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  background-color: $primary;
  padding: 5px 5px;
  list-style: none;
  width: 230px;
  @media screen and (max-width: 768px) {
    position: relative;
    width: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }
}
.nav__link {
  &:hover + .sub-nav {
    display: block;
  }
}
.sub-nav {
  &:hover {
    display: block;
  }
}

JavaScript

$(document).ready(function() {
// Toggle menu on click
$("#menu-toggler").click(function() {
toggleBodyClass("menu-active");
});

function toggleBodyClass(className) {
document.body.classList.toggle(className);
}});

Responsive

How to apply design in table?

How to apply design in table?

The HTML tables allow web designer to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Example

<table class="rwd-table">
        <tbody>
            <tr>
                <th>Supplier Code</th>
                <th>Supplier Name</th>
                <th>Invoice Number</th>
                <th>Invoice Date</th>
                <th>Due Date</th>
                <th>Net Amount</th>
            </tr>
            <tr>
                <td data-th="Supplier Code"> UPS5005 </td>
                <td data-th="Supplier Name"> UPS </td>
                <td data-th="Invoice Number">  ASDF19218  </td>
                <td data-th="Invoice Date"> 06/25/2016 </td>
                <td data-th="Due Date">12/25/2016</td>
                <td data-th="Net Amount"> $8,322.12 </td>
            </tr>
            <tr>
                <td data-th="Supplier Code"> UPS3449</td>
                <td data-th="Supplier Name">UPS South Inc.</td>
                <td data-th="Invoice Number"> ASDF29301</td> 
                <td data-th="Due Date"> 12/25/2016</td>
                <td data-th="Net Amount"> $3,255.49</td>
                <td data-th="Net Amount"> $8,255.49</td>
            </tr>
            <tr>
                <td data-th="Supplier Code"> BOX5599</td>
                <td data-th="Supplier Name">BOX Pro West</td>
                <td data-th="Invoice Number">ASDF43000</td>
                <td data-th="Invoice Date"> 6/27/2016 </td>
                <td data-th="Due Date"> 12/25/2016</td>
                <td data-th="Net Amount"> $45,255.49</td>
            </tr>
            <tr>
                <td data-th="Supplier Code">PAN9999</td>
                <td data-th="Supplier Name">Pan Providers and Co.</td>
                <td data-th="Invoice Number">ASDF33433</td>
                <td data-th="Invoice Date">6/29/2016</td>
                <td data-th="Due Date"> 12/25/2016</td>
                <td data-th="Net Amount">$12,335.69</td>
            </tr>
        </tbody>
    </table>

This will produce the following result −

Supplier Code Supplier Name Invoice Number Invoice Date Due Date Net Amount
UPS5005 UPS ASDF19218 06/25/2016 12/25/2016 $8,322.12
UPS3449 UPS South Inc. ASDF29301 12/25/2016 $3,255.49 $8,255.49
BOX5599 BOX Pro West ASDF43000 6/27/2016 12/25/2016 $45,255.49
PAN9999 Pan Providers and Co. ASDF33433 6/29/2016 12/25/2016 $12,335.69

Tables Backgrounds

You can set table background using css style sheet

  • background-gcolor  − You can set background shade for complete table or just for one raw.
  • text − You can set text image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

@import 'https://fonts.googleapis.com/css?family=Open+Sans:600,700';

* {font-family: 'Open Sans', sans-serif;}

.rwd-table {
margin: auto;
min-width: 300px;
max-width: 100%;
border-collapse: collapse;
}

.rwd-table tr:first-child 
border-top: none;
background: #428bca;
color: #fff;


.rwd-table tr 
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;


.rwd-table tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}

.rwd-table th 

.rwd-table td 
display: block;


.rwd-table td:first-child {
margin-top: .5em;
}

.rwd-table td:last-child {
margin-bottom: .5em;
}

.rwd-table td:before 

.rwd-table th,
.rwd-table td {
text-align: left;
}

.rwd-table 
color: #333;
border-radius: .4em;
overflow: hidden;


.rwd-table tr {
border-color: #bfbfbf;
}

.rwd-table th,
.rwd-table td {
padding: .5em 1em;
}

This will produce the following result −

Fore responiive

Example

@media screen and (max-width: 601px) {
  .rwd-table tr:nth-child(2) {
    border-top: none;
  }
}
@media screen and (min-width: 600px) {
  .rwd-table tr:hover:not(:first-child) {
    background-color: #d8e7f3;
  }
  .rwd-table td:before 
    show: none;
  
  .rwd-table th,
  .rwd-table td 
    display: table-cell;
    padding: .25em .5em;
  
  .rwd-table th:first-child,
  .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 0;
  }
  .rwd-table th,
  .rwd-table td 
}

body {
background: #4B79A1;
background: -webkit-linear-gradient(to left, #4B79A1 , #283E51);
background: linear-gradient(to left, #4B79A1 , #283E51);        
}
h1 
.container 
  display: block;
  text-align: center;

h3 
  display: inline-block;
  position: relative;
  text-align: center;
  font-size: 1.5em;
  color: #cecece;

h3:before 
  content: "\25C0";
  position: absolute;
  left: -50px;
  -webkit-animation: leftRight 2s linear infinite;
  animation: leftRight 2s linear infinite;

h3:after 
@-webkit-keyframes leftRight {
  0%    { -webkit-transform: translateX(0)}
  25%   { -webkit-transform: translateX(-10px)}
  75%   { -webkit-transform: translateX(10px)}
  100%  { -webkit-transform: translateX(0)}
}
@keyframes leftRight {
  0%    
  25%   
  75%   
  100%  
}

This will produce the following result −

Responsive mega menu without bootstrap and with bootstrap

Responsive mega menu without bootstrap and with bootstrap

Mega menus are a type of drop-down, which seeks to overcome some of the usability drawbacks of traditional drop-downs. Hierarchy of your navigation is made visible all at once and the amount of clicking, searching, and navigating is reduced.

This module allows you to build mega menus by leveraging jQuery and the prevailing Bootstrap menu system. Megamenu takes a  menu that is 3 levels deep, and converts it into a categorized 3-level mega menu, which is placed into your site as a block.

Responsive and Mega menu

See the Pen
Responsive and Mega menu
by Arjun Amgain (@arjunamgain)
on CodePen.

 

Responsive Mega Menu – Navigation

See the Pen
Responsive Mega Menu – Navigation
by samir alley (@samiralley)
on CodePen.

Mega Menu Dropdowns with Foundation 5

See the Pen
Mega Menu Dropdowns with Foundation 5
by SitePoint (@SitePoint)
on CodePen.

Responsive Bootstrap mega menu with various content

See the Pen
Responsive Bootstrap mega menu
by Martin Stanek (@skywalkapps)
on CodePen.

How to make datepicker responsive?

How to make datepicker responsive?

In this tutorial, learn how to add datepicker to input field using Bootstrap. The short answer is to use the bootstrap-datepicker.js to create a text box with the date picker. The input box if contains the date picker will display the date picker when the user clicks on it.

The date picker adds the date picker to the input box which contains days, month and year to select. When you select the date from the date picker, it adds the selected date to the input box.

So, let’s start creating a date picker input box using Bootstrap with the below methods.

Simple Bootstrap datepicker example

See the Pen
Simple Bootstrap datepicker example
by Luís Cruz (@milz)
on CodePen.

Home Bootstrap Datepicker with popup

See the Pen
Bootstrap datepicker in modal
by Sinetheta (@Sinetheta)
on CodePen.

CodePen Home Bootstrap Datepicker Demo

See the Pen
Bootstrap Datepicker Demo
by Ryan Mulligan (@hexagoncircle)
on CodePen.

Bootstrap Datepicker – Inline

See the Pen
Bootstrap Datepicker – Inline
by alenii (@alenii)
on CodePen.

Date Picker Untuk Jadwal Penerbangan Travel Website

See the Pen
Date Picker Untuk Jadwal Penerbangan Travel Website
by Desain 360 (@desain360)
on CodePen.

Responsive vertical and horizontal drop down menu with submenu

Responsive vertical and horizontal drop down menu with submenu


CodePen Home CSS3 Responsive Menu Dropdown + Submenu width Logo

See the Pen
CSS3 Responsive Menu Dropdown + Submenu width Logo
by emre (@emredenx)
on CodePen.

Vertical icons sidebar navigation with tooltips

See the Pen
Vertical icons sidebar navigation with tooltips
by nikhil (@nikhil)
on CodePen.

CodePen Home vertical-menu-sub-menu

See the Pen
vertical-menu-sub-menu
by talvlila (@talvlila)
on CodePen.

Animated hamburger menu

See the Pen
Animated hamburger menu
by Sava Lazic (@savalazic)
on CodePen.

Responsive Menu Items

See the Pen
Responsive Menuitems
by Patrik Larsson (@Panilaon)
on CodePen.

See the Pen
US News University Connection Bootstrap Menu
by Justin (@justinramedia)
on CodePen.

CodePen Home Slick transparent overlay

See the Pen
Slick transparent overlay
by Todd Wheeler (@netniks)
on CodePen.

CodePen Home Fix after scroll bootstrap menu type 8

See the Pen
Fix after scroll bootstrap menu type 8
by Rabin Awal (@RetinaInc)
on CodePen.

CodePen Home Menu With Three Levels

See the Pen
Menu With Three Levels
by Fatma Mahmoud (@FatmaMahmoud)
on CodePen.

Bootstrap Menu for OnePage web

See the Pen
Bootstrap Menu for OnePage web
by Harun Kocaman (@webdoktoru)
on CodePen.

Dear designers, love your developers because they’ve learned display grid – and you’ve done it too

Depending on your journey as a designer, you may be used to the freedom that graphic media allows: to create overlaps/overlays or to elaborate compositions and grids that fill all the paper with pretty organized photos and texts. However, why is it so hard to build a web page with this same freedom? Fortunately the capacity to build these layouts have been improving and what’s best: it is so simple that you can start using it right now!

How the web layout works

All the options mentioned above make sense when applied on static medias where all copies will be the same, for example, books and magazines. But on the web things usually work differently: there are infinite device sizes, pages need to load quickly, while being accessible for screen readers and you need the developer’s ability to build everything that was drawn in Sketch or Photoshop, using the minimum possible amount of code so it can be reusable as much as possible.

Having this structure in mind, it is easy to mentally picture the largely-adopted 12/16-column grid in order to build responsive websites and define the transition from desktop to smartphone browsers. However, there are still big limitations (such as the fact that the HTML order directly interferes in the content visualization), resulting in a big and complex amount of code. There are some CSS frameworks that try to solve the grid problem, the most famous are: BootstrapFoundationFlexbox GridLost Grid. But let’s see the written code in these frameworks:

<div class="row">   <div class="col-xs-6">.col-xs-6</div>   <div class="col-xs-6">.col-xs-6</div>  </div>  <div class="row">   <div class="col-xs-8">.col-xs-8</div>   <div class="col-xs-4">.col-xs-4</div>  </div>  <div class="row">   <div class="col-xs-4">.col-xs-4</div>   <div class="col-xs-4">.col-xs-4</div>   <div class="col-xs-4">.col-xs-4</div>  </div>

In addition for having to import a considerable amount of code, these structures are usually unreadable and in practice there are always some exceptions that the framework can’t solve. This was a battle won by pure CSS.

Read Full Article

22+ Beautiful Typography, Transitions, and Animation

Beautiful text or typography animation will make your design look attractive.Now day text animation In web design, by CSS or J Scripts helps to give style to design including various effects in text or typography. here we are going to include best collection of text and typographic animation. it is save time and money or give prefect look of your website.

Text animation

See the Pen Text animation by Yoann (@yoannhel) on CodePen.


Shattering Text Animation

See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.


CSS3 Text Animation Effect

See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.


Colorful text animation

See the Pen #webdev series – Colorful text animation #updated by Hendry Sadrak (@hendrysadrak) on CodePen.


Title Text Animation

See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.


SVG Text Animation Using Stroke Offset Method

See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen.


Text Animation (SVG)

See the Pen Text Animation (SVG) by Rafael Kendy (@rafaelkendy) on CodePen.


Up Down Text Animation

See the Pen Text Animation by Siamon Hasan (@siamon123) on CodePen.


Rotating Text animation

See the Pen Rotating Text animation by Jason Weaver (@indyplanets) on CodePen.


SVG Text Animations

See the Pen SVG Text Animations by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.


CSS3 – SVG Text Animation

See the Pen CSS3 – SVG Text Animation by HIPE (@hipe) on CodePen.


Hello world split text animation

See the Pen Hello world split text animation by Kunuk Nykjær (@kunukn) on CodePen.


Intro Text Animation

See the Pen Intro Text Animation by Clement Girault (@clementGir) on CodePen.


Pure CSS Text Animation

See the Pen Pure CSS Text Animation by Robin Treur (@RobinTreur) on CodePen.


Particle text animation

See the Pen #webdev series – Particle text animation #updated by Hendry Sadrak (@hendrysadrak) on CodePen.


CSS3 Text Animation

See the Pen CSS3 Text Animation by Nate Wiley (@natewiley) on CodePen.


Text Animation Concept using Lettering.JS

See the Pen Text Animation Concept using Lettering.JS by Brian Gonzalez (@briangonzalez) on CodePen.


Digital Text Animations

See the Pen Digital Text Animations by Scott Tolinski (@stolinski) on CodePen.


Fade Text Animation

See the Pen Text Animation by Something Strange (@something-strange) on CodePen.


Magnetype Animation

See the Pen Magnetype by Bennett Feely (@bennettfeely) on CodePen.


Menu Indicator + ‘Transparent Text’

See the Pen Menu Indicator + ‘Transparent Text’ by James Nowland (@jnowland) on CodePen.


Left Right Text Animation In

See the Pen Text Animation In by Kameron Ahler (@kamtr0n) on CodePen.


22+ Fantastic Pure CSS Background Tutorials

In UI Development, the CSS background has most powerful option for handle HTML background . Specifically, the CSS Background describes how the use different – different background for each such block and its content is determined through styling instructions. The guidelines of the CSS background are described by the World Wide Web Consortium (W3C). Here you can learn some of background pattern how to create like Grid Lines, Patterns Library, Button Background, Skewed CSS Background, CSS Background Image’s Opacity, Blueprint Paper CSS Background, CSS Background Buttons with mixin, CSS background effect, CSS background animation 2, Diagonally Striped CSS Background, Slack CSS background pattern, Gaussian Blur, Hue Rotation Examples, RGB vs HSL, CSS Background Blend Modes

1. CSS Background Grid Lines

See the Pen CSS Background Grid Lines by Jason Delia (@jasonadelia) on CodePen.


2.CSS background change on scroll

See the Pen CSS background change on scroll by Giana (@giana) on CodePen.


3. CSS background patterns library

See the Pen CSS background patterns library by Avaz Bokiev (@samarkandiy) on CodePen.


4. CSS3 Button Background

See the Pen CSS3 Button Background by Tony Gaisser (@tgaisser) on CodePen.


5. Another Skewed CSS Background

See the Pen Another Skewed CSS Background by Matthew Craig (@mcraig218) on CodePen.


6. How to Change a CSS Background Image’s Opacity

See the Pen How to Change a CSS Background Image’s Opacity by Nicholas Cerminara (@ncerminara) on CodePen.


7. Zero-Element Blueprint Paper CSS Background

See the Pen Zero-Element Blueprint Paper CSS Background by Brant Holt (@brantholt) on CodePen.


8. CSS Background Buttons with mixin

See the Pen CSS Background Buttons with mixin by Jamie Coulter (@jcoulterdesign) on CodePen.


8. CSS background effect

See the Pen CSS background effect by turusuke (@turusuke) on CodePen.


8. Sépion CSS background animation 2

See the Pen Sépion CSS background animation 2 by Sépion (@Sepion) on CodePen.


9. Diagonally Striped CSS Background

See the Pen Diagonally Striped CSS Background by Allison (@allicarn) on CodePen.


10. Slack CSS background pattern

See the Pen Slack CSS background pattern by Marijke Luttekes (@MHLut) on CodePen.


11. Gausian Blur

See the Pen Gausian Blur by Jeremy Bierly (@jbierly) on CodePen.


12. Japanese cube

See the Pen Japanese cube by Tankred (@tankred) on CodePen.


13. Hue Rotation Examples, RGB vs HSL

See the Pen Hue Rotation Examples, RGB vs HSL by Noah Blon (@noahblon) on CodePen.


14. lattice – css background gradient

See the Pen lattice – css background gradient by youhe_ (@youhe_) on CodePen.


15. CSS Background Blend Modes

See the Pen CSS Background Blend Modes by Bryan Robinson (@brob) on CodePen.


16. CSS Background Animation

See the Pen CSS Background Animation by Nate Wiley (@natewiley) on CodePen.


17. Sweet!

See the Pen Responsive pure CSS background by Aitor Porro (@lastpotion) on CodePen.


18. Replicate CSS background-blend-mode with SVG filter

See the Pen Replicate CSS background-blend-mode with SVG filter by tsimenis (@tsimenis) on CodePen.


19. CSS background-blending-mode exploration

See the Pen CSS background-blending-mode exploration by Al Hertz (@alhertz) on CodePen.


20. CSS Background

See the Pen CSS Background by Revolution Graphics (@rgfx) on CodePen.


21. Retro Amiga Effect

See the Pen Retro Amiga Effect by Al Redpath (@geordieal) on CodePen.


22. Blue balls and fireflies.

See the Pen Blue balls and fireflies. by Sarah Cartwright (@SarahC) on CodePen.


25+ instruction animated loaders for designer or UI developer

A loader is the part of an operating system which is responsible for loading programs website content ,data, and libraries. It is one of the essential stages in the process of starting a program, as it places programs into memory and prepares them for execution. here you can find more then 25+ CSS, or CSS3, Java Scripts loader which is use preparatory tasks to prepare the executable for running.

1. CSS Loader

See the Pen CSS Loader by Glen Cheney (@Vestride) on CodePen.

2. CSS Loaders (WIP)

See the Pen Loaders (WIP) by Tania LD (@TaniaLD) on CodePen.


3. CSS Circular

See the Pen Loader #7 – Circular by Fabrizio Bianchi (@fbrz) on CodePen.


4. CSS/Js Running Dots

See the Pen Loader #1 – Running Dots by Fabrizio Bianchi (@fbrz) on CodePen.


5. CSS Loaders

See the Pen CSS Loaders by Rosa (@RRoberts) on CodePen.


6. Google Design Loader

See the Pen Google Design Loader by Grapes Theme (@grapestheme) on CodePen.


7. Pure CSS Loaders kit

See the Pen Pure CSS Loaders kit by Viduthalai Mani (@viduthalai1947) on CodePen.


8. Pure CSS Loader Ring of Light

See the Pen Pure CSS Loader Ring of Light by Mark Roseboom (@mroseboom) on CodePen.


9. CSS LOADERS

See the Pen CSS Loaders by ivanov (@vank0) on CodePen.


10. Rainbow Loader

See the Pen Rainbow Loader by Jack Rugile (@jackrugile) on CodePen.


11. Collection of animated loaders

See the Pen Collection of animated loaders by Ana Tudor (@thebabydino) on CodePen.


12. CSS3 Infinite Loader

See the Pen CSS3 Infinite Loader by Jonathan Silva (@jonathansilva) on CodePen.


13. Page Transition Loader

See the Pen Page Transition Loader by Arsen Zbidniakov (@ARS) on CodePen.


14. CSS Stairs Loader

See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.


16. CSS loader

See the Pen CSS loader by Adrian Guerrero Gonzlez (@a-guerrero) on CodePen.


17 Cog loading animation

See the Pen Cog loading animation by Jamie Coulter (@jcoulterdesign) on CodePen.


18. CSS3 WINDOW 10 Loader

See the Pen CSS3 Loader by Max (@MyXoToD) on CodePen.


18. One element four color loader

See the Pen One element four color loader by Tiffany Stoik (@tstoik) on CodePen.


19. loader

See the Pen loader by Gert Braeckman (@gertBraeckman) on CodePen.


20. PSD Logo Loader

See the Pen Logo Loader by PicturElements (@PicturElements) on CodePen.


21. Pure CSS loader #4

See the Pen Pure CSS loader #4 by Jerome Renders (@JeromeRenders) on CodePen.


22. Pure CSS Metro Loader Mixin

See the Pen Pure CSS Metro Loader Mixin by Connor (@CKH4) on CodePen.


23. Pure CSS Metro Loader Mixin

See the Pen Pure CSS Metro Loader Mixin by Connor (@CKH4) on CodePen.


24. Pure CSS Metro Loader Mixin

See the Pen Pure CSS Metro Loader Mixin by Connor (@CKH4) on CodePen.


25. SVG Loader Animation

See the Pen SVG Loader Animation by Paul DeCotiis (@decotii) on CodePen.


25. Long Live Ziggy Stardust

See the Pen Long Live Ziggy Stardust by Joe Harry (@woodwork) on CodePen.


28+ Best CSS/Java Script Graph/Chart with Examples

Now day Graph/Chart is growing fast in web industries, it is very popular to show data structure some is static and some is dynamics, A good presentation of information is essential in the modern web world. In this tutorials collection you can find 28+ Graph which is handle data such as Tables, pie charts, bar graphs, venn diagrams etc..

1. Animated Stats and graph

See the Pen Animated Stats and graph by Deep (@deep1808) on CodePen.


2. Responsive SVG graph

See the Pen Responsive SVG graph by Andrew Weeks (@meloncholy) on CodePen.


3. Draw SVG Graph

See the Pen Draw SVG Graph by Chris Gannon (@chrisgannon) on CodePen.


4. Morphing Graph

See the Pen Morphing Graph by Noahdecoco (@Noahdecoco) on CodePen.


5. CSV to Graph

See the Pen Bar Chart with JS by Jamiltz (@Jamiltz) on CodePen.


6. D3 multi-line graph with zoom

See the Pen d3 multi-line graph with zoom by Brant Wills (@brantwills) on CodePen.


7. Counter & Bar Graph Animation

See the Pen Counter & Bar Graph Animation by Joshua Ward (@joshua_ward) on CodePen.


8. d3.js force-directed graph with randomly-colored circles as nodes and accompany

See the Pen d3.js force-directed graph with randomly-colored circles as nodes and accompanying text labels by Amelia Power (@ames) on CodePen.


9. Graph

See the Pen Graph by John Brooks (@pupismyname) on CodePen.


10. CSS-Only Animated Bar Graph

See the Pen CSS-Only Animated Bar Graph by Steve Baletsa (@baletsa) on CodePen.


11. Force-directed Graph

See the Pen Force-directed Graph by Peter Deal (@DealPete) on CodePen.


12. Spinning Doughnut Graph w/ Labels

See the Pen Spinning Doughnut Graph w/ Labels by eprouver (@eprouver) on CodePen.


13. Multiple SVG graph animation

See the Pen Multiple SVG graph animation by Eric Grucza (@egrucza) on CodePen.


14. D3 Force Graph – Distance from Kevin Bacon

See the Pen D3 Force Graph – Kevin Bacon by Andrew (@AndrewGHC) on CodePen.


15. Line Graph with Raphael.js

See the Pen Dynamic Line Graph w/ Raphael.js by John Graham (@johnegraham2) on CodePen.


16. Elastic canvas graph with shadows

See the Pen Elastic canvas graph with shadows by Tomek Augustyn (@og2t) on CodePen.


17. Bowl of Trees

See the Pen Bowl of Trees by Katy DeCorah (@katydecorah) on CodePen.


18. css3 Exotic Pie Graph

See the Pen css3 Exotic Pie Graph by Wagner Moschini (@wagnermoschini) on CodePen.


19. gapminder-with-slider

See the Pen uswEx by Amelia Wattenberger (@wattenberger) on CodePen.


20. Bar Graphs for Skills

See the Pen Bar Graphs for Skills by Cody Reeves (@CR-Design) on CodePen.


21. Graph Train [2014]

See the Pen Graph Train [2014] by zb3 (@zb3) on CodePen.


22. Stacked Stream Graphs

See the Pen Stacked Stream Graphs by Kyung Yeol Kim (@chitacan) on CodePen.


23. Perpetual Pencil

See the Pen Perpetual Pencil by Chris Gannon (@chrisgannon) on CodePen.


24. spDme

See the Pen spDme by Shaman Tito (@shaman_tito) on CodePen.


25. Breadth First Search on Random Natural (Euclidean) Graph

See the Pen Breadth First Search on Random Natural (Euclidean) Graph by Robert Badea (@Owlree) on CodePen.


26. Bar Graph Animation – jQuery

See the Pen Bar Graph Animation – jQuery by Tim Ruby (@TimRuby) on CodePen.


27. D3.js Tree Layout chart

See the Pen D3.js Tree Layout chart by Augustus Yuan (@augbog) on CodePen.


28.3D graph #2 (pure CSS)

See the Pen 3D graph #2 (pure CSS) by Ana Tudor (@thebabydino) on CodePen.


10+ Best CSS/Java Script Tabs with Examples

Learn how to create tabs view with CSS and JavaScript? Dear learner in this collection we are going to include nice collection of tab view with HTML css3 or Java Script it is very helpful for web designer or UI Developer it is very easy to use just copy and paste and use it also you can modify according to you need

1. Responsive pure CSS tabs & accordion

See the Pen Responsive pure CSS tabs & accordion by mikestreety (@mikestreety) on CodePen.


2. Responsive CSS Tabs

See the Pen Responsive pure css tabs by Prakash (@imprakash) on CodePen.


3. Pure CSS Tabs

See the Pen Pure CSS Tabs by James Thomas Almond (@jamestalmond) on CodePen.


4. CSS Tabs Revisited

See the Pen CSS Tabs Revisited by Eric Sadowski (@ejsado) on CodePen.


5. CSS Rotate Animation Tabs

See the Pen CSS Tabs by White Wolf Wizard (@WhiteWolfWizard) on CodePen.


6. Pure CSS3 Tabs One side round corner

See the Pen Pure CSS3 Tabs by Nikul Lakhani (@niklakhani) on CodePen.


7. Pure CSS tabs with icon

See the Pen Pure CSS tabs by Chen Hui Jing (@huijing) on CodePen.


8. CSS tabs without JS

See the Pen CSS tabs without JS by .do {code} (@docode) on CodePen.


9.Pure CSS3 with text animation Tabs

See the Pen Pure css Tabs by Mahesh (@maheshambure21) on CodePen.


9.Tabs to Dropdown!

See the Pen Tabs to Dropdown by Vsevolod Samokhvalov (@justSAMfromNC) on CodePen.


10.D4 WC2015 Tabs

See the Pen D4 WC2015 Tabs by Gigi (@ggsimonsen) on CodePen.


35+ Completely CSS HTML Login Page Design Tutorials

Dear learner, In this collection you’ll learn login page design technique by using HTML and CSS code. The Code and design is very useful for beginners and medium level designer and developer you have seen lots of login page design such as LinkedIn, Facebook airbnab many more, if you are searching more attractive login page then you are right place, In this tutorials we are using codepen tools for your simplify to use cede, beacuse you can find CSS HTML JS at one place which is save your time and money, It is very useful just copy and paste and modify.

See the Pen Calm breeze login screen by Lewi Hussey (@Lewitje) on CodePen.

See the Pen Login/Logout animation concept by Nikolay Talanov (@suez) on CodePen.

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

See the Pen Sign-Up/Login Form by Eric (@ehermanson) on CodePen.

See the Pen Flat HTML5/CSS3 Login Form by Aigars Silkalns (@colorlib) on CodePen.

See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.

See the Pen Login to Everdwell by Kaushalya Mandaliya (@kman) on CodePen.

See the Pen Login Form by Miro Karilahti (@miroot) on CodePen.

See the Pen Login with flip 3d animation by Marius Balaj (@mariusbalaj) on CodePen.

See the Pen Login, Register form by Vikas Verma (@vikasverma93) on CodePen.

See the Pen Responsive Login Form by Dominic Francois (@DominicFrancois) on CodePen.

See the Pen Login & Register form by Ian Pirro (@ianpirro) on CodePen.

See the Pen Login/Sign-In by Genert Org (@GeBuOr) on CodePen.

See the Pen Material Login Form by Andy Tran (@andytran) on CodePen.

See the Pen login form day 001 from the 100 days UI by Mike Young (@miketricking) on CodePen.

See the Pen another login panel by Jens Motyka (@clein) on CodePen.

See the Pen Login & Sign Up Form Concept by Dany Santos (@THEORLAN2) on CodePen.

See the Pen Flickering Login by Jeff Thomas (@aecend) on CodePen.

See the Pen Sign up and login form by Charlie Yang (@mrtial) on CodePen.

See the Pen Login Form by Alex (@akwright) on CodePen.

See the Pen Signup/Signin page idea (2/2) by Nazanin Reyhani (@nazaninrey) on CodePen.

See the Pen login modal by Jens Motyka (@clein) on CodePen.

See the Pen Login Panel by Ravenous (@ravenous) on CodePen.

See the Pen Login form by Philipp Unger (@philipp-unger) on CodePen.

See the Pen Flat ui, flat ui kit, login panel by Mehmet mert (@mehmetmert) on CodePen.

See the Pen Login Modal – Pen a Day 06 by Ricky Eckhardt (@rickyeckhardt) on CodePen.

See the Pen Animated Login Switch by Oliver Knoblich (@oknoblich) on CodePen.

See the Pen CSS3 Animation Cloud and login form by Ravinthranath (@ravinthranath) on CodePen.

See the Pen Slide to reveal password by Nicolas Slatiner (@slatiner) on CodePen.

See the Pen BNB play by Alison Campbell (@aliscat) on CodePen.

See the Pen Glossy Transparent Background Form by Victor Tolosa (@victortolosa) on CodePen.

See the Pen Angular Material LogIn by Akshata Mohanty (@akshatamohanty) on CodePen.

See the Pen Color login page with Box shadow effects by Peeyush Gupta (@Peeyush200) on CodePen.

See the Pen Sign in & Sign up by Arash Ranjbaran (@ARash-r) on CodePen.

See the Pen Login / Register form by Surkov Dmitriy (@mast) on CodePen.

Pin It on Pinterest