CSS Atoms | CSS3 Tutorials, Tips, and Articles » Properties http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Learn How to Wrap Text Around an Image in CSS3 http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/ http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/#comments Thu, 16 Jun 2011 17:05:01 +0000 http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/ One of the most important properties for web design is the Float property. The Float property is used to move elements to the right or left, so other elements can […]

The post Learn How to Wrap Text Around an Image in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
One of the most important properties for web design is the Float property. The Float property is used to move elements to the right or left, so other elements can wrap around them. Many web designers use the Float property to wrap text around images without creating classes or IDs. When we use the Float property, elements that are continuous to the element will flow around it, depending on where the floated element was located at first and its Float value. Its markup values are: left, right, none, or inherit. Floated elements will move until they find a container. If your element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element’s width to avoid errors or miscalculations.
In this tutorial we will learn how to float an image to the left, so text will float around it without leaving white space around the image.

STEP ONE:

Let’s start by creating a basic HTML file with some content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Use CSS Float Property to Wrap Text around an Image</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
    <h1>Use CSS Float Property to Wrap Text around an Image</h1>
 
    <p>One of the most important properties for web design is the Float Property. The Float Property is used to move elements to the right or left, so other elements can wrap around. Many web designers use the Float Property to wrap text around images without creating classes or IDs. When we use the Float Property, elements that are continuous to the element will flow around it depending on where the floated element was located at first and its Float value (right or left).Its markup values are: left, right, none, or inherit. Floated elements will move until they find a div container or another container. If your Floated element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element's width to avoid errors or miscalculations.<br />
 
In this tutorial we will learn how to float an image to the right, so text will float around it without leaving white space around the image. </p>
 
    <p>One of the most important properties for web design is the Float Property. The Float Property is used to move elements to the right or left, so other elements can wrap around. Many web designers use the Float Property to wrap text around images without creating classes or IDs. When we use the Float Property, elements that are continuous to the element will flow around it depending on where the floated element was located at first and its Float value (right or left).Its markup values are: left, right, none, or inherit. Floated elements will move until they find a div container or another container. If your Floated element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element's width to avoid errors or miscalculations.<br />
 
In this tutorial we will learn how to float an image to the right, so text will float around it without leaving white space around the image. </p>
 
</body>
 
</html>

STEP TWO:

Now, find any image that you want to include within the content. I chose the following image and I saved it for web inside a predestined images folder for my HTML page:
Step Two Image
You can use your own image, or download my image at the end of this tutorial.

Place the image on the same line as text. I placed mine within the first paragraph tag:

<p><img src="images/Floatimage.jpg" width="100" height="78" alt="Floated Image" />One of the most important properties for web design is the Float Property. The Float Property is used to move elements to the right or left, so other elements can wrap around. Many web designers use the Float Property to wrap text around images without creating classes or IDs. When we use the Float Property, elements that are continuous to the element will flow around it depending on where the floated element was located at first and its Float value (right or left).Its markup values are: left, right, none, or inherit. Floated elements will move until they find a div container or another container. If your Floated element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element's width to avoid errors or miscalculations.<br />
 
In this tutorial we will learn how to float an image to the right, so text will float around it without leaving white space around the image. </p>

NOTE: Make sure to place elements that you plan to float before any element you wish to wrap around.

Preview in browser:
Step Two Preview
Notice that the HTML places our image as a container creating an unappealing white space around the image.

STEP THREE:

Luckily, we have a CSS property to fix the unpleasant open space around our image. Let’s Float our image to the left, so content can follow the element’s block and wrap around it.
Link a CSS file to your HTML and add the following declaration for your image:

p img {
       float: left;
}

Preview in browser:
Step Three Preview

Way better, huh?

STEP FOUR:

To create a little bit of space between our image and content let’s add a right margin to our image declaration:

p img {
        float: left;
        margin-right: 20px;
}

Preview in browser:
Step Four Preview

Congratulations! You learned how to correctly place and float any element within your HTML page. Practice with more images and values to dominate CSS; as Publilius Syrus once said, “Practice is the best of all instructors”.

Download Source Files

The post Learn How to Wrap Text Around an Image in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/feed/ 0
Learn how to Shorthand CSS Properties http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/ http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/#comments Mon, 09 May 2011 10:03:41 +0000 http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/ There are a lot of CSS properties that share common names; for example, margin-top, margin-right, margin-bottom, margin-left. Sometimes it gets pretty tedious and confusing to type all of those similar […]

