Twitter Weekly Updates for 2010-03-07

Sunday, 7. March 2010

Powered by Twitter Tools

Twitter Weekly Updates for 2010-02-28

Sunday, 28. February 2010

Powered by Twitter Tools

Twitter Weekly Updates for 2010-02-21

Sunday, 21. February 2010

Powered by Twitter Tools

Twitter Weekly Updates for 2010-02-14

Sunday, 14. February 2010

Powered by Twitter Tools

Twitter Weekly Updates for 2010-02-07

Sunday, 7. February 2010

Powered by Twitter Tools

How to Css: Working with Padding

Wednesday, 3. February 2010

Padding can be applied to the outside edges of the content are of any block level or inline element. Padding creates the space between the edge of the element and its content.

Like margins, padding can be applied to individual sides of a box:

p {padding: 10px;}

h1{padding-top: 0px;}
h2{padding-right: 0px;}
h3{padding-left: 0px;}
h4{padding-bottom: 0px;}

Padding can also be applied using a single shorthand property. If one padding value is specified, it applies to all sieds of an element.

p {padding: 5px;}

If two values are specified, the top and bottom margines are set to the first value and the right and left margins are set to the second value.

p {padding: 5px 10px;}

If three values are specified, the top is set to the first value, the left and right to the second value and the bottom is set to the third value.

p {padding:5px 10px 0px}

If four values are specified, they apply to the top, right, bottom and left.

p {padding:5px 10px 3px 20px}

How To, Get great looking Transparencies with RGBa

Friday, 22. January 2010

CSS 3.0 has a great new features called RGBa.

You can now make a transparent background, transparent text, or just about anything else transparent with RGBa.

.myClass {
background-color:rgba(255,255,255,0.5)
}

The above tag will color your area witha white background that is 50% transparent. The only issue with RGBa at this time is that IE doesnt support it. The only CSS 3.0 compliant browsers seem to be Firefox and Safri. However, I have tested this in Opera and it does work.

You can also change the color of text element with:

.myClass {
color:rgba(255,255,255,0.5)
}

The old style of transparency is still supported by all browsers

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

The major difference between these two styles is that the new method RGBa will only effect the targeted ellement. Where as with opacity all subclasses are also affected.

Twitter Weekly Updates for 2010-01-11

Monday, 11. January 2010

  • Watch the Proposal last night, great flick very funny and defiantly worth watching. #
  • An education http://www.imdb.com/title/tt1174732/ was one of the best films I have seen in years. No special effects, just an actual story #

Powered by Twitter Tools

CSS, How to Style with Margins

Wednesday, 16. December 2009

When designing a CSS based website it is very useful to understand Margins. I have found that it is much easier to deal with browser compatibility when  one uses proper margin styles. Trying to set a top: -10px seems to cause browser issues that can be easily avoided by using margin-top:-10px.

Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements.

Margins can be applied to the individual sides of an element.

p { margin-top: 0px}
p { margin-right: 5px}

h1 { margin-bottom: 3px}
h1 { margin-left: 4px}

Margins can also be used with a single short tag. If one value is set this value will be applied to all sides of the element.

p { margin: 5px}

If two values are set, the first value will be applied to the top and bottom of the element while the second value will be applied to the left and right margins.

p { margin: 10px 5px}

If three values are set the fist value is applied to the top, the second value is applied to the left and right and finally the third value is applied to the bottom.

p { margin: 10px 5px 7px}

If for values are set the first value is applied to the top, the second value is applied to the right, the third value is applied to the bottom and the forth is applied to the left.
Top, Right, Bottom, Left

p { margin:10px 5px 7px 3px}

Twitter Weekly Updates for 2009-12-13

Sunday, 13. December 2009

Powered by Twitter Tools