WebBugs

Thursday 17 July 2014

Push Sliding Menu Using CSS

I just tried my hands on creating a sliding push menu using css.

Keeping this really simple, I have just prepared basic demos for left and right sliding and push menus.

Left Sidebar

HTML Markup

   
<div id="wrapper">
 /*
 "chkController" is used to control the sliding of the navigation menu.
 This will be hidden
 */
 <input type="checkbox" name="chkController" id="chkController" />
 
 /* Your navigation menu goes here */
 <ul id="nav">
  <li>...</li>
 </ul>
 
 /* Site contents goes here */
 <div id="main">
  
  /* This is the label for the hidden checkbox "chkController" */
  <label id="lblController" for="chkController">
   Click Me
  </label>
 </div>
</div>

CSS

   
    
/* Positing the left menu */
#nav{
 margin:0px;
 width:150px;
 height: 500px;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
}

/* Hiding the checkbox */
#chkController{
 display:none;
}

/*
Here goes the CSS to slide the menu,
move the main container by 150px so that left menu is visible.
*/
#chkController:checked ~ #main {
 transform: translateX(150px);
 -ms-transform: translateX(150px);
 -webkit-transform: translateX(150px);
}

Right Sidebar

HTML Markup remains the same as the markup for left sidebar.

CSS

   
    
/* Positing the right menu */
#nav{
 margin:0px;
 width:150px;
 height: 500px;
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
}

/* Hiding the checkbox */
#chkController{
 display:none;
}

/*
Here goes the CSS to slide the menu,
move the main container by 150px so that left menu is visible.
*/
#chkController:checked ~ #main {
 transform: translateX(-150px);
 -ms-transform: translateX(-150px);
 -webkit-transform: translateX(-150px);
}

You can download the demo here.

P.S. : These demos uses CSS3, this example is not supported by IE. Thanks for having a look :)

Friday 17 January 2014

Smooth animated scroll for internal links using jQuery

Have a lot of internal links on the page? Annoyed of jumping to position by using a and # ?

How about adding a small jQuery code to have a smooth scrolling and create a better effect on the visitors web experience.

jQuery has an animate function that can animate various elements including the scroll.

We can use internal links to jump to various positions on the web page using the below code

    
<a href="#myid">Go to My Div<a/>
<div id="myid">My Div<div/>

The problem with the above stated code is, this will jump to a postion, which does not create a good web experience and the visitor may lose track of the position on the page.

Below is a small jQuery code that will fetch all the anchors [a tag] of the page and add a smooth scroll effect when the user clicks on the anchor and scroll to the different position on the web page and visiton can also keep track on where on page is it positioned

    
$(function(){
 /* Fetch all the anchors having internal links */
 /* bing a click event */
 $("a[href^='#']").click(function(e){
  /* Stop the default action of the link */
  e.preventDefault();
  
  /* Get the target from the link */
  var target = this.hash;
  
  $target = $(target);
  
  $("html, body").animate({ scrollTop: $target.offset().top }, 700,function(){
   window.location.hash = target;
  });
 });
});

Demo

Home | About Us | Contact Us

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor augue, suscipit nec egestas non, consectetur sit amet velit. Morbi adipiscing dolor id ante interdum tristique. Praesent volutpat risus sem, at lobortis massa consequat ut. Cras leo diam, blandit non tellus id, porttitor lacinia metus. In semper suscipit nisl, quis tempus est auctor sed. Sed a convallis felis, laoreet feugiat elit. Pellentesque faucibus ipsum vel erat aliquam laoreet. Quisque fringilla gravida orci. Etiam sodales dolor at molestie dignissim. Donec laoreet vestibulum est non ultrices.

Aenean interdum egestas erat ac hendrerit. Vivamus at vestibulum neque, nec ullamcorper mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae bibendum nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris molestie mattis nulla, eu pharetra nulla mollis posuere. Quisque vestibulum leo eget consequat sagittis. Donec vestibulum imperdiet nisi nec imperdiet. Integer cursus justo nec elementum malesuada. Aliquam tellus odio, faucibus nec tristique nec, mattis eu lorem. Mauris hendrerit pharetra massa eu elementum. In mattis volutpat pulvinar. Duis diam nisl, tincidunt non diam in, vehicula adipiscing massa.

