CSS3


So this is a quick rundown of all the new features you can use with CSS3.

All these examples will cover the different browers that are supported with them.

Border effects:

Rounded corners:

A common problem with designers making lovely rounded boxes and now you have to implement them into the website.
Previously the solution was to cut out the corners and display them as an image.
No longer needed with border-radius.

-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
-khtml-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;

Shadow on a div

If you want your div to have a shadow you now have box-shadow property. (RGBA option available for fading effect)

-moz-box-shadow:0 1px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:0 1px 0px rgba(0,0,0,0.2);
box-shadow: 0 1px 0px rgba(0,0,0,0.2);

Border colour:

You can now make borders with different colours on each side if required.

border-color: red blue green;

Border image

For those that need to do something extra special you have border-image

border-image: url(border.png) 27 27 27 27 stretch stretch;

Make Angles

Allows you to draw a box in css and make angles via the border side property.
This example is a triangle.

border-top: 13px solid #ad6200;
border-bottom: 13px solid #EFEFEF;
border-left: 13px solid #EFEFEF;
border-right: 13px solid #ad6200;

Background effects

Position

Position to place your image at a point from the top left corner

background-position: 25% 75%;

Size

To resize your image via CSS

background-size: 275px 125px;

Multiple Images

You can comma seperate your images so you now display more than one background image

background-image: url(image1.png), url(image2.png);

Faded background

The nice fade effects on buttons can be done in CSS rarther than as an image.

If you want to cheat (which I do) use this tool to create your fade. It will save allot of time as it generates the CSS for you.

http://www.colorzilla.com/gradient-editor/

background: #5d5d5d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiM1ZDVkNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNGQ0ZDRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #5d5d5d 35%, #4d4d4d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#5d5d5d), color-stop(100%,#4d4d4d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5d5d5d 35%,#4d4d4d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5d5d5d 35%,#4d4d4d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5d5d5d 35%,#4d4d4d 100%); /* IE10+ */
background: linear-gradient(top, #5d5d5d 35%,#4d4d4d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5d', endColorstr='#4d4d4d',GradientType=0 ); /* IE6-8 */

Text effects

Text Overflow

Allows your text to automatically hide within its area and display to the user when they hover over

text-overflow: ellipsis;

Word Wrap

Allows long words that do not fix within the area to break onto a new line

word-wrap: break-word;

Text shadow

Simple shadow effect on text.

text-shadow: 4px 4px 2px rgba(0,0,0,0.4);

Gets a more complicated when supporting IE.

You will probably have to google allot to find a solution to your examples but here is a sample of mine.

(And yes, I hate using the if IE tag)

<!--[if IE]>
<style type="text/css">
.thickText p{
zoom: 1;
color: #000000;
filter: progid:DXImageTransform.Microsoft.Chroma(color=#000000),
progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
.thickText p:before {
color: #FFFFFF;
position: absolute;
content: attr(data-innertext);
margin-top: 0px;
margin-left: -1px;
}
</style>
<![endif]-->
<div><p class="thickText" data-innertext="Sample text">Sample Text</p></div>

Transitions

Add an effect when changing from one style to another, without using Flash animations or JavaScripts.

Transition effect example on the width during 2 seconds

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

First and Last

You can style the first and last elements of a list (for example) differently in CSS3 without the need to add new classes

Example

li {
float: left;
padding: 0 10px;
border-left: 1px solid #000;
list-style: none;
}

li:first-child {
border-left: none;
}
li:last-child {
border-right: none;
}

Nth child

You can also add styles to certain items from the order if you wish with the nth-child option

ul li:nth-child(5) { color: #ccc; }

So I hope this quick rundown saves you time.

HTML5 examples can be found at http://glynrob.com/general/html5/

Leave a Reply

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