HOME | DD

Description
body div#devskin8071024 .gr-box { max-width:800px; margin:auto; } body div#devskin8071024 .gr-top h2 { color:#2c3635; } body div#devskin8071024 .gr-top h2 a { color:#2c3635; _background:url('https://fc05.deviantart.net/fs70/f/2012/185/7/3/deviousness_award_by_cyphervisor-d55xhkr.jpg') no-repeat; margin-left:-27px; padding-left:31px; _border:1px solid red; } body div#devskin8071024 .gr-top span, body div#devskin8071024 .list, body div#devskin8071024 .bottom, body div#devskin8071024 .gr-top h2 img { display:none; } body div#devskin8071024 .gr-body { background:#d6e883; border-top:0; padding-bottom:0; } body div#devskin8071024 img { margin-bottom:-20px; } body div#devskin8071024 .text { color:#2c3635; max-width:98%; margin:auto; padding-bottom:0; _margin-bottom:-20px; } body div#devskin8071024 a { color:#2c3635; } body div#devskin8071024 .gr2.gb, body div#devskin8071024 .gr3.gb { background:#f1f2ea; } body div#devskin8071024 .text p:before { content:'I am the content generated automatically'; background:orange; } body div#devskin8071024 .text p:after { content:'got it?'; background:blue; color:white; } body div#devskin8071024 .text a:after { content:attr(href); color:red; font-weight:bold; text-decoration:none; } body div#devskin8071024 .text a.clr:after { content:none; } body div#devskin8071024 h1 { counter-increment:index; font-size:18px; color:#a30e5b; } body div#devskin8071024 h1:before { content:'STEP ' counter(index) ': '; } body div#devskin8071024 h3 { counter-increment:subindex; font-size:16px; color:#2447e0; } body div#devskin8071024 h3:before { content:counter(index) '.' counter(subindex) ' '; font-size:16px; color:#2447e0; } body div#devskin8071024 a.awesome:after { content:none; } body div#devskin8071024 a.awesome { color:#900; text-decoration:none; } body div#devskin8071024 a.awesome:hover { color:red; background:white; position:relative; } body div#devskin8071024 a.awesome[title]:hover:after { content:attr(title); padding:4px 8px; color:#fff; position:absolute; left:0; top:100%; white-space:nowrap; z-index:20; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0px 0px 4px #222; -moz-box-shadow:0px 0px 4px #222; -webkit-box-shadow:0px 0px 4px #222; box-shadow:0px 0px 4px #222; -moz-box-shadow:0px 0px 4px #222; -webkit-box-shadow:0px 0px 4px #222; box-shadow:0px 0px 4px #222; -moz-box-shadow:0px 0px 4px #222; -webkit-box-shadow:0px 0px 4px #222; background:#349eda; }

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:

by the CSS at the backend!

THE RESULT:
by the CSS at the backend!

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

URL of the hyperlink --->

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 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:
Index

Subindex

Subindex

Index

Subindex

Subindex

THE RESULT:
Index
Subindex
Subindex

Index
Subindex
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
tag and
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:
CSS-Tricks

Put your mouse over the link below
CSS-Tricks

Keep rocking fellas!!
Sid

:D (Big Grin) — Description
body div#devskin8071024 .gr-box { max-width:800px; margin:auto; } body div#devskin8071024 .gr-top h2 { color:#2c3635; } body div#devskin8071024 .gr-top h2 a { color:#2c3635; _background:url('https://fc05.deviantart.net/fs70/f/2012/185/7/3/deviousness_award_by_cyphervisor-d55xhkr.jpg') no-repeat; margin-left:-27px; padding-left:31px; _border:1px solid red; } body div#devskin8071024 .gr-top span, body div#devskin8071024 .list, body div#devskin8071024 .bottom, body div#devskin8071024 .gr-top h2 img { display:none; } body div#devskin8071024 .gr-body { background:#d6e883; border-top:0; padding-bottom:0; } body div#devskin8071024 img { margin-bottom:-20px; } body div#devskin8071024 .text { color:#2c3635; max-width:98%; margin:auto; padding-bottom:0; _margin-bottom:-20px; } body div#devskin8071024 a { color:#2c3635; } body div#devskin8071024 .gr2.gb, body div#devskin8071024 .gr3.gb { background:#f1f2ea; } body div#devskin8071024 .text p:before { content:'I am the content generated automatically'; background:orange; } body div#devskin8071024 .text p:after { content:'got it?'; background:blue; color:white; } body div#devskin8071024 .text a:after { content:attr(href); color:red; font-weight:bold; text-decoration:none; } body div#devskin8071024 .text a.clr:after { content:none; } body div#devskin8071024 h1 { counter-increment:index; font-size:18px; color:#a30e5b; } body div#devskin8071024 h1:before { content:'STEP ' counter(index) ': '; } body div#devskin8071024 h3 { counter-increment:subindex; font-size:16px; color:#2447e0; } body div#devskin8071024 h3:before { content:counter(index) '.' counter(subindex) ' '; font-size:16px; color:#2447e0; } body div#devskin8071024 a.awesome:after { content:none; } body div#devskin8071024 a.awesome { color:#900; text-decoration:none; } body div#devskin8071024 a.awesome:hover { color:red; background:white; position:relative; } body div#devskin8071024 a.awesome[title]:hover:after { content:attr(title); padding:4px 8px; color:#fff; position:absolute; left:0; top:100%; white-space:nowrap; z-index:20; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0px 0px 4px #222; -moz-box-shadow:0px 0px 4px #222; -webkit-box-shadow:0px 0px 4px #222; box-shadow:0px 0px 4px #222; -moz-box-shadow:0px 0px 4px #222; -webkit-box-shadow:0px 0px 4px #222; box-shadow:0px 0px 4px #222; -moz-box-shadow:0px 0px 4px #222; -webkit-box-shadow:0px 0px 4px #222; background:#349eda; }

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:

by the CSS at the backend!

THE RESULT:
by the CSS at the backend!

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

URL of the hyperlink --->

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 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:
Index

Subindex

Subindex

Index

Subindex

Subindex

THE RESULT:
Index
Subindex
Subindex

Index
Subindex
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
tag and
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:
CSS-Tricks

Put your mouse over the link below
CSS-Tricks

Keep rocking fellas!!
Sid