Integer scelerisque nibh ut magna iaculis, sit amet ultrices risus varius. Sed ac congue nisl. Aliquam erat volutpat. Morbi eget cursus erat. Duis volutpat dolor malesuada dignissim congue. Proin dictum quam volutpat iaculis elementum. Aenean sapien magna, rutrum id imperdiet vitae, mattis at quam. In vitae convallis arcu, sed tristique mi. Duis quis ultricies augue. Cras massa erat, iaculis nec sollicitudin vitae, tempus sed metus. Phasellus auctor, lacus in facilisis congue, dui neque bibendum diam, quis pulvinar lorem velit vel odio.

Top

About Us

Top

Contact Us

Top

You can download the demo here.

Saturday 14 December 2013

CSS Gallery

Tired of javascript for creating galleries? How about trying your hands on using CSS for creating galleries with some awesome effect.

I am glad to show what I did.

Lets start with the basic example for fade animation. Keeping it simple I am adding only script needed to animate.

Demo 1

Img 1

Img 2

Img 3

Img 4

Img 5

Img 6

HTML Markup

   
<div class="cb-main">
 <div class="cb-slideshow">
  <div>Img 1</div>
  <div>Img 2</div>
  <div>Img 3</div>
  <div>Img 4</div>
  <div>Img 5</div>
  <div>Img 6</div>
 </div>
</div>

CSS

   
    
/* Set animation for each image */
.cb-slideshow div {
 -webkit-animation: imageAnimation 30s linear infinite 0s;
}

/* Setting background image and delay , example */
.cb-slideshow div:nth-child(1) { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSo_-tkpRIGoyp3QnAYAVlhFXCC-R8Ani6eN4Qyf9RTkfoHhS5mSsvSh3_MBzhGutC-updYhyVNoM0obxBRy_cwfpTm-7OLOyums7dspEZ_hW2Pra7kx9tJn7K5a3wZ1YN3C6kxT6yDY/s1600/1.jpg) 
}
.cb-slideshow div:nth-child(2) { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9LKwYc3CjCTMjohNlA-mpF6Hj7LbvR2w0JlybQQ-Kjt8BhpCQnq_QkVrjE_suoY-IhBFCTxCxbSR-Q-V7YDMpWNFSmI_yXvZL7G65g38ayuqBZN7RivbIwjsop7IDQRwhJ7zu0SBUUI/s1600/2.jpg);
 -webkit-animation-delay: 6s;
}

/* Defining keyframe */
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
 0% { opacity: 0;
 -webkit-animation-timing-function: ease-in; }
 8% { opacity: 1;
   -webkit-animation-timing-function: ease-out; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}

Now with a slightest change in the above example we can create another effects

Demo 2

Img 1

Img 2

Img 3

Img 4

Img 5

Img 6

