Less CSS

The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. 

 Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Read more at : http://lesscss.org/ 

CSS Media query example

This example expresses that a certain style sheet (example.css) applies to devices of a certain media type (‘screen’) with certain feature (it must be a color screen).

Here the same media query written in an @import-rule in CSS:
@import url(color.css) screen and (color);

@media only screen and (max-device-width: 480px) {

}

 To target small devices we can use the following syntax:
Add alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules.

Linking a separate stylesheet using media queries
Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes, however if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules, use the following.

ADDING THE NEW STYLESHEET Adding a separate stylesheet using media queries to load this stylesheet after the current stylesheet and only if the max-width is less than 480 pixels.

-----------------------------
A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true.

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

I.e. these are identical:

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }


As are these:

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

-------------------

Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND.

Here is an example of several media queries in a comma-separated list using the an @media-rule in CSS:
@media screen and (color), projection and (color) { … }

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 

 

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

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