The post Learn how to Shorthand CSS Properties appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

There are a lot of CSS properties that share common names; for example, margin-top, margin-right, margin-bottom, margin-left. Sometimes it gets pretty tedious and confusing to type all of those similar properties, for that reason the CSS shorthand method was created. The CSS shorthand method helps us to increase speed, decrease file size, and be concise. Instead of typing four times the margin property, we can type margin and include all its specifications inside a single property. Let’s learn the different ways to do this:

STEP ONE:

Create a HTML page with different tags; such as, headings and paragraphs. Then, link a CSS file to it.
Choose any element of your page and within the CSS give it a different top, right, bottom, and left padding value:

.footer {
                padding-top: 30px;
                padding-right: 10px;
                padding-bottom: 5px;
                padding-left: 8px;
}

As you can see, I separately specified each value. Now, let’s learn how to use shorthand to simplify this property: 

.footer {
                padding: 30px 10px 5px 8px;
}

Easy, huh?
I typed padding one time and I specified each value inside of it. 

NOTES:

  • Make sure to follow this order when specifying: top, right, bottom, and left.
  • The same method can be used for the margin property.

STEP TWO:

Now, let’s learn how to specify a property when all the values are the same.
For my paragraph tag I specified (using the old way) a padding of 15px for all its sides:

p {
                padding-top: 15px;
                padding-right: 15px;
                padding-bottom: 15px;
                padding-left: 15px;
}

There is no need to specify the same number over and over again, just type the following and you will have 15 pixels on every side of the paragraph box:

p {
                padding: 15px;
}

STEP THREE:

What about if the top and bottom and right and left share the same values? No problem! You can abbreviate it as shown below:
Old way: 

h2 {
                margin-top: 5px;
                margin-right: 10px;
                margin-bottom: 5px;
                margin-left: 10px;
}

Using shorthand:

h2 {
                margin: 5px 10px;
}

I specified the top and bottom value first and then the right and left value.

STEP FOUR:

Yes, shorthand is also flexible with other CSS’s properties. Here is an example of how to use it for the background property:

.header {
                background-color: white;
                background-image: url(images/HeaderBg.jpg);
                background-repeat: repeat-x;
}

Beneath I used three different background’s properties to specify distinct elements, color, image, and repeat. In this case, the shorthand method is even more flexible, because it lets us specify them in any order. Here is how I shorthanded my background properties:

.header {
                background: white url(images/HeaderBg.jpg) repeat-x;
}

Now, it’s time to know if you learn how the shorthand technique works. Give it a try and abbreviate the following border properties:
border-top: 10px;
border-right: 8px;
border-bottom: 10px;
border-left: 15px

Let me know your answer!

Download Source Files

The post Learn how to Shorthand CSS Properties appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/feed/ 0
How to Specify Fonts using the Font-Family Property in CSS http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/ http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/#comments Fri, 06 May 2011 10:03:50 +0000 http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/ By using CSS we have the ability to easily control the fonts of our website. We as web designers or developers are limited to use certain fonts. We need to […]

The post How to Specify Fonts using the Font-Family Property in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
By using CSS we have the ability to easily control the fonts of our website. We as web designers or developers are limited to use certain fonts. We need to be careful in our font choices making sure we always use “browser safe fonts”. To make the best use of fonts we can customize and regulate the fonts that would like to use for each element of our page by using the font-family property. The font-family property can contain a set of fonts that share common characteristics, so we can make sure the user correctly sees our webpage’s content as we want to.

STEP ONE:

Let’s create a HTML page with a CSS linked. Add any content to your HTML page; for example, I added a heading and paragraphs tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to Specify Fonts using the font-family Property in CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="header">
    <!-- end .header --></div>
<div class="container">
  <div class="content">
    <h1>How to Specify Fonts using the font-family Property in CSS</h1>
    <p>By using CSS we have the ability to easily control the fonts of our website. 
    We as web designers or developers are limited to use certain fonts. We need to be 
    careful in our font choices making sure we always use "browser safe fonts". To make 
    the best use of fonts we can customize and regulate the fonts that would like to use 
    for each element of our page by using the font-family property. The font-family property 
    can contain a set of fonts that share common characteristics, so we can make sure the 
    user correctly sees our webpage's content as we want to. </p>
    <br />
    <!-- end .content --></div>