CSS

   
/* Making changes in the keyframe animation in DEMO 1 */
@-webkit-keyframes imageAnimation { 
 0% { opacity: 0;
  -webkit-transform: scale(1);
  -webkit-animation-timing-function: ease-in;
 }
 8% { opacity: 1;
  -webkit-transform: scale(1.5);
   -webkit-animation-timing-function: ease-out; 
 }
 17% { opacity: 1;
  -webkit-transform: scale(1.5); 
 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}

Demo 3

Img 1

Img 2

Img 3

Img 4

Img 5

Img 6

CSS

   
/* Making changes in the keyframe animation in DEMO 1 */
@-webkit-keyframes imageAnimation { 
 0% { opacity: 0;
 -webkit-animation-timing-function: ease-in; }
 8% { opacity: 1;
   -webkit-animation-timing-function: ease-out; }
 17% { opacity: 1;
 -webkit-transform: scale(1); }
 25% { opacity: 0 }
 100% { opacity: 0 ;
 -webkit-transform: scale(10);
 }
}

Now lets add navigation for the gallery

Demo 4

HTML Markup

   
<ul class="slides">
 <input type="radio" name="radio-btn" id="img-1" checked />
 <li class="slide-container">
  <div class="slide">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSo_-tkpRIGoyp3QnAYAVlhFXCC-R8Ani6eN4Qyf9RTkfoHhS5mSsvSh3_MBzhGutC-updYhyVNoM0obxBRy_cwfpTm-7OLOyums7dspEZ_hW2Pra7kx9tJn7K5a3wZ1YN3C6kxT6yDY/s1600/1.jpg" />
  </div>
 </li>

 <input type="radio" name="radio-btn" id="img-2" />
 <li class="slide-container">
  <div class="slide">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9LKwYc3CjCTMjohNlA-mpF6Hj7LbvR2w0JlybQQ-Kjt8BhpCQnq_QkVrjE_suoY-IhBFCTxCxbSR-Q-V7YDMpWNFSmI_yXvZL7G65g38ayuqBZN7RivbIwjsop7IDQRwhJ7zu0SBUUI/s1600/2.jpg" />
  </div>
 </li>
</ul>

<li class="nav-dots">
  <label for="img-1" class="nav-dot" id="img-dot-1"></label>
  <label for="img-2" class="nav-dot" id="img-dot-2"></label>
</li>

'slides' act as the main container for the gallery

radio button is used for the navigation, the li below radio button currently checked is displayed

'nav-dots' is the container for the navigation buttons. Each label when clicked checks the reference radio as specified by 'for' attribute.

CSS

   
/* By default transforming the image to rotate 360deg and scale to 0 */
.slide {
 transform: rotate(360deg) scale(0);
}

/* When navigation dot is clicked, rotating image to 0 deg and scaling it to 1  */
input:checked + .slide-container  .slide {
 transform: rotate(0deg) scale(1);
}

Making a slight change in DEMO 4, we can create a new animation effect.

Demo 5

CSS

   
/* By default transforming the image to scale to 0 */
.slide {
 transform: scale(0);
}

/* When navigation dot is clicked, scaling it to 1  */
input:checked + .slide-container  .slide {
 transform: scale(1);
}

One more change in DEMO 4, and yet another animation effect.

Demo 6

CSS

   
/* By default transforming the image to rotateZ by -10deg */
.slide {
  transform: rotateZ(-10deg);
}

/* When navigation dot is clicked, rotateZ to 0deg  */
input:checked + .slide-container  .slide {
 transform: rotateZ(0);
}

You can download the demo here.

P.S. : These demos uses CSS3, this example is not supported by IE, will update the post with the work around. Thanks for having a look :)

Friday 18 October 2013

CSS Flip Animation

Hi there! Its been a while I have posted anything, but I find CSS animations a kind of fun

So in this example I just want to show you the beauty of CSS, just setting few properties we can create a flip effect.

Below is the basic HTML used to create the flip effect

   
<div class="main-container">
 <div class="inner_container">
  <div class="front" style="background-image:url(images/1.jpg)"></div>
  <div class="back" style="background-image:url(images/2.jpg)"></div>
 </div>
</div>

main-container is the parent container in which all the other elements will be placed. We will have to add the perspective property for this element, this will define how the 3D element will be displayed.

inner_container is the container where we set the two containers which acts as a front and back of the flip effect. This is the container which fill actually flip and provide the effect.

front is the front side of the flip, back is the back side of the flip, front and back sides will be placed on top of each other with the property "backface-visibility" as "hidden" so that the side which is at the back side will be hidden.

Below is the CSS for the flip effect

   
/* Setting background image for the example */
.front-image{
 background-image:url(images/1.jpg);
}

.back-image{
 background-image:url(images/2.jpg);
}

.front-image-sq{
 background-image:url(images/1.jpg);
}

.back-image-sq{
 background-image:url(images/2.jpg);
}

/* Setting perspective for the main container for the 1st and 2nd flip example */
.main-container, .main-container1 {
 perspective: 1000;
 -webkit-perspective: 1000;
 -moz-perspective: 1000;
 -o-perspective: 1000;
}

/* Flip the inner container when it is hovered */
.main-container:hover .inner_container, .main-container.hover .inner_container {
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
}

/* Setting the height and width for the 1st and 2nd flip example */
.main-container, .front, .back, .main-container1, .front1, .back1{
 width: 210px;
 height: 314px;
}

/* Setting the transition properties and timings */
.inner_container, .inner_container1{
 transition: 0.9s;
 -webkit-transition: 0.9s;
 -moz-transition: 0.9s;
 -o-transition: 0.9s;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 position: relative;
}

/* hide back of pane during swap */
.front, .back, .front1, .back1{
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;

 position: absolute;
 top: 0;
 left: 0;
}

/* back, initially hidden pane */
.back {
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
}

.back1
{
 transform: rotateY(180deg) rotate(180deg);
 -webkit-transform: rotateY(180deg) rotate(180deg);
 -moz-transform: rotateY(180deg) rotate(180deg);
 -o-transform: rotateY(180deg) rotate(180deg);
}

/* flip the pane when hovered */
.main-container1:hover .inner_container1, .main-container1.hover .inner_container1 {
 transform: rotateX(-180deg);
 -webkit-transform: rotateX(-180deg);
 -moz-transform: rotateX(-180deg);
 -o-transform: rotateX(-180deg);
}

.main-container1 .inner_container1 {
 transform-origin: 100% 157px; /* half of height */
 -webkit-transform-origin: 100% 157px; /* half of height */
 -moz-transform-origin: 100% 157px; /* half of height */
 -o-transform-origin: 100% 157px; /* half of height */
}

/* Setting height, width and perspective for main container */
.main-container2, .main-container3
{
 width: 200px;
 height: 200px;
 -webkit-perspective: 850px;
 -moz-perspective: 850px;
 -o-perspective: 850px;
 perspective: 850px;

}

/*  Setting the position and transition property for 3rd and 4th flip demo */
.inner_container2, .inner_container3
{
 margin: 0;
 width: 200px;
 height: 200px;
 position: absolute;

 -webkit-transition: -webkit-transform 1s;
 -moz-transition: -moz-transform 1s;
 -o-transition: -o-transform 1s;
 transition: transform 1s;

 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

/* Setting positionfor front and back side for 3rd and 4th animation */
.front2, .back2, .front3, .back3{
 width: 200px;
 height: 200px;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 position: absolute;
}
/* flip the pane when hovered demo 3 */
.back2
{
 transform: rotate3d(2,4,0,180deg);
 -webkit-transform: rotate3d(2,4,0,180deg);
 -moz-transform: rotate3d(2,4,0,180deg);
 -o-transform: rotate3d(2,4,0,180deg);
}
.main-container2:hover .inner_container2, .main-container2.hover .inner_container2 {
 transform: rotate3d(2,4,0,180deg);
 -webkit-transform: rotate3d(2,4,0,180deg);
 -moz-transform: rotate3d(2,4,0,180deg);
 -o-transform: rotate3d(2,4,0,180deg);
}

/* flip the pane when hovered demo 4 */
.back3
{
 transform:  rotate3d(4,2,0,180deg);
 -webkit-transform:  rotate3d(4,2,0,180deg);
 -moz-transform:  rotate3d(4,2,0,180deg);
 -o-transform:  rotate3d(4,2,0,180deg);
}
.main-container3:hover .inner_container3, .main-container3.hover .inner_container3 {
 transform:  rotate3d(4,2,0,180deg);
 -webkit-transform:  rotate3d(4,2,0,180deg);
 -moz-transform:  rotate3d(4,2,0,180deg);
 -o-transform:  rotate3d(4,2,0,180deg);
}

Please hover the images to view the flip effect.

Demo 1

Demo 2

Demo 3

Demo 4

You can download the demo here.

P.S. : This was just a quick glance over some of the cool effects that can be done using CSS Transformations. This example is not supported by IE, will update the post with the work around.

Monday 23 September 2013

Convert image to grayscale using CSS Filters

To start off, I just came across the image graystyle using css and found it quite interesting, so thought of a share.

This example shows how one can roll over gray style and coloured image on mouse hover magically only using CSS.

One more thing to highlight in this is, CSS Filters are part of CSS3 if I am not mistaken and might not work in the browsers not supporting CSS3, but I guess we as developers can always find alternatives.

Here is a simple code snippet to demonstrate the above example

 
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>#grayscale");
    -webkit-filter: grayscale(0%);
}

svg image {
    transition: all .6s ease;
}

svg image:hover {
    opacity: 0;
}

You can download the demo file here