Close

Home » Web Development » CSS (Page 2)

‘CSS’ Category

May 4th, 2010

CSS Arrows and Diamonds

Quick example of pure CSS power

Not that this is of much use it shows just how powerful CSS is!
There are a few spots that code like this can be applied as an alternative to using an image.

Did you know you can make an arrow out of pure CSS!

As seen in the post thumbnail, you can create arrows, diamonds and endless other shapes.

Now this is not production code here, just an example.
Here is the rough CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.arrow-block {
	float:	left;
	display: block;
	position: relative;
	width: 220px;
	height: auto;
	margin: 20px;
}
.horizontal {
	float: left;
	display: block;
	width: 200px;
	height: 15px;
	background: #333;
}
.arrow-left {
	float:	left;
	border-right: 20px solid #333;
	border-top:	20px solid transparent;
	border-bottom: 20px solid transparent;
	width: 0px;
	margin: -12px 0 0 0;
}

And this is the HTML

1
2
3

<div class="arrow-block">
	<div class="arrow-left"></div><div class="horizontal"></div>
</div>

The transparent borders are the key border-top: 20px solid transparent;.
They overwrite the colored part of the border.

You can see the code in action here in this demo.
Check out the source code for that page!

Tags: , ,
Posted in CSS | No Comments »

April 9th, 2010

Styling Lists with Images

This is a web developer insider trick.
As most people know, when you add the property list-image to style a list you have almost no control over where the image lands.
This is particularly ugly when comparing different browsers or when your image sits to high, low or almost on the text of your list.

I’m going to show you how to style a list item with a tick and keep full control over where the image lands.
First thing is to through out the list-style-image property as it is useless.
Use a normal background property.

1
2
3
4
5
6

ul.tick li {
	list-style:			none;
	background:		url('images/tick.png') no-repeat 0 1px;
	padding:			0 0 0 24px;
	line-height:		1.4em;
}

Doing this you can not only use the background positioning values but also the padding property.
For this tick I am pushing it down 1px with the top position property and adjusting the distance between the text and the icon with 24px of left padding.

Using these properties for list style images instead of the actual list-style property gives you full control.

  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something
  • Something

Tags: , , , ,
Posted in CSS | No Comments »