<!-- end .container --></div>
<div class="footer">
    
</body>
</html>

STEP TWO:

In your linked CSS add the following property:

body {
	font-family: Tahoma, Geneva, sans-serif;
}

As you can see, I made a list of two sans-serif typefaces. If the user’s browser doesn’t support the Tahoma font, it tries Geneva font.
First, I specified the family-name, the name of the font’s family; such as, Tahoma. Then, I specified the generic-family, the name of the font’s style; such as, sans-serif.

Here is a list of the basic and most common “browser safe fonts” and their generic families:

  • Sans-serif Family: Arial, Arial Black, Trebuchet MS, Arial, Geneva, Helvetica.
  • Serif Family: Times, Times New Roman, Georgia, Palatino.
  • Monospace Family: Courier, Courier New, Andale Mono.
  • Cursive Family: Comic Sans.
  • Fantasy Family: Impact Webdings, Windings.

STEP THREE:

Now, let’s add a different font-family for the heading. Add an h1 specification in your CSS like shown below and add any font-family

h1 {
	font-family: Arial, Helvetica, sans-serif;
}

Let’s learn interesting facts about the font-family property:

  • Each font family needs to be separated with a comma.
  • If the font family contains more than one word add quotes. For example, the font New Times Roman needs to be specified like, “Times New Roman”.
  • Do not mix font families. Bad example: Verdana, Times, Impact, cursive. Each font-family needs to contain fonts that share common characteristics.
  • Always finalize with the specification of the generic family.
  • You can specify as many fonts’ families you would like.
  • If none of the fonts you specified can be found (rarely occurs), the browser will use whatever generic family was specified.
  • The font-family property is supported in all browsers.

Now that you know how correctly specify the font-family property set up different font families and save them for your next web projects.

Download Source Files

The post How to Specify Fonts using the Font-Family Property in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/feed/ 0
How to Specify Font Sizes in CSS http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/ http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/#comments Thu, 05 May 2011 10:05:30 +0000 http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/ HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers need to learn how to correctly adjust font sizes, as […]

The post How to Specify Font Sizes in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers need to learn how to correctly adjust font sizes, as most people find the default sizes horrible and unsophisticated.  In order to adjust our HTML page font size we need to implement CSS. With the help of CSS we can control the font size our HTML page content; such as, headings, paragraphs, subtitles, etc. The CSS property that is used to do that is called, font-size. The font-size property lets us adjust sizes in four different ways, using pixels, using percentages, using ems (unite of measurement), or by using keywords. In this CSS tutorial, we are going to learn about the different ways of specifying font-size and the correct way to do it. Let’s get started!

THE HTML PAGE:

First, we need to have a HTML page with some content to stylize. I created a XHTML page with a main heading: <h1>, a subtitle: <h2>, and paragraph tags: <p>.
Also, I linked a CSS file to my XHTML page: <link href=”style.css” rel=”stylesheet” type=”text/css” />.
Let’s take a look at my XHTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to Specify Font Sizes</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 <body>
  <div class="header">
<!-- end .header --></div>
<div class="container">
  <div class="content">
    <h1>How to Specify Font Sizes in CSS</h1>
    <h2>(CSS Basic Tutorial)</h2>
    <p>In this basic CSS tutorial, we are going to learn how to adjust the font size of an HTML page by implementing a 
       Cascading Style Sheet with the font-size property.</p>
    <p>HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers 
       need to learn how to correctly adjust font sizes, as most people find the default sizes horrible and unsophisticated.  
       In order to adjust our HTML page font size we need to implement CSS. With the help of CSS we can control the font size 
       our HTML page content; such as, headings, paragraphs, subtitles, etc.</p>
    <br />
    <!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>

Notice that I created a class for the footer; therefore, I can apply a different font size to the footer’s paragraph tag.

ADJUSTING FONT SIZE WITH PIXELS (px):
When we specify font size with pixels we are identifying dots on the computer screen. For example, adjusting a font to 24 pixels means that 24 dots are going to be between the bottom part and the top part of the letter.

h1 {
	font-size: 24px;
}

Preview in browser:
font-size using pixels preview

NOTES:

  • px must be right before the number; don’t add a space in between.
  • Font specified with pixels doesn’t scale in Internet Explorer.
  • Mobile devices don’t reduce fonts specified with pixels.

