Responsive Website Design Tutorial: Using Media Queries

-

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

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

CSS3 Modal Window Popups – sliding forms with fancybox effect

-
Image
Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to  test results (domo)  and understand how it was made.  read more… HTML First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.   read more…
Read more