«

»

Basic CSS3 Techniques

After 13 years of being a vital part of web design, Cascading Style Sheets (CSS) have evolved into a powerful tool, allowing you to develop more efficient and better-looking designs. A lot of the features in CSS3 are feature rich and will take the quality of your new designs to a higher level.

In this article, we will be looking at a few of the different features and how they can help you.

Multiple Backgrounds

CSS3 is a brilliant new revision that allows you to apply different backgrounds to elements using different properties. Here is a list of what properties are included:

  • Background-image, background-repeat
  • Background-position
  • Background-size

To use these multiple backgrounds with a single element, you have to tell the code the correct properties which are separated by commas.

body {
  background:
    url(../images/bottom-left.png) top right fixed no-repeat,
    url(../images/bottom-right.png) top left fixed no-repeat,
    url(../images/top-left.png) bottom left fixed no-repeat,
    url(../images/top-right.png) bottom right fixed no-repeat;
  background-color:#ffffff;
}

Selectors

The selectors allow you to choose new elements to appoint style elements to, this allows you to select challenging groups of elements. These new selectors not only save you a lot of time but also keep HTML mark-up to a minimum. This will lead to a much more organised style sheet.

The general sibling combinator

the new combinator allows you to select all of the siblings of a single element. For instance, if you want to target the paragraphs in the same line as your level-1 headings, you would write this short code:

h1~p {
  color: red;
}
The selector above will match the first element below - which will make it red, but it will not selct the second element as it is not in the same level.
<h1>Heading</h1>
<p>This paragraph is a match</p>
<div>
  <p>This paragraph is not a match</p>
</div>

New pseudo-classes

New pseudo-classes let you choose a group of elements, these elements to be chosen before would have needed scripting language such as JavaScript.

An example of pseudo-classes:

  • :last-child selects only the last child element.
  • :nth-child(n) selects the nth child, useful for zebra-striping tables.
  • :not(e) selects everything except e.

Resizing Elements

Using CSS3 the coder can now resize the elements using its property. This following code block allows a tiny triangle at the bottom right-hand corner of an element – this can be dragged and resized as desired.

div {
  resize: both;
}

Better Fonts

As you will of noticed Ariel, Verdana and Georgia are the most common internet fonts at present, this is because most computers have them installed. With CSS3 you are allowed to use more challenging fonts as long as the new font can be called from the web browsers and Internet cable location. Please remember to look into the copyright issues as you may have to seek permission before using the desired font.

in this example, the @font-face line of code calls the font family name (which can be named anything you like). It will also call the location of the font file. Once the font is declared and found it can be used to set the font of an element.

Font called:

wiki/TrueType TrueType font file

@font-face {
  font-family: SketchRockwell;
  src:
}
h1 {
  font-family: SketchRockwell;
  font-size: 3.2em;
  letter-spacing: 1px;
  text-align: center;
}

Text Shadows

This property lets you add shadow, the shadow is placed underneath HTML text elements. Please make sure that your text is readable as some browsers may not accept these advanced properties.

The example below shows:

  • Dark blue – colour code #003471
  • Text shadow is 2px to the right and 5px at the bottom
  • Blur radius is 2px to all hi elements
h1 {
  text-shadow: #003471 2px 5px 2px;
}

Preview of text shadow CSS3 property in Firefox 3.5.5

Preview of shadow using Firefox browser

Rounded Corners

sometimes creating rounded corners can prove to be a bit tricky and they turn out a little flaky. With CSS3 you can get around this issue by using this new property. the property allows you set a curvature to every corner required on a box.

this code below shows an example of 10px rounded corners (divs):

div {
  border: 2px solid #434343;
  padding: 10px;
  background: #e3e3e3;
 -moz-border-radius: 10px; -webkit-border-radius: 10px;
  width: 500px;
}

Rounded corners in Firefox 3.5.5

Rounded corners using the latest Firefox browser

Summary

CSS3 technology gives you greater freedom in designing websites and can help you with the most awkward styling issues. There is no need now to find fixes as all elements can be separated easily. this is just the basics of CSS3 coding if you would like some more information please contact us and we will see if we can help you out.

For more information about our web design and marketing services then please call our office on 01743 367691 or alternatively you can complete our online enquiry form.

Web Design Shrewsbury