Dave PC Guy » background

CSS Lesson 7: Border Radius and Opacity

Admin — Thu, 19 Nov 2009 21:46:02 +0000

Border Radius and Opacity

I’ve noticed some hundred tweets on CSS3, every day. Check out the CSS3 Watcher for random updates. They actually mention really awesome and useful tutorials. So now, let’s look at some basic features that actually work cross-browser (with some tweaks). You can check some of the usage on two version of one of my projects: the alpha, which utilizes rounded corners, and the beta, which utilizes a lot of opacity features.

I’ll show you some fun features as well as ways to get around them.

Rounded Corners

Creating rounded corners has always been a challenge. People have used several methods to accomplish this. One was by creating corner images to over-lap the background and make the square part of the corner transparent. I won’t explain that method, I don’t use it. But let’s look at the CSS3 write up:

border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

The short-hand property works very well here. It’s explained in my CSS Lesson 2. But let’s go over this in detail:

border-radius is the proper property mark-up in CSS3. There are variations to accommodate each corner of the object:

border-top-right-radius:
border-top-left-radius:
border-bottom-right-radius:
border-bottom-left-radius:

There, you can specify the exact curvature of each corner. You can do that in pixels, em, and other such length measurements. The larger the measurement, the more curved the corner will be.
Now, we all know that most browser today do not support pure CSS3 mark-up. There are two specific properties you can use.
For Mozilla, use these:

-moz-border-radius:
-moz-border-topleft:
-moz-border-topright:
-moz-border-bottomleft:
-moz-border-bottomright:

Yay! These work just as well and the same way as the original CSS3 markup.
For Safari and Chrome, use the following properties:

-webkit-border-radius:
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

But that’s about it. Unfortunately, none of these apply to Internet Explorer, (as was expected), so when you view my testing sites (links are at the beginning of this article), you won’t see anything different.

Input box

Here’s an input box modified by CSS3. Now to get the input box to look like this is a real problem without CSS but let me show you how you can bypass this CSS method on normal fields of text and html. Let me show you what I mean.

The “Div” Method

template diagram

Here’s a simple template diagram. The code for this would be as following:

Read my intro to divs to understand this structure better. But first, let me show you what I’m up to. Now, we know that most internet browsers these days support .PNG files, right? and .PNG files support transparency, yay! Instead of creating a mega background as I did in the case of one of my websites, we can simply take the top snippet of the background. Let me show you:

background diagram

You simply crop out the bottom and top into separate files. Make them as small as possible (height wise), let’s say ten pixels at most. Save them and insert them into the divs like this:

#topcontent {
height: 10px;
background: url(top.png);
width: 100%;
}

Do the same for the bottom content and you’re done! It’s really this easy and it saves a lot of space. You may have to create another div just for the content and right sidebar, but that all depends on what you’re doing with the site.
I hope that helped! Let’s move on to opacity!

Opacity

Opacity, yay! Or as you could call it, transparency. It’s a great CSS3 feature that I absolutely love because there is so much you can do with it. For me, it’s a great design feature because now, I don’t have to mess with new images. (I’ll show you the image method afterward). So let’s go for it. Here is the basic mark-up:

/* IE */
  filter:alpha(opacity=80);
/* CSS3 standard */
  opacity:0.8;

The CSS3 standard works on all browsers besides IE, which, luckily, has a simple work-around. The CSS3 standard works on the principle where “1″ is completely visible and “0″ is completely invisible. Anything in between is the opacity setting. The IE standard, works the same way except this time “100″ is the full opacity and “0″ is the complete transparency.
Unfortunately, this property has limitations. If used on my standard Div model, on the “container”, then not only will the background have a set transparency, but everything within the container will as well, including text, images, and everything else. I’ve tried to use the “!important” mark-up but that does not work either. Also, when another transparency is set, for example, a transparent “content” div, it will only subtract from the “container” transparency. Thus, when the “container” is set to 80 in IE, and .8 in standard, then the “content” will start with an 80/.8 transparency. So when you set a transparency of 80/.8 to the “content” it will be 80% of the original 80%. I know, confusing, but it makes sense in the end

Image Method

Okay, so let’s say you don’t want to put with this CSS3 crap, or you want only the background to be transparent. The method is simpler than you think. Create a 1 pixel x 1 pixel .PNG image, whatever color you want it, and set the transparency in the image, and save it. Then use this piece of CSS:

#container {
background: url (transparentimage.png) repeat;
}

The image will repeat indefinitely and create a transparent background. If you have an actual picture as a background, set the transparency same way.

So, this was it! I hope you enjoyed my tutorial. Spread the word ^.^

Share and Enjoy:

CSS: Lesson 2 Fonts, Padding, and Border

Admin — Fri, 25 Sep 2009 21:23:46 +0000

CSS Lesson 2

In lesson 1, I talked about backgrounds and text. Let’s move on, I’ll start out by expanding on the text manipulation with fonts and continue by the introduction of what I call “general formatting.” General formatting includes the definition of padding, borders, margins, and outlines. At the end of the lesson, you should know how to create the above banner and more

Here’s an overview of what you’ll learn in this lesson:

Fonts
Padding
Border

Fonts

We’ve already learned that there are multiple ways to manipulate the text in your HTML document through CSS. You can add text-decoration, align the text (text-align), change the line-height, word-spacing, and a lot of other stuff. Now let’s look at the font.

The general idea with Fonts is to use CSS to specify a group of fonts you’d like to use in HTML. If the browser does not support the first font, it will fall back on the next available font, and so on. There are three different general groups of fonts. There is “Serif”, “Sans-Serif”, and “Mono-Space”. Serif is the group of fonts with those little lines at the end of characters. Here is how you write it:

p.sans {font-family:Arial, Helvetica, sans-serif}

