CSS3 for Design Experts: Four Attributes to Use Today

With the introduction of CSS3, design options for websites have changed a lot. Especially animations and transparencies are commonly used ever since. However, there are a lot of attributes that are rarely seen. The lack of browser support is not a good enough reason to forgo these options anymore. Thus, in your next project, you should try four of these wrongfully neglected CSS3 attributes.

CSS3 Tip 1: Individual Frames With "border-image"

The individual design of frames was impossible before CSS3. While there was a selection of predefined frames - like simple, double, or dotted ones -, that was pretty much it. [caption id="attachment_85531" align="alignnone" width="90"] Frame Graphic[/caption] With the CSS3-attribute "border-image," frames can be custom made via a graphic. Here, the graphic is divided into nine areas. The eight outer areas are the frame or the frame corners.

p {
  border: 30px solid transparent;
  border-image: url("frame.png") 30 round;
}

This example shows how a frame is defined. First, "url()" is used to put in the graphic's web address. The second value defines how the graphic will be divided into its nine components. Typically, all nine areas are of equal size (divided into thirds). However, you can also enter absolute values in pixels (without a unit), or percentual values (with a percent sign). The final value defines if the lines are merely repeated ("repeat"), repeated and rounded ("round"), or if they are not repeated, and simply stretched to the total width or height, respectively ("stretch"). [caption id="attachment_85530" align="alignnone" width="640"] Rounded, repeated, and stretched frames[/caption] The frame's width is still defined via "border," or "border-width." To hide the default frame, you should set the frame color to "transparent," as shown in the example. "border-image" is supported by all common browsers, such as the Internet Explorer, Chrome, Firefox, and Safari.

CSS3 Tip 2: Numbering With "counter-reset" and "counter-increment"

Numbered lists with the "<ol>" element have never been an issue. However, things become more difficult if you want to automatically number headings within a document, for instance. Here, the different "counter" attributes are used. [caption id="attachment_85532" align="alignnone" width="640"] Numbered Heading[/caption] First, define a counter for your document, by assigning any name to the attribute "counter-reset." This attribute resets the specified counter. You can set an unlimited number of independent counters.

body {
  counter-reset: chapter;
}

Subsequently, select an element to apply the counter to, and assign the attribute "counter-increment" with the counter name. Subsequently, using the function "counter()", you can receive the numbering via "::before", or "::after".

h2::before {
  counter-increment: chapter;
  content: "Chapter " counter(numbering) ": ";
}

"counter-reset" and "counter-increment" are supported by all common browsers.

CSS3 Tip 3: Fitting Images With "object-fit"

Static web designs are becoming increasingly rare. More and more layouts are either responsive or fluid so that elements always adapt to the available space. With images, this is still a bit of a problem, though. Oftentimes, they are merely scaled down due to a lack of space. With the attribute "object-fit", there are different options to adjust them. To do so, first, define a width and height for the image. If these have a divergent aspect ratio, "object-fit" comes into play. [caption id="attachment_85533" align="alignnone" width="640"] Image with and without (top) "object-fit": "cover" and "contain"[/caption] With the value "cover," the attribute makes sure that the image always keeps its aspect ratio, and fills the entire area of the element. However, here, areas on the right and left or top and bottom, respectively, are cut off to prevent the image from filling the entire space. Alternatively, the value "contain" lets you scale the image in a way that the entire image is visible when keeping the aspect ratio. In contrast to "cover," there are edges on the left and right, or top and bottom border, respectively. Except for the Internet Explorer, all common browsers support this attribute.

CSS3 Tip 4: Clipping Texts Via "text-overflow"

With especially small resolutions, images are not the only thing that needs to be clipped. Sometimes, texts are too long as well. Usually, this is not an issue for continuous text. It is simply wrapped. The main problem can occur with headings with long words or texts, which are displayed on a single line. [caption id="attachment_85534" align="alignnone" width="640"] Text With and Without "text-overflow"[/caption] The CSS3 attribute "text-overflow" prevents texts from just sticking out of the available space, by clipping them, and assigning ellipsis dots. The attribute doesn't work alone, though, but in combination with the attribute "overflow," and the value "hidden."

h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

In the example, the text of an "<h2>" element is clipped via "text-overflow". The value "ellipsis" makes sure that the clipped text is equipped with ellipsis dots. "white-space" also prevents the text from becoming multi-line. Using the value "clip" instead of "ellipsis" results in clipping without ellipsis dots. All common browsers support this attribute. (do)