Advanced Level HTML5 Tutorial Series | CSS3 Animation

-

Comments

Post a Comment

Popular posts from this blog

CSS Techniques – Absolute Horizontal And Vertical Centering In CSS

-
Image
We’ve all seen  margin: 0 auto;  for horizontal centering, but  margin: auto; has refused to work for vertical centering…  until now!   But actually (spoiler alert!). I’m not the pioneer of this method, and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a  particular article . There,  Simon  linked to this  jsFiddle  that blew every other method out of the water (the same method was also mentioned by  Priit  in the comments). Researching further, I had to use very specific keywords to find  some   other   sources  for this method.  ADVANTAGES: Cross-browser (including IE8-10) No special markup, minimal styles Responsive with percentages and min-/max- Use one class to center any content Centered regardless of padding (without  box-sizing !) Blocks can easi...
Read more

Cascade Style Sheet: Responsive Navigation Menu

-
Previously I wrote a tutorial on a way to create a mobile navigation for responsive style, currently I've discovered a replacement technique to provide a responsive menu while not having to use Javascript. It uses clean and linguistics HTML5 markup. The menu is aligned left, center or right. in contrast to the previous tutorial wherever it's clicked to toggle, this menu toggles on hover that is a lot of user friendly. It additionally has associate indicator to indicate the active/current menu item. It works on all mobile and desktop browsers together with web Explorer!
Read more

Animated Notification bubble icon with CSS3 keyframe animation

-
HTML <ul> <li><a href="">Dashboard</a></li> <li><a href="">Friends</a></li> <li> <a href="">Message <span>9</span> </a> </li> <li><a href="">Games</a></li> <li><a href="">Settings</a></li> </ul> CSS .animating{ animation: animate 1s cubic-bezier(0,1,1,0); } @keyframes animate{ from { transform: scale(1); } to { transform: scale(1.7); } } jQuery var counterValue = parseInt($('.bubble').html()); // Get the current bubble value function removeAnimation(){ setTimeout(function() { $('.bubble').removeClass('animating') }, 1000); } $('#decrease').on('click',function(){ counterValue--; // decrement $('.bubble').html(counterValue).addClass('animating'); // anima...
Read more