ADJUSTING FONT SIZE WITH PERCENTAGES (%):
When we specify the font size of a parent element (Ex. Body) using percentages we are telling the browser to relatively fix the size of child elements (Ex. Paragraphs) For example, adjusting the font size for the body to 80% will make the no-identifying paragraph tags to inherit it.

body {
	font-size: 80%;
}

Preview in browser without body or paragraph font size specified:
font-size using percentages - without

Preview in browser with a body font-size of 80%:
font-size using percentages
Notice how the paragraph inherited the font-size declared for the body.

NOTE: When we specify font-size using percentages, the text will become fully scalable.

ADJUSTING FONT SIZE WITH EM UNIT (em):
Em is a unit of measurement that defines the percentage of a text according to the point size of the current font. Similar to percentages, the em unit tells the browser to relatively fix the size of child elements when a font-size is specified for a parent element.

Because we already have our body font-size specified, let’s specify the font-size for our <h2> tag to 1.5e.m and see what happens.

h2 {
	font-size: 1.5em;
}

Preview in browser without font-size specified:
font-size using ems - without

Preview in browser with an h2 font-size of 1.5em:
font-size using ems

Not a big difference, huh? That’s because 1.5em is equivalent to 24px (our h1 font-size).

NOTES:

  • Ems is the best and popular font-size method to use. It is scalable and mobile friendly.
  • Don’t confuse the HTML <em> element with the CSS em measure specification. The HTML <em> element emphasizes text, the CSS em specification adjust font sizes.

ADJUSTING FONT SIZE WITH KEYWORDS:
An easy and quickly way of adjusting font size is with keywords. We can specify font size with the following keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.
According to your browser settings, each keyword will be converted into pixels. Generally, the small keyword is converted around 12px. From there, each keyword declaration is about 20% larger than the preceding size.
Let’s specify our footer paragraph text using the x-small keyword:

.footer p {
	font-size: x-small;
}

Preview in browser without any font-size property declared:
font-size using keywords - without

Preview in browser with the font-size property declared using the x-small keyword:
font-size using keywords

NOTE: Keywords are NOT always converted the same way in every browser or computer.

FINAL TIPS:

  • Remember not to add a space between number and symbol (Good: 10%, Bad: 10 %).
  • Negative font size values are not permitted.
  • Specify the font-size for the body and then fix the font-size of other elements accordingly.

Here is an excellent resource that shows approximately the conversion from points to pixels, ems, and percentages:

POINTS PIXELS  EMS PERCENT
 6pt  8px  0.5em  50%
 7pt  9px  0.55em  55%
 7.5 pt  10px  0.625em  62.5%
 8pt  11px  0.7em  70%
 9pt  12px  0.75em  75%
 10pt  13px  0.8em  80%
 10.5pt  14px  0.875em  87.5%
 11pt  15px  0.95em  95%
 12pt  16px  1em  100%
 13pt  17px  1.05em  105%
 13.5pt  18px 1.125em  112.5%
 14pt  19px  1.2em  120%
 14.5pt  20px  1.25em  125%
 15pt  21px  1.3em  130%
 16pt  22px  1.4em  140%
 17pt  23px  1.45em  145%
 18pt  24px  1.5em  150%
 20pt  26px  1.6em  160%
 22pt  29px  1.8em  180%
 24pt  32px  2em  200%
 26pt  35px  2.2em  220%
 27pt  36px  2.25em  225%
 28pt  37px  2.3em  230%
 29pt  38px  2.35em  235%
 30pt  40px  2.45em  245%
 32pt  42px  2.55em  255%
 34pt  45px  2.75em  275%
 36pt  48px  3em  300%


This table was generated by REEDDESIGN (www.reeddesign.co.uk).

Now you know the different ways of specifying font sizes, which one are you going to use?

Download Source Files

The post How to Specify Font Sizes in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/feed/ 0
Adding a Background Image in CSS with the background-image Property http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/ http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/#comments Wed, 04 May 2011 10:03:04 +0000 http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/ With the help of CSS, we can place any background image using the background-image property.  Let’s learn some facts about this awesome and useful property: The background-image property can set […]

