Responsive Website Design Tutorial: Using Media Queries

-

Comments

Post a Comment

Popular posts from this blog

The latest trend in user interface: Flat Design

-
Image
Flat User Interface Design is a design language currently used in the creation of various graphical user interfaces. The  flat design  refers to a style of interface design which removes any stylistic design choices that gives the three dimensional effect and hence is focused upon the minimal use of simple elements,  flat colors and typography . The designers might refer this since it allows them to make the interface designs more streamlined and efficient. Designing Language Is Responsive It is easier to convey information while looking for visual appearance and approach. This designing language makes it is easy to create an interface which is responsive to various browsers in various devices. With lesser design elements, a  website will load faster and can be resized  easily and still have a sharp appearance in high definition screens. This designing language represents smaller data footprints which have a significant effect on the performance. ...
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

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