CSS Code Hinting in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver

How to Interact with Object Attributes with CSS3’s attr() Function

The attr() function is interesting because it lets you interact with any attribute of an object as part of a style. You see this function used in a number of unique ways on the Internet, even though it seems to be a well-kept secret for the most part.

One site that demonstrates a quick application that relies on attr() is The New Hotness: Using CSS3 Visual Effects. The following procedure demonstrates the attr() function in a simpler way so that you can better understand the few examples online that demonstrate it in a detailed way.

  1. Create a new HTML5 file with your text editor.

  2. Type the following code for the HTML page.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Using the attr() Function</title>
     <link rel="stylesheet" href="Attr.CSS" />
    </head>
    <body>
     <h1>Using the attr() Function</h1>
     <p id="TestMe"
     TestText="Hello">
     World
     </p>
    </body>
    </html>

    All you have here is a heading and paragraph. Notice that the paragraph defines a standard attribute, id, and a non-standard attribute, TestText. The attribute you use for the attr() function need not be standard — you can define any attribute desired.

  3. Save the file as Attr.HTML.

  4. Create a new CSS file with your text editor.

  5. Type the following CSS style information.

    #TestMe:before
    {
     content: attr(TestText);
    }

    The style begins by saying that the output from the style should appear before the tag referenced by TestMe as an id. It then sets the content of that area to the current value of the TestText attribute by using the attr() function.

  6. Save the file as Attr.CSS.

  7. Load the Attr example.

    The output is pretty much what you’d expect, Hello World. The attr() function can make it possible for you to hide and use all sorts of information in your pages, reuse information in different ways, or even perform debugging tasks.

    image0.jpg
blog comments powered by Disqus
Create a New Style Sheet in the CSS Styles Panel
How to Apply CSS3 Effects and Transforms in Dreamweaver
How to Work With the Basic Box Model in CSS3
How to Create a Border around an Image in CSS3
How to Change an Element’s CSS in CSS3
Advertisement

Inside Dummies.com