PROWAREtech

articles » current » css » tutorial » page-13

Cascading Style Sheets: Tutorial - Page 13

More on Images (More on Background Images), Box Shadows, Modifying the Style of Lists.

Here a tiled background is used:

#main {
	padding: 10px;
	background-image: url('backtile.png');
	background-repeat: repeat;
	background-position: 0% 0%;
}

Document Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

Here are some example tiles. The contrast should be lowered before using them as background.

Box Shadows

For box shadows, use the box-shadow property. For example, to set a horizontal offset of 8 pixels and a vertical offset of 8 pixels and a blur distance of 7 pixels:

#header {
	border: 1px solid #000;
	border-radius: 25px;
	box-shadow: 8px 8px 7px rgba(0,0,0,0.5);
}

Document Heading

Or, to set a shadow all around (notice the border has been removed):

#header {
	border-radius: 25px;
	box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

Document Heading

See this article for more information on box shadows.

Modifying the Style of Lists

Unordered lists (<ul> tag) use round-solid, round-hollow or square-solid bullets. Specify for the list-style-type property either disc, circle or square, respectively.

disc circle square
  • number 1
  • number 2
  • number 3
  • number 4
  • number 1
  • number 2
  • number 3
  • number 4
  • number 1
  • number 2
  • number 3
  • number 4

Ordered lists (<ol> tag) use different numbering schemes. Specify for the list-style-type property one of these values:

decimal decimal-leading-zero lower-alpha
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4
lower-roman upper-alpha upper-roman
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4
  1. number 1
  2. number 2
  3. number 3
  4. number 4

To remove the indent from the lists remove the bullets with this code list-style-type: none; and set the <ul> to have no padding and no margin: margin: 0; padding: 0;. This, for example, is how CSS menus are created.

To customize the list bullets or numbers:

ul li {
	list-style-type: none;
}
ul li:before {
	content: counter(item, square) " ";
	color: green;
}
ol li {
	list-style-type: none;
	counter-increment: item;
}
ol li:before {
	content: counter(item) ". ";
	color: blue;
}
  • number 1
  • number 2
  • number 3
  • number 4
  • number 1
  • number 2
  • number 3
  • number 4
<<<[Page 13 of 15]>>>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE