Top Ten Examples Of Website Using CSS3 Media Queries

CSS3 Media Queries allows us to add expression to media type to check for certain conditions and apply different stylesheet. Media queries has become a hot topic among designers today. Designers able to design different style for different media used by user to visit the website. As we all know, computer display, Ipad display, smartphone, Iphone, etc has different size in their screen. If we use the same style for different screen, we can imagine how difficult it is for user to read the content of the website. Here we will give you our top choice of websites that used css3 media queries to give you more understanding and idea on media queries.

When you visit these websites, you should try to change your browser width size, and you can see how beautifully these websites change their lay out.

1. About.com

The layout of the page will switch from 3 column, to 2 column and finally one column

aboutsf Top Ten Examples Of Website Using CSS3 Media Queries

Large size: 3 column

 

 


about2z Top Ten Examples Of Website Using CSS3 Media Queries about3h Top Ten Examples Of Website Using CSS3 Media Queries

Smaller size: 2 column              Smallest size: 1 column

2.Sasquatch Festival

When you resize your browser, the image will also resize and when the browser width around 480px, the layout will change

sasquatch Top Ten Examples Of Website Using CSS3 Media Queries to 1 columnsasquatch2 Top Ten Examples Of Website Using CSS3 Media Queries sasquatch3 Top Ten Examples Of Website Using CSS3 Media Queries

3. Sweet Hat Club

Besides its colorful page, Sweet Hat Club has its beautiful layout changing when the media screen size different. When you resize your browser, notice that the left column disappear and finally only one column left

sweett Top Ten Examples Of Website Using CSS3 Media Queries sweet2z Top Ten Examples Of Website Using CSS3 Media Queries sweet3 Top Ten Examples Of Website Using CSS3 Media Queries

 

4. Yiibu

When you resize the browser width, the images on its page will also resize and on its smallest size, only one column left

yiibu Top Ten Examples Of Website Using CSS3 Media Queries yiibu2 Top Ten Examples Of Website Using CSS3 Media Queries yiibu3 Top Ten Examples Of Website Using CSS3 Media Queries

5. Thinkvitamin

The layout will switch to 2 column and the top navigation will change to more simple menu. On its smallest size, Thinkvitamin left with one column only and the logo will be moved to the middle and the navigation appears with different style

thinkvitamin1 Top Ten Examples Of Website Using CSS3 Media Queries thinkvitamin2 Top Ten Examples Of Website Using CSS3 Media Queries thinkvitamin3 Top Ten Examples Of Website Using CSS3 Media Queries

6. Lapse

What I really love from Lapse is its purple color and of course its layout. The images will resize as you resize your browser width. Only one column left on its smaller size.

lapse Top Ten Examples Of Website Using CSS3 Media Queries lapse2 Top Ten Examples Of Website Using CSS3 Media Queries lapse3 Top Ten Examples Of Website Using CSS3 Media Queries

 

7. AlsaCreations

Alsacreations has a large header image on its large size and disappear on its smaller size. You should notice its big changing on its smallest size, the layout turn into a simple but elegant layout. I love the way they manage their main menu.

alsacreations Top Ten Examples Of Website Using CSS3 Media Queries alsacreations2 Top Ten Examples Of Website Using CSS3 Media Queries alsacreations3 Top Ten Examples Of Website Using CSS3 Media Queries

 

8. Alistapart – Article Example

This is an article example page of Alistapart, still with their unique style. On its smaller size you will notice that the images of people will resize to suit its screen width. Take a look at the navigation, when you on its smallest size, the navigation on the left will disappear and moved to the top.

alistapart Top Ten Examples Of Website Using CSS3 Media Queries alistapart2 Top Ten Examples Of Website Using CSS3 Media Queries alistapart3 Top Ten Examples Of Website Using CSS3 Media Queries

 

9. David & Goliath

The layout of David & Goliath will switch from 3 column to 2 column on its smaller size and finally left with one column only.

davidgoliath Top Ten Examples Of Website Using CSS3 Media Queries davidgoliath2 Top Ten Examples Of Website Using CSS3 Media Queries davidgoliath3 Top Ten Examples Of Website Using CSS3 Media Queries

 

10. Tee Gallery

The images of t-shirt will resize as you resize the browser and switch to 3 column on its smaller size. Teegalery left with 2 column on its smallest size.

teey Top Ten Examples Of Website Using CSS3 Media Queries tee2 Top Ten Examples Of Website Using CSS3 Media Queries tee3 Top Ten Examples Of Website Using CSS3 Media Queries

 

Today people use many kind of devices to access website, so it is necessary to create web design which will be appropriate to user’s screen device. Css3 media queries will allow us to use different stylesheet for different screen size. There are some good detail tutorial out there which will give you a pretty good basic understanding on media queries. Take a loot at these pages:

I tried media queries on one of my website but it is not perfect yet. Visit dosenjaga.eepis-its.edu and change your browser to 480px width and you’ll see the layout will change.

 

Related Posts:

    4 Responses to Top Ten Examples Of Website Using CSS3 Media Queries

    1. [...] and iPhone Simulator To Test Your Websites Tweet A couple days ago I tried to implement css media queries on one of my website. The scenario is, when the size of the screen is less than 480 pixels, my [...]

    2. [...] contoh lainnya dapat dilihat disini http://kangtanto.com/web-2/top-ten-examples-of-website-using-css3-media-queries Tweet Be Sociable, Share! TweetRelated Posts:Top Ten Examples Of Website Using [...]

    3. [...] Beberapa contoh lainnya dapat dilihat disini http://kangtanto.com/web-2/top-ten-examples-of-website-using-css3-media-queries [...]

    4. [...] contoh lainnya dapat dilihat disini http://kangtanto.com/web-2/top-ten-examples-of-website-using-css3-media-queries  sumber :http://kangtanto.com/web-2/responsive-design-solusi-desain-web-yang-fleksibel [...]

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>