The Cutting Edge Tech Blog


A Complete Guide to CSS3 by FSherratt

A Complete Guide to CSS3

CSS3 is a very hot topic at the moment and probably my favourite code at the moment, as W3 Mozilla and Webkit are releasing new features all the time. Although it is only compatible with modern browsers such and Safari, Mozilla and Chrome, and only partially compatible with IE, It’s still an incredible useful to be using especially as when used by incompatible browsers, it’s just ignored so unless you’re using it for key features of your blog, you should be able to add it and forget about backwards compatibility.

With most of the CSS3 styles you’ll need to write them out several times to account for all three browser styles. This is done by adding either ‘-moz-‘ or ‘-webkit-‘ to the beginning of each of the styles. Anyway lets begin!

Columns

column-count:3;
column-gap:20px;
column-rule:2px solid #f3f3f3;
column-width:100px;

Nice and simple

Column-count – the number of columns that you want.
Column-gap – the size of the gap between the columns.
Column-rule — the border between each of the columns. Just the same as a normal border style width colour.
Column-width – fairly self-explanatory, normally not needed.

As with usual to get this to work with webkit and Mozilla browsers you just need to add -moz- or -webkit- to the front (-moz-column-count:2;).

Borders

border-radius:3px;
border-image:url(border.png) 27 27 27 round round;
box-shadow:2px 2px 2px #f3f3f3 inset;

Border-radius – The radius of the curve applied to each corner. Theres a nice tool for quickly generating the code needed. Border Radius Generator
Border-image – url of your image , width top right bottom left, type: stretch – stretch the image  to fit, Repeat – tiles the image, Round – tiles the image but stretches it to make it a whole number.
Box-shadow – x-axis, y-axis, blur, colour,  inset (inner shadow remove to make outer).

Text Effects

text-overflow:ellipsis;
word-wrap:break-word;
resize:both;
text-shadow:2px 2px 2px #F3F3F3;
-webkit-mask-image: -webkit-gradient;

Text-overflow – removes text overflow: ellipsis – finishes the text with …, clip – cuts off at last full work,
Word-wrap – It enable you to break reallylongwords up in to nice short ones. This helps to keep your layout smooth and unbroken with no nasty over laps.
Resize – used for text-areas this allows you to restrict in which direction a text-area can be expanded. Either vertical, horizontal or both.
Text-shadow – For adding a shadow to text. X-axis, Y-axis, Blur distance and colour.
Mask-image – Only available with webkit at the moment, needs to be teamed up with another style.

@font-face {
font-family: CustomFont;
src: url('Custom-Font.otf'), src: url('Custom-Font.ttf');
}

@font-face – Used for adding custom fonts into your css, first you need to give it a name which is the font-family, you then need to tell the computer where your font is which is the src bit. There some really nice to tools to help you do this. Font squirrel not only a wide a variety of fonts to download there is also a simple tool for generating the various font types and code needed to incorporate a custom font. The other tool is google web fonts. Just include one line of code in your markup and you can use all of their custom fonts.

font-squirrel
http://code.google.com/webfonts

Colour – Not just Hex Codes

hsla(25, 25, 25, 1);
hsl(25, 25, 25);
rgba(136, 157, 225, 0.5);

HSLAHue – 0-359 0/360 red, 120 green, 240 blue,
Saturation – 100% full colour, 99%> whiter,
Lightness – 100% white, 0% black, 50% Average/Normal,
Alpha – Transparency 0 – 1

RGBARed, Green. Blue, Alpha

Background Effects

background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #003E5C);
background: -webkit-gradient(linear, left top, left bottom, from(0, #0E658E), color-stop(.5, #0C577A) to(#003E5C));
background; url() top left no-repeat, url() bottom right repeat-y;
webkit-box-reflect: below 4px -webkit-gradient();

Moz-linear-gradient – (position, start colour, next colour and position, final colour);
Webkit-gradient – (type, start position, finish position, from(position, start colour), colour-stop(position, next colour) to(finish colour));
Background – url position repeat type, next background item.
Webkit-box-reflect – position, length, gradient fade.

CSS3 Selectors

[rel=friend]{}
[rel*=external]{}
[rel^=external]{}
[rel$=external]{}
[rel~=external]{}
[rel|=external]{}

These are used to select specific elements due to their attributes rather. For instance and external link could be selected with a[src*=http://].

= – Is equal to
*= – Anywhere in the attribute
^= – Beginning with
$= – Ending with
~= – Within a space separated list –
|= – Within a dash separated list –

Transform

transforn:translate(100px, 50px);
transforn:rotate(20deg);
transforn:skew(20deg);
transforn:scale(2.2);

Translate – Used to move elements around the page. translate(x-axis, y-axis)
Rotate – Rotate element.
Skew – Used to rotate elements on any axis, so skewx, skewy or skewz
Scale – Used to scale elements 2.2 = 220%.

Conclusion

So that’s your complete guide to css3, if there’s any I’ve missed just leave a comment and I’ll add them to this list.

Thank you for reading
Fred101597

Advertisements

Leave a Comment so far
Leave a comment



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: