Articles

7915 Articles
{
,

}

counter-reset

The counter-reset property allows for automatic numbering of elements. Like an ordered list (<ol) element.

article {
  counter-reset: section;
}
section {
  counter-increment: section;
}
section h2:before {
  content: counter(section) '. ';
}

The counter-reset property is used …

Avatar of Sara Cope
Sara Cope on (Updated on )

counter-increment

Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be. 

<body>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</body>
body {
  counter-reset: my-awesome-counter;
}
section {
  counter-increment: my-awesome-counter;
}
section:before {
  content:
…
Avatar of Sara Cope
Sara Cope on (Updated on )

content

The content property in CSS is used in conjunction with the pseudo-elements ::before and ::after. It is used to literally insert content. There are four value types it can have.

String

.name::before {
  content: "Name: ";
}

Then an …

Avatar of Sara Cope
Sara Cope on (Updated on )

color

The color property in CSS sets the color of text and text decorations.

p {
  color: blue;
}
Values

The color property can accept any CSS color value.

  • Named colors: for example, “aqua”.
  • Hex colors: for example, #00FFFF or #0FF.
…
Avatar of Sara Cope
Sara Cope on (Updated on )

clear

The clear property is directly related to floats. If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the …

Avatar of Sara Cope
Sara Cope on (Updated on )

steps()

Direct Link

Lea Verou makes a “typing” animation with the CSS3 sub-property steps which allows you to specify how many keyframes an animation uses. Knowing the number of keyframes means you can know exactly that the CSS will be like at that …

Avatar of Chris Coyier
Shared by Chris Coyier on (Updated on )

Tabs with Round Out Borders

A technique for a rounded tabs where the top corners are rounded, but also the bottom corners are rounded where they attach to the content area. "Round out" or "flared" borders, if you will.
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Adaptive Images

Direct Link

Project from Matt Wilcox for serving the right images to the right devices (i.e. small images to small browser windows, large images to large browser windows). Small browser windows, regardless of bandwidth considerations, shouldn’t get a giant image scaled down …

Avatar of Chris Coyier
Shared by Chris Coyier on

backface-visibility

The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the “front” of an element no longer faces the screen. For instance, this would flip an element …

Avatar of Sara Cope
Sara Cope on (Updated on )

box-sizing

The box-sizing property in CSS controls how the box model is handled for the element it applies to.

.module {
  box-sizing: border-box;    
}

One of the more common ways to use it is to apply it to all elements on …

Avatar of Sara Cope
Sara Cope on (Updated on )

flex

The flex property is a sub-property of the Flexible Box Layout module.

This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional.

Syntax 
flex: none |
…
Avatar of Sara Cope
Sara Cope on (Updated on )