Monday, July 23, 2012

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

Media Queries
If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.
The Media Quries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:
  • width and height (of the browser window)
  • device width and height
  • orientation – for example is a phone in landscape or portrait mode?
  • resolution
If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout. 

Using Media Queries to create a stylesheet for phones 

A very simple two column layout
To make it easier to read on a phone I have decided to linearize the entire design making it all one column, and also to make the header area much smaller so readers don’t need to scroll past the header before getting to any content.
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax:
@media only screen and (max-device-width: 480px) {
} 
We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following: 
 Article Source :
http://www.blogger.com/blogger.g?blogID=6765360061367593262#editor/target=post;postID=6961805330681993328 


 

Wednesday, July 18, 2012

CSS3 Background Clip Property


Have you ever seen an element on a page with transparent borders? specifically to specify which portion of the box model should be utilized to display the background, it cuts off the background at the specified portion of the box. There are three values it can have. You wouldn't use them all at once, this is for convenience of displaying only

DEMO

Sunday, July 15, 2012

jQuery events Show, Hide

A simple example for Expand and Collapse using jQuery events Show, Hide
Copy the below code and try your self.....

CSS

<style type="text/css">
        .controller {background:#0F0F1E; padding:10px 0; text-align:center}
        .controller a {color:#fff; font-weight:bold; display:block; cursor:pointer}
        .box {padding:10px; text-align:center; border:1px dashed #0F0F1E}
</style>


Java Script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

   

    $(document).ready(function(){
        $(".box").hide();
        $(".down").hide();
        $(".up").click(function(){
                    $(".box").show(300);
                    $(".up").hide();
                    $(".down").show();
            });


        $(".down").click(function(){
                    $(".box").hide(300);
                    $(".up").show();
                    $(".down").hide();
            });
         
        });
</script>


HTML



        <img src="http://piclibrary.com/lib/football.jpg" width="700" />
    </div>

<div class="controller">
<a class="up">CLICK TO EXPAND </a>
<a class="down">CLICK TO COLLAPSE</a>
</div>


DEMO


Creative Website Designing

Varadesigns is Web Desinging Services from India. Offering wide range of creative services related to web like professional web designing, website development, e-commerce website development, CMS website development, website maintenance, website redesigning, corporate logo design, search engine optimization, multimedia introduction animations, from India.

Always have unique catchy ideas that will be different from others, and able to give the website a different look. Adding illustrations and graphic inputs to your website will make it more interesting and attractive.