Posts Tagged ‘html’

Box Shadow and CSS3

Box Shadow and CSS3

written by: jason

Coming from a print background, I use drop shadows all the time. They look good (when not overused) and print well. Not to mention they are easy to create with practically a click of a button in Photoshop. On the web though, designers have to be VERY careful when using shadows. There are too many variables that we can’t control such as the resolution of the monitors of our visitors as well as browser that they are using. Plus, you always have to ask yourself why you need a drop shadow. Are you adding it just because you can, or is it helping the reader somehow. Right now, I have the opinion that shadows are OK on background images and logos, but I steer clear of using them on text. I just find it makes it way too hard to read. One more word of advice is to make the shadows SUBTLE. Do not use black (#000) as the color of your shadows.

OK, here’s the css code that will create shadows in Firefox 3.5+ and Safari 3+, Opera 10.5 and Chrome. Internet Explorer is still lagging behind 🙁

  1. -moz-box-shadow: 5px 6px 7px #d0d0d0;
  2. -webkit-box-shadow: 5px 6px 7px #d0d0d0;
  3. -box-shadow: 5px 6px 7px #d0d0d0;
-moz-box-shadow: 5px 6px 7px #d0d0d0;
-webkit-box-shadow: 5px 6px 7px #d0d0d0;
-box-shadow: 5px 6px 7px #d0d0d0;

-moz-box-shadow will create shadows in Firefox
-webkit-box-shadow is used for Safari and Chrome browsers
-box-shadow is used for Opera

The numbers: in the above example, the 5px is the horizontal offset. The 6px is the vertical offset, the 7px is the blur (gaussian) and the hexadecimal number is of course the color of the shadow. This will place the shadow to the bottom right of your object. Negative values for the horizontal and vertical offsets will place the shadow to the upper left of the object.

Easy-peasy.

Line-height Effect

Line-height Effect

written by: jason

I accidentally came across this effect that I use for my sidebar headings. Notice how the text seems to “fall out” of the background. This is achieved not with background images, but css. And it’s pretty simple to accomplish. Here’s what we’re after.

Heading Title

First, you need a little html to call in your css. For this example, I’ll use this:

  1. <h3 class="heading">Heading Title</h3>
<h3 class="heading">Heading Title</h3>

That ought to do it. Now you’ll need to style it in your css with a class of “heading”. Here’s the css that styles it.

  1. .heading {
  2.     color: #fff;
  3.     height: 45px;
  4.     line-height: 135%;
  5.     font-size: 400%;
  6.     text-transform: uppercase;
  7.     background: #000;
  8.     padding: 5px;
  9. }
.heading {
	color: #fff;
	height: 45px;
	line-height: 135%;
	font-size: 400%;
	text-transform: uppercase;
	background: #000;
	padding: 5px;
}

I’m using a class instead of an id because I want to be able to use it on ALL my sidebar headings. And everyone knows that id’s are used only once on a page and class can be used as many times as you’d like.
OK, the main points to remember here are that you have to give the div a height (in our case 45px). That keeps it from expanding when you bump up the line-height. And that brings us to the line-height property. I’m using 135% but you may need to play around with that until you reach the number that best suits your needs depending on the height you gave. That’s it!

If you want to get REALLY fancy, you can add a text-shadow to the css and get something like this:

Heading Title

Add this to the css for the shadow:

  1. text-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;
Adding “Box of Color” Behind List Links

Adding “Box of Color” Behind List Links

written by: jason

I’m not sure how to describe this, but you may have seen it in action in a sidebar. When you hover over a text link a colored background appears behind the text. It’s easy to accomplish, and I think it looks clean. So how do you do it? Here’s how.

First of all, you need a properly coded html list like so:

  1. <ul>
  2.     <li><a href="#">list item 1</a></li>
  3.         <li><a href="#">list item 2</a></li>
  4.         <li><a href="#">list item 3</a></li>
  5. </ul>
<ul>
	<li><a href="#">list item 1</a></li>
        <li><a href="#">list item 2</a></li>
        <li><a href="#">list item 3</a></li>
</ul>

The ul is the tag for an unordered list, the li is the tag for list item and the a href is an anchor tag.

And here is the css:

You will need to add styles to each of these – plus the hover state to the anchor tag – to make it work. I’ve commented the most important parts. Don’t forget to set the anchor tag to a block element. If you don’t, the color will only extend the width of the text and not the entire width of the ul.

  1. ul {
  2.     width: 300px; /*overall width of the list */
  3.     padding: 0; /*zero out the padding*/
  4.     margin: 0; /*zero out the margin*/
  5. }
  6.  
  7. li {
  8.     list-style: none; /*takes the bullet off the list item*/
  9.     padding: 5px 0px;
  10.     width: 300px;
  11.     border-bottom: 1px solid #707070;
  12.     height: 20px; /*have to give a height here and on the li a */
  13.     margin-bottom: 5px;
  14. }
  15.  
  16. li a {
  17.     font-size: 120%;
  18.     line-height: 130%;
  19.     font-family: "Century Gothic", Verdana, "Myriad Pro", sans-serif;
  20.     display: block; /*very important. Setting this to block makes sure your background expands the entire 300px and not just the width of the text */
  21.     height: 10px; /* height is need here also */
  22.     width: 300px;
  23.     padding: 5px 0 5px 5px;
  24. }
  25.  
  26. a:hover {
  27.     background: #9bb716; /*makes the background green on hover*/
  28.     text-decoration: none;
  29.     color: #fff;
  30.     width: 300px;
  31. }  
ul {
	width: 300px; /*overall width of the list */
	padding: 0; /*zero out the padding*/
	margin: 0; /*zero out the margin*/
}

li {
	list-style: none; /*takes the bullet off the list item*/
	padding: 5px 0px;
	width: 300px;
	border-bottom: 1px solid #707070;
	height: 20px; /*have to give a height here and on the li a */
	margin-bottom: 5px;
}

li a {
	font-size: 120%;
	line-height: 130%;
	font-family: "Century Gothic", Verdana, "Myriad Pro", sans-serif;
	display: block; /*very important. Setting this to block makes sure your background expands the entire 300px and not just the width of the text */
	height: 10px; /* height is need here also */
	width: 300px;
	padding: 5px 0 5px 5px;
}

a:hover {
	background: #9bb716; /*makes the background green on hover*/
	text-decoration: none;
	color: #fff;
	width: 300px;
}