SharePoint Group

To discuss and share about SharePoint and .NET learning and development experiences

Tag Archives: do-it-yourself

CSS3 2D Transformations

The transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

Basic Syntax

transform: function(a)

Browser-specific Syntax

-moz-transform: function(value); /* Firefox */
-ms-transform: function(value); /* Internet Explorer */
-o-transform: function(value); /* Opera */
-webkit-transform: function(value); /* WebKit */

Translate
Translate moves the element from its default position. Three functions are actually involved: tranlateX, translateY, and translate:

transform: translateX(value);
transform: translateY(value);
transform: translate(translateX,translateY);

Example:

    -moz-transform: translate(20px,40px);
    -ms-transform: translate(20px,40px);
    -o-transform: translate(20px,40px);
    -webkit-transform: translate(20px,40px);

View demo

Rotate
This transform rotates the element around a set point. Here’s the syntax:

transform: rotate(value);

Example:

    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(25deg);

View demo

Scale
You can make an element larger or smaller than the original by using the
scale function. The syntax is as following:

transform: scaleX(value);
transform: scaleY(value);
transform: scale(scaleX,scaleY);

Example:

    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);

View demo

Skew
The skew function allows you to alter the angle of the horizontal or vertical axis (or both axes) of an element. The syntax is:

transform: skewX(value);

transform: skewY(value);
transform: skew(skewX,skewY);

Example:

    -moz-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
    -o-transform: skewY(10deg);
    -webkit-transform: skewY(10deg);

View demo

For more details about CSS3 transformation, please visit:
http://css3.bradshawenterprises.com/transforms/

CSS3 Background Images

In CSS3, we can apply background image dimensions as well as use multiple background images.

Multiple Background Images
Syntax:

background-image: <bg-image> [ , <bg-image> ]*

Example:

background-image: url(image1.png), url(image2.png);
background-position: 50% 50%, 90% 80%;

View demo

Background Size
Syntax:

background-size: length|percentage|cover|contain;

Example:

background-image: url(image1.png), url(image2.png);
background-size: 50%, cover;

View demo

Form more details, please visit here:
http://www.w3schools.com/cssref/pr_background-image.asp
http://www.w3schools.com/cssref/css3_pr_background-size.asp

CSS3 Gradients

With CSS3, you can create gradients with minimal effort. A gradient is a gradual transition between a range of colors. There are two types of gradients: Linear and Radial.

Syntax
webkit:

-webkit-gradient(type, start-point, end-point, from(from-stop), color-stop(color-stop), to(to-stop)

mozilla:

-moz-linear-gradient(point or angle, from-stop, color-stop, to-stop)
-moz-radial-gradient(position or angle, shape or size, from-stop, color-stop, to-stop);

Example
Linear gradients:
webkit:

background-image: -webkit-gradient(linear,50% 0%,50% 100%,from(#000),to(#FFF))

mozilla:

background-image: -moz-linear-gradient(#000,#FFF);

Radial gradients:
webkit:

-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(white), to(black));

mozilla:

-moz-radial-gradient(50% 50%,circle closest-side,white,black);

View demo
For details for CSS3 gradients, please visit here:
http://www.impressivewebs.com/css3-linear-gradient-syntax

CSS3 Rounded Corners and Box Shadow

Rounded Corners and Box Shadow are simple yet powerful effects to enhance the beauty of web sites without the need for corner images and any code.

Rounded Corners example

/* Border Radius Style */
border-radius: 15px;

/* Mozilla Firefox Extension */
-moz-border-radius: 15px;

Box Shadow example

box-shadow: 10px 10px 5px #888888;

View demo

For more details about rounded corners and box shadow in css3, please visit here:

http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/

Follow

Get every new post delivered to your Inbox.