The post Adding a Background Image in CSS with the background-image Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
With the help of CSS, we can place any background image using the background-image property.

 Let’s learn some facts about this awesome and useful property:

  • The background-image property can set the background of any element specified in your HTML page.
  • Use the background-image property only to place background images, not to place images in your content.
  • The reason why the background property exists is to make elements look better.
  • Images specified with the background-property are set to a URL. The URL can be a relative path or a website link (http://…).
  • By default, images specified with the background-image property are positioned in the top of your browser window.
  • By default, images specified with the background-image property are repeated. To fix that, we have a background-repeat property available.
  • This property is supported in all main browsers.

Now that you know more about the background-image property let’s learn how to use it:

STEP ONE:

Create a HTML page, name it “index” and add any element. For example, I added a class for a footer and I included a paragraph tag inside of it.

<div class="
    Visit <a href="http://cssatoms.com/" title="www.cssatoms.com" target="_blank">www.cssatoms.com</a> for more CSS tutorials.</p>
<!-- end .footer --></div>

STEP TWO:

Next, I would like to improve the attractiveness of the footer class I created by adding a nice image for its background.
Inside the folder where your index.html page was saved, create a New Folder and name it “images”. There we are going to save our background image.
Go ahead and create a New CSS and link it to you HTML page.
Look for any image you would like to set as the background image of your HTML element and save it for web inside the “images” folder.
Step Two A
Preview of my footer-background image:
Step Two B

STEP THREE:

Now, you just need to specify your image inside your CSS.

.footer {
                background-image: url(images/FooterBg.jpg);
                background-repeat: repeat-x;
                height: 101px;
                padding-top: 30px;
                padding-right: 0;
                padding-left: 0;
                text-align: center;
                color: #666;
}

Preview in browser:
Step Three
As you can see, I added the background-image property along with the background-repeat property. Here is an explanation of the properties that I added:

  • background-image: the URL was set to a relative path. There we declared where our image is located.
  • background-repeat: the repeat-x specification makes our image repeat horizontally. If you prefer to repeat your image vertically choose the repeat-y specification.
  • height: I declared the height of my image, so now the height of my div class is set.
  • padding properties: It defined the space between the paragraph tag and the div.
  • text-align and color properties: they stylized the content inside the footer.

That’s all about the background-image property. Now, you know how to decorate your elements with background images. Have fun!

Download Source Files

The post Adding a Background Image in CSS with the background-image Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/feed/ 0
Embossed Text in CSS3 http://cssatoms.com/basic/embossed-text-in-css3/ http://cssatoms.com/basic/embossed-text-in-css3/#comments Fri, 22 Apr 2011 10:02:01 +0000 http://cssatoms.com/basic/embossed-text-in-css3/ If you’re anything like me, you sure do love some sexy embossed text. It can make a normal text element on your page appear to be “punched” in rather than […]

The post Embossed Text in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

If you’re anything like me, you sure do love some sexy embossed text. It can make a normal text element on your page appear to be “punched” in rather than having a “flat against the screen” look that normal text has. Of course, products like Photoshop and Illustrator have reigned supreme for a while, but with CSS3 we can emboss text just like the big boys. Let’s see how it works.

STEP ONE:

The HTML

Today, we’ll be creating a “button” to show the embossed text technique in all of its glory. The button won’t actually do anything, but the text inside of the button is our focus today. Taking a look around the web nowadays will quickly prove that embossed text isn’t going anywhere, and is, in fact, seeing somewhat of resurgence as of late. Here’s what our basic HTML page looks like. Just a standard Div that will pose as our button, and a paragraph inside of the div to hold our text:

<body>
 
    <div id="button">
    	<p class="buttonText"> Press Me </p>
    </div>
 
</body>

STEP TWO:

The CSS

The CSS file has more than is needed, but only because I wanted the button in our example to look at least halfway decent. Here’s what it looks like:

#button{
	background:-webkit-gradient(linear, left top, left bottom,from(#b3b3b3),to(#555));
	background:-moz-linear-gradient(top, #264aff, #FFFFFF);
	filter:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#264aff', endColorstr='#FFFFFF');
	border: 1px solid #999;
	cursor: pointer;
	border-radius: 20px;
	height: 50px;
	position: relative;
	text-align:center;
	width: 190px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
 
.buttonText{
	font-family: Verdana, Geneva, sans-serif;
	font-size: large;
	font-weight: bold;
	color: #fff;
	margin: -15px -45px 0px 30px;
	position: absolute;
	text-shadow: 0px -1px 0px #000;
	top: 50%;
	right: 50%;
}

All of the styles in the #button selector are simply there for aesthetics purposes. I’ve added a gradient, some rounded corners, etc… The important part of the CSS file is the .buttonText class selector. Here, you’ll see that I’ve added a text-shadow property. This property takes four parameters:

  1. The color of the text shadow.
  2. The x-offset of the shadow relative to the text.
  3. The y-offset of the shadow relative to the text.
  4. The amount of blur to be added to the shadow in pixels.

As you can see, I’ve given the y-offset property a value of -1. This means that instead of pulling the shadow away from the text, it will actually lay over the text slightly, giving us the illusion of the text being “punched” into the button. A subtle effect, but nice.
Result

That’s all there is to it! Instead of giving our text-shadow a positive value to move it away from our text slightly, we’ve given it a negative value so that it overlays our text. This is just another way to make plain text stand out a bit more, and add a little depth to your design. Play with combinations of light and dark backgrounds and see what kind of cool typography you can come up with. Until next time!

Download Source Files

The post Embossed Text in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/embossed-text-in-css3/feed/ 0
Text Shadows in CSS3 http://cssatoms.com/basic/text-shadows-in-css3/ http://cssatoms.com/basic/text-shadows-in-css3/#comments Thu, 21 Apr 2011 10:02:00 +0000 http://cssatoms.com/basic/text-shadows-in-css3/ Normally, to get a text shadow effect onto a website, we’d look to use one of our favorite image altering design programs. Now, we don’t need to look further. The […]

The post Text Shadows in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
Normally, to get a text shadow effect onto a website, we’d look to use one of our favorite image altering design programs. Now, we don’t need to look further. The power of CSS3 provides us with some great looking text-shadow effect. Here’s an example of what it looks like:
Text-Shadow Sample

Pretty cool right? This is accomplished with very little CSS, and can really add some pizazz to your site when used properly. Here’s how the text-shadow property is used in your CSS file:

text-shadow: #999 2px 2px 2px;

Super simple right?
As you can see, the text-shadow property takes four values:

  • First, the color that you would like the text-shadow to be.
  • Next up is the x-coordinate of where you’d like the shadow to be relative to the text. Remember that the x-axis is horizontal, and the property moves from the center to the right. Therefore, our text-shadow will be offset 2px to the right of our initial text.
  • Logically, the next value is the y-coordinate of where you’d like the text-shadow to be, once again relative to the initial text. The y-axis is vertical, and positive numbers will move the text down.
  • The last value is the amount of blur, in pixels, that you’d like to add to the text-shadow. You can think of this as how many pixels you’d like to “stretch” the shadow text. Keep this value low, because if you set it too high, you’ll see that the text can quickly become illegible.

With CSS3, adding special typography effects is a breeze, and with the right usage can really make the text on your website stand out. Be smart about the placement of text-shadow, and try to keep it away from extremely important text on your webpage such as full stories and articles. The text-shadow is better left for better looking headers or titles.

That’s all for text-shadows; a super easy, fast, and good looking effect. Until next time!

Download Source Files

The post Text Shadows in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/text-shadows-in-css3/feed/ 0
CSS3 Columns http://cssatoms.com/basic/css3-columns/ http://cssatoms.com/basic/css3-columns/#comments Mon, 11 Apr 2011 11:39:02 +0000 http://cssatoms.com/basic/css3-columns/ With frameworks like the 960 Grid System and others floating around to make page layouts easier, there seems to be a growing emphasis on grid or column based design on […]

The post CSS3 Columns appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
With frameworks like the 960 Grid System and others floating around to make page layouts easier, there seems to be a growing emphasis on grid or column based design on the web. CSS3 is once again coming to our rescue and attempting to make things even simpler by providing a standard way of splitting up large blocks of text into columns. This is honestly one of the most useful things in the new CSS3 specification, and is guaranteed to make your life as a web designer easier. Let’s see what this new property can do.

STEP ONE:

The HTML

Our HTML page is very simple, and consists of only a paragraph and some randomly generated Lorum Ipsum text (placeholder text). Have a look at the code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Columns</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
	<p id="someText">
            Turpis porta turpis parturient porta ac, adipiscing ultricies nascetur et porttitor augue dapibus odio 
            in, et! Vel dis, pid auctor, ridiculus elementum nisi ac, sit, dapibus platea! Non? Dictumst? Elementum, 
            amet platea non turpis, cum nascetur! Rhoncus sit elementum pid parturient nec! Turpis est placerat 
            pellentesque ac! Natoque phasellus tempor eros pid, odio nunc hac mattis. Sit? Parturient natoque sit, 
            urna etiam lacus augue aenean non nisi duis urna sagittis, parturient odio ut eu auctor integer augue 
            tortor, auctor, cras. Odio in augue rhoncus aenean aliquet augue, velit magna montes ac, amet augue ac 
            pulvinar a, mus vut lacus phasellus amet cursus auctor turpis cras nisi cursus hac, amet porttitor et quis, 
            aliquet eros placerat natoque turpis sit. Montes ac nisi dapibus nec dapibus lectus elementum, scelerisque 
            magna habitasse risus! Dapibus eu ridiculus habitasse porttitor sit pulvinar nunc parturient eu, magna eu. 
            Aliquam dignissim, et massa, a pulvinar augue adipiscing diam etiam aliquam! Cras. Ac, diam placerat mattis 
            elementum et integer ultrices magnis turpis nunc porta in amet, tortor. Elementum, dolor tincidunt pid pid? 
            Cum adipiscing tortor phasellus vel facilisis, enim nunc! Aliquam purus augue dapibus? Nisi etiam ac, enim, 
            habitasse nunc, tristique ultrices dignissim! Purus natoque sit. Habitasse vut.
        
            Sit a nunc, urna diam porta etiam? Natoque porta tincidunt? Dignissim? Sociis auctor quis adipiscing? Nascetur 
            nec nunc sed porta! Phasellus in massa, ultrices. Phasellus proin, ac, aenean phasellus cursus. Hac augue aenean, 
            lundium eros placerat augue turpis egestas. Lundium ac? Hac nascetur est sit quis tortor habitasse scelerisque 
            porttitor tortor, dolor adipiscing purus elit tempor in! Tincidunt porttitor! Natoque dis porttitor mauris. Amet 
            turpis arcu sed et nec natoque nisi, cras pulvinar adipiscing mus eros turpis, pellentesque aliquet, in massa, vut 
            magna rhoncus porttitor, integer nascetur, dolor tortor? Eu pulvinar habitasse tincidunt sociis tincidunt nascetur 
            tempor amet etiam etiam dis cursus aenean, nec dignissim! Penatibus sit porta adipiscing proin hac, phasellus! Mattis 
            aenean integer hac est porttitor? Risus. Mus! Egestas, scelerisque, augue habitasse ut! Nunc mid ac massa et ridiculus 
            quis, proin eros magna habitasse massa scelerisque! Proin, augue adipiscing ac aenean arcu non integer proin risus 
            magnis dignissim phasellus aliquet mattis in purus, ridiculus odio! Etiam augue. Magna et egestas. Augue tristique nec 
            phasellus, dapibus ut? Scelerisque. Amet porta a placerat? Lorem lectus pellentesque non est risus? Tortor tristique! 
            Lundium risus est aliquam lectus! Ac ridiculus est, ac ultrices odio elit et eros? Platea porttitor? Etiam, magna. 
   </p>
</body>
</html>

Great! Our page is set up with some dummy text, and now we can see how the CSS columns work.

STEP TWO:

The CSS

The CSS in today’s tutorial is also fairly uncomplicated, and only gets a bit convoluted thanks to the browsers all having their own specific prefix for the column specification. Peek at the CSS, and then I’ll go into further detail, and we’ll add a few more features as well:

#someText {
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;	
	column-count: 3;
	column-gap: 3;
}

Now, if you load up the HTML file into a browser, you’ll see that the large chunk of text has been split into three very lovely columns. In our CSS, we first specified the column count. This is pretty self-explanatory, and simply sets the number of how many columns we’d like to split our text into. The next property was the column gap, which specifies how much space should in between the columns. These numbers can be changed at will to achieve the desired layout.

Next, let’s add a bit of flavor to our columns. There is another property called column-rule that allows us to add sort of a colored margin to our columns. Here’s what the CSS should look like now:

#someText {
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;	
	column-count: 3;
	column-gap: 3;
	-moz-column-rule-color: #0b9cd1;
	-moz-column-rule-style: solid;
	-moz-column-rule-width: 10px;
	-webkit-column-rule-color: #0b9cd1;
	-webkit-column-rule-style: solid;
	-webkit-column-rule-width: 10px
}

So now, we have a nice blue “barrier” between each of our columns, and all of this formatting took very little CSS.
Colored Margin

This is a very powerful feature of CSS3 and can be used to make your text more legible and your layouts more symmetrical. Experiment with the number of columns and the column-rule property until you get that perfect “griddy” look on your site. Until next time!

Download Source Files

The post CSS3 Columns appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/css3-columns/feed/ 0
The CSS3 Resize Property http://cssatoms.com/basic/the-css3-resize-property/ http://cssatoms.com/basic/the-css3-resize-property/#comments Fri, 08 Apr 2011 15:36:42 +0000 http://cssatoms.com/basic/the-css3-resize-property/ CSS3 is adding quite a few new features to our styling toolkits, and today’s brief tutorial will talk about one of the ones that you may have not heard about […]

The post The CSS3 Resize Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
CSS3 is adding quite a few new features to our styling toolkits, and today’s brief tutorial will talk about one of the ones that you may have not heard about yet, the resize property. In the past there have been a few hacks to give a box the ability to be resized, but now with CSS3 it only takes a single line of code. Ready to see how it works? Let’s go!

STEP ONE:

The HTML

Our page layout is again, very simple. All we have is a single div element with some text inside of it. Here’s what the HTML looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title> The CSS3 Resize Property </title>
    <link rel="Stylesheet" href="style.css" />
</head>
<body>
    <div id="resizeMe">
        Augue scelerisque? Rhoncus risus augue urna turpis vel, sit ultricies? Aliquam sociis. Dapibus sed arcu 
        turpis? In auctor enim integer cras nisi, porta integer dolor tortor duis. Platea ac tortor dolor nec amet 
        lacus odio sed magna dictumst? Facilisis risus lorem magnis sociis? Adipiscing lundium aliquam est a amet 
        ultricies auctor tincidunt enim! Ut, pulvinar augue, arcu porttitor, nec porta ultricies phasellus tincidunt 
        odio placerat dignissim ac enim elementum non, elit sociis, magnis mid nunc, turpis aenean ridiculus, diam nunc 
        parturient est amet porttitor, magna. Vut porta aliquam vel lorem a eros habitasse, nunc, augue urna! Lacus a, 
        purus. Nunc, pulvinar cursus, urna in, magna! Ridiculus, elit risus egestas ac. Habitasse arcu! Parturient proin, 
        cursus sit pellentesque diam phasellus, aliquam! Enim eros elit montes natoque ac. Massa quis! Mattis ridiculus 
        turpis proin. Et turpis etiam facilisis sit dapibus nunc nisi, magna phasellus magna elit! Magnis sagittis 
        pellentesque, dis non rhoncus scelerisque sed! Aliquam sed placerat amet augue pulvinar augue, turpis, in mus 
        magna ac porta mattis, augue, natoque dapibus nunc duis purus nunc mus nascetur sed! Odio. Etiam rhoncus turpis, 
        a pulvinar sagittis! Dignissim sed sed pulvinar magna purus elementum ac scelerisque. Rhoncus porttitor sit placerat 
        massa pulvinar tortor mid.
    </div>
</body>
</html>

STEP TWO:

The CSS

The next step will be to make our div element a bit more visible. Here’s the CSS that we’ll use to accomplish that:

#resizeMe 
{
    background-color: #2794cf;
    border: 1px solid;
    height: 60px;
    overflow: hidden;
    width: 60px;
}

So, now we can see our div a little bit better, and because the overflow is set to hidden, the text will not break outside of the box. The next step is to make our lovely div element resizable. Are you ready for the insane amount of code it takes to get this working? Here it is:

#resizeMe 
{
...
    resize: both;
 
}

That’s it! Both just mean that you’d like the user to be able to resize the div both vertically and horizontally. You could substitute the both declaration and use only horizontal or vertical if you so choose. Either way, you now have a very simple solution to making your div elements resizable. This works best in situations like the demo in which you have a large group of text that you’d like the user to be able to shrink and expand at will.

The resize property is just one of the many tools that are on the menu for the final CSS3 specs. Keep in mind that not all browsers fully support CSS3, but you can begin adding it to your sites today! Using the resize property gives you just one more way to keep things compact, but dynamic enough for your user to manipulate. Until next time!

Download Source Files

The post The CSS3 Resize Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/the-css3-resize-property/feed/ 0