dA adds new CSS attributes Skinners! Must read!

Fri Jul 20, 2012, 6:34 AM

Okay, as per the latest dA site update found here. CSS coders are now allowed to use 3 more properties to rock their journal skins.

The properties are:

1) content
2) counter-increment
3) counter-reset

~~~~EXPLANATION~~~~

Lets see what can we do with these new fancy stuffs!

What does these attributes do?

1) content--> it is used to insert generated content in your HTML (Journal body for DA). Don't worry, don't worry! I'll tell you what is this "generated" content!

2) counter-increment --> it is used to insert numbers (or counters) to sections or sub-sections. I'll explain what "sections" and "sub-sections" are don't worry again!

3) counter-reset --> it is used to reset the counters

All these 3 properties are generally interlinked and are used together. But the "content" property can be used alone and has some cool usage.

~~~~"content" property~~~~

The content property requires two pseudo-elements namely :before and :after to use it in the CSS coding.

The content can take different values such as none, normal, counter, attr(attribute), string, url(url) and, open-quote, close-quote, no-open-quote and no-close-quote. In this small demo I shall only use "string" and "attr(attribute)". The rest can be easily found in the internet if you search. (:

~~~~"content" property DEMO with "string" value~~~~

THE CSS:

.text p:before
{
content:"I am the content generated automatically";
background: orange;
}

.text p:after
{
content:"got it?";
background:blue;
color:white;
}

THE JOURNAL BODY:

<p>by the CSS at the backend!</p>

THE RESULT:

by the CSS at the backend!

Here, the :before and :after pseudo-elements used with the paragraph tag <p> is generating the content "I am the content generated automatically" and "got it?" automatically as defined in the CSS. Thus, on the usage of <p> tag in the journal body the pseudo-elements is generating the content at the beginning and end of <p> tag.

So, the :before selector inserts content before the content of the selected element(s) and :after selector inserts after the element(s).

~~~~"content" property DEMO with "attr(attribute)" value~~~~

THE CSS:

.text a:after
{
content:attr(href);
color:red;
font-weight:bold;
}

THE JOURNAL BODY:

<a href="URL">URL of the hyperlink ---> </a>

THE RESULT:

URL of the hyperlink --->

Here, content:attr(href) in the CSS is taking the href (which is the URL address) value of the <a> tag.

~~~~"counter-increment" and "counter-reset"property DEMO~~~~

THE CSS:
h1
{
counter-increment:index;
font-size:18px;
color:#a30e5b;
}
h1:before
{
content:"STEP " counter(index) ": ";
}
h3
{
counter-increment:subindex;
font-size:16px;
color:#2447e0;
}
h3:before
{
content:counter(index) "." counter(subindex) " ";
font-size:16px;
color:#2447e0;
}

THE JOURNAL BODY:
<h1> Index</h1>
<h3> Subindex</h3>
<h3> Subindex</h3>

<h1> Index</h1>
<h3> Subindex</h3>
<h3> Subindex</h3>

THE RESULT:

Index

Subindex

Index

Subindex

How, does the counter-increment work?
Simple! For an element you need to assign a counter first to do this type
counter-increment:subindex;

Here, "subindex" is the name of the counter. See in the CSS above I've use two counters namely "index" and "subindex" for the <h1> tag and <h3> tag Thus, they are both working simultaneously. I've also modified the content generated using strings such as "STEP", "." etc. to get a custom display of the result.

The counter-reset can be used to reset the counter using the syntax below...
counter-reset:COUNTERNAME NUMBER;

The COUNTERNAME is the name of the counter that you want to reset and the NUMBER denotes to which number you want the counter to get reset.

~~~~~~~~~~~~~~~~~

Now, this journal is getting draggy for me and I'm feeling bored to type anymore. So, I'm it ending now. Probably in my next journal I shall show what are the cool stuffs that you can do using these properties. There are much more that you can actually do with these rather than just incrementing numbers and getting simple strings generated using the content property.

CHECK THE CODES BELOW and SEE WHAT YOU CAN POSSIBLY DO!!

~~~~~~~~AWESOME HYPERLINK EFFECT~~~~~~~~~

THE CSS:
a
{
  color: #900;
  text-decoration: none;
}

a:hover
{
  color: red;
  background:white;
  position: relative;
}

a[title]:hover:after
{
  content: attr(title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 3px #333;
  -webkit-box-shadow: 0px 0px 3px #333;
  box-shadow: 0px 0px 4px #222;
  background:#349eda;
}

THE JOURNAL BODY:
<a title="The title is shown in an awesome way!" href="cyphervisor.deviantart.com">CSS-Tricks</a>