CSS3 box-flex Property

Define two flexible p elements. If the parent box has a total width of 300px, #p1 will have a width of 100px, and #p2 will have a width of 200px

<div>
<p id="p1">Hello</p>
<p id="p2">Ha ha</p>
</div>

CSS

div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
width:300px;
border:1px solid black;
}

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;

}


For live

http://jsfiddle.net/92wKY/

10 Things You Should Know About the Crop Tool in Photoshop cc

While the Crop Tool is one of Photoshop’s most-basic tools, you might find that there is more to this tool than you might know. I will explain 10 useful things about the Crop Tool that you might not already know. 

1. Crop guide overlay

There are several Crop Guide Overlays you can choose from in Photoshop. You can see them once you start using the Crop Tool and you can cycle through them by pressing O. The available overlays are:

• Rule of thirds
• Grid
• Diagonal
• Triangle
• Golden Ratio
• Golden Spiral

2. Change crop orientation

You will find it difficult to rotate your Crop area more than 90 degrees in Photoshop. In case you want to keep the aspect ratio and size of your crop and just want to change its orientation you should press X. This way you can easily switch between landscape and portrait orientations.

3. Hide cropped area

If you want to hide the cropped areas completely, press H. You can also change the Crop Shield Opacityand Color from the Options Bar.

4. Classic crop mode

For those users who prefer the traditional way of using the Crop Tool it is possible to switch to the Classic Mode by pressing P. When using the Crop Tool in Classic Mode you will move the Crop Rectangle around and the image will stay in one place in the background. On the contrary in Normal Mode you will be moving the image around behind the static Crop rectangle.

5. Use front image

You can use this option to match the size and resolution of two documents. You have to first open both documents and choose the one that you want to use as the reference. Next, you need to select the Crop Tool and from the pop-up in the Options Bar select Front Image or press I. This will record the size and resolution of this document. Next you can switch to another document and the Crop Tool will keep the size and resolution settings referenced from the other image.

6. Ways of accepting crop

There are several ways to do most things in Photoshop. This is also true about accepting crops. You can use any of these techniques to accept your crop:

• Press Enter
• Double click in the crop area
• Click on the commit icon in the option bar
• Context menu > crop
• Main menu > crop

7. Perspective crop tool

If you want to correct keystone distortion in your images, you should use the Perspective Crop Tool. You have to specify the 4 corners of the plane you wish to straighten and press Enter when ready. If you want to do keystone distortion correction without cropping, you can also use the Auto Upright feature under theLens Correction tab in the Camera Raw Filter.

8. Non-destructive cropping

The best way to make sure you don’t lose any details when using the Crop Tool is to uncheck the Delete Cropped Pixels option in the Options Bar. Alternatively you can also turn your layer(s) into Smart Object(s), which will allow you to keep the cropped details even if the Delete Cropped Pixels option is checked.

9. Extend canvas with crop tool

While most people know the Crop Tool as a means of trimming a photo, some users might not know that you can also use it to expand your canvas, as well. All you need to do is to drag the Crop Rectanglecontrol points outside the canvas. In case you have a Background Layer this feature will fill in the new canvas area with your currently selected Background color. In case you don’t have a Background Layer, Photoshop will create transparent pixels while increasing the canvas.

10. Straight photo

You can also use the Crop Tool to straighten your photographs. All you need to do is to hold down Command/Ctrl and click and drag to draw a line indicating the horizon of the photo. You can also use any vertical straight lines to align your image to.

use target="_blank"

Anchor links may have a target attribute which controls what happens when that link is clicked. One of the possible values of that attribute is  _blank,  which tells the browser to open a new window ( or tab if that's the user's preference ) when that link is clicked.

This used to be "invalid" in HTML ( maybe only XHTML? ) but people used it anyway since it worked. It's now perfectly valid in HTML5. But are there good reasons to do so?

When you use target="_blank"

A bad reason: Because you like it that way.

Like it or not, target="_blank" is a change in default behavior. links opening within the same page is the default behavior ( as if the link had target="_self" on it ).

A bad reason: Just because you want user to never leave your page.

A bad reason: "Internal" links and "External" links are different.

A bad reason: The links is to a PDF

A bad reason: My client wants it that way.

A good reason: The user is working on something on the page, that might be lost if the current page changed.

<form>have target="_blank" too. It's a uncommon use case.

When To Use The Button Element

You use it when, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. 
It's not too bad though, let's figure it out.

It look like this :-
<button>Do something</button>
What the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link ( an <a href="#"></a> ) elements.

The <button> element, by itself can't do that.

Button is a Form Element

<form>

    <input type="submit" value="submit">

</form>

A <button> element in a <form>, by default, behaves identically to that submit input above.

<form>

    <button>Submit</button>

    <button type="reset">Reset</button>

</form>

Button can have content

<button>

  <img src="xyz.png" alt="submit">

  Submit

</button>

<button> feels better anyway

Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words,  when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.

Multiple background images in css3

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Note that the values for each background image are comma separated. The background-repeat has only one value.

div.test {
background-image: url(example_one.png), url(example_two.png);
background-repeat: no-repeat;
background-position: top left, top right;

}

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

For more details:-
http://caniuse.com/multibackgrounds