Sans-serif

p.serif {font-family:”Times New Roman”, Times, serif}

Serif

p.monospace {font-family:”Courier New”, Courier, monospace}

monospace

Let’s continue. When you use fonts that have multiple words, use quotations as shown above. You can mix and match different fonts but try to stick to fonts that look similar. Here are some basic properties:

hello

Font-size is self-explanatory, you can use “pt” for points, “px” for pixels, percent, and “em” which is a CSS unit of measurement, usually equaled to about 16px. It’s a unit of measurement that depends on the browser, the default browser size would be 1em, so if you want one and a half that size you’d use 1.5em. Font-variant only controls if the text has “small caps” or if it’s going to be “normal”. Font-weight specifies the font weight, obviously, or the boldness of the font. You can use values such as “bold, “bolder”, “lighter”, “normal”, and then go by “100″, “200″ etc.

Let’s look at Font-style. Font-style has the values “normal”, “italic”, and “oblique” (don’t use this one).

Finally, let’s look at Font itself, under the property font, you can declare all the different values at once.

body { font: bolder small-caps italic 2.4em/3em Arial, Helvetica, Sans-serif }
This is the modified text

As you can see, you can modify a lot using just the “font” property. There are some additional font values such as “caption”, “icon”, “status-bar”, “small-caption”, “message-box”, and “menu”. All of these modify the font to correspond with the font usage. “Message-box” for example, uses the font that’s used by form/dialog boxes. “Caption” is used by buttons, drop down menus etc.

Padding

For every content area, like a box, there are four different sections. There is the content, the padding, the border, and margin in that order from the middle to the outside of the box. We’ll start with padding first, which is the area directly around the content. It “clears” the area around the content, let’s say text, for the background and under elements.

Let’s try to define some padding:

Padded text

Well that didn’t work out as I planned, it seems as if WordPress has its own formatting that I cannot bypass. Here is a better example you can play around with by W3Schools. Let’s learn the short-hand. To express the above, you could have written it as the following:

or

You have to express all the values otherwise, your CSS will be interpreted wrongly. Let’s say you have four different values:

a, b, c, and d

where a is the top, b is the right, c is the bottom, and d is the left (clockwise):

padding: a b c d

Let’s say “b” and “d” are equal:

padding: a bd c

“bd” would be a single value. In this example, the following is short-hand: “top”, “left and right”, “bottom”. If you input only two values such as “ac bd” then it’s: “top and bottom”, “left and right”. A single value “abcd” would apply to all padding. Oh and when I say “abcd”, I don’t mean the multiplication but rather that it applies to all values. For example, if a=15px, and so does b, c, and d. You’d have to only write:

padding: 15px

You can use any other lenght-specifying measurements such as em and %.

Border

Let’s look at Borders, the next area around content. We specified the padding already which is affected by the background element of the content area. The border can have its own style and its own background and color.

Let’s start with border-style:

p.bordernone {border-style: none}

p.borderdotted {border-style: dotted}

p.bordersolid {border-style: solid}

p.borderdouble {border-style: double}

p.bordergroove {border-style:groove}

p.borderridge {border-style: ridge}

p.borderinset {border-style: inset}

p.borderoutset {border-style: outset}

p.borderhidden {border-style: hidden}

These are all the borders available for your own use. As you can see, I coded the code so that the code itself is an example. If you want to use the above for your own purposes, look in the source and type in “border-style” into the search bar. You can change the width of the border line with border-width. Which, in addition to normal measurements, also accepts the values “thin”, “medium”, and “thick”. Another property you can define is border-color.

Now, let’s say you want the width, color, AND the style different for each side of the border? Here’s how you do it:

p.complicatedborder {

border-top-style: solid;

border-top-width: 5px;

border-top-color: black;

border-right-style: dotted;

border-right-width: 10px;

border-right-color: white;

etc….

}

I’m not going to write it all out, but you get the idea. Where it says “top” or “right”, substitute it with “bottom” or “left” and you can apply it to the bottom or left sides. It works the same for all of the sides. Here’s the short-hand:

p.lesscomplicatedborder{

border-left: 15px groove blue;

border-bottom: 7px double red;

}

The shorthand is used the following way: “border-(side): width style color;” You can use this method on all sides by declaring “border: width style color” and not including the side tidbit. One last thing, let’s say you need to only define the border styles but are too lazy and will instead resort to shorthand?

p.borderstyles {

border: dotted solid hidden inset;

}

This part works the same as the shorthand for padding. If you have four values they’ll apply to : top right bottom left, respectively. Three values: top right/left bottom. Two values: top/bottom left/right. One value: top/bottom/left/right.
That’s it! In my next tutorial, I’ll address outlines and margins.

As always, here is the code for the header:

CSS Lesson 2

Share and Enjoy:

CSS: Lesson 1

Admin — Mon, 21 Sep 2009 18:32:35 +0000

CSS Lesson1

CSS is a lot of fun once you start it, the same way PHP is a lot of fun. So here’s what I’ve learned so far.

Ways to implement CSS
CSS in DreamWeaver
Backgrounds in CSS
Text in CSS

Ways to implement CSS

There are three different ways to use styles:

Using an External Style Sheet: You do this by creating a .css file. This file has the lowest priority when it comes to style use UNLESS you reference it in the AFTER you use the internal style sheets. You can reference the file this way:
Internal Style Sheet is another method of using styles. This style will only apply to the html document it’s in. It has the second highest priority but only when the external style sheet is referenced before it. This style sheet is in the tag and you can use it by defining styles between these two tags:
In-line Styles are of the highest priority and will override any other styles. Here’s an example:
.

CSS in DreamWeaver

CSS is made unbelievably easy in DreamWeaver. Once you start typing something about a style, let’s say you type