Shop Mobile More Submit  Join Login
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


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 <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. :D


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>

Put your mouse over the link below


CSS-Tricks


Keep rocking fellas!!
Sid

Add a Comment:
 
:icongillianivy:
GillianIvy Featured By Owner May 24, 2013  Hobbyist General Artist
Do you know any way to hide the tooltip (title attribute default of browser) or style it without using java? Since dA can't use java... ;P I see yours has the tooltip below your after content. I'm doing something on abbreviation and acronym so can't substitute alt instead.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 24, 2013
Just use display:none in the a[title]:hover:after class, ;P
Reply
:icongillianivy:
GillianIvy Featured By Owner May 25, 2013  Hobbyist General Artist
Nope, that didn't do it, that hides the after content, I want to keep my after but hide the pop up tooltip. I found a JS to do this, but cannot finds a satisfactory way to do this as a CSS only code.

$('a[title]').qtip({
show: false
});

Here's the journal I am working on [link] Scroll down towards the middle, you will see examples of ACRONYM and Abbreviation. When you hover them, the styled after appears using the title attribute. But then, a second later, the default tooltip appears. Which is browser based, you cannot code it or anything. There is a fake out that you don't use the title attribute, instead you use alt, but that is not available on abbreviation and acronym. There was another fake where you put a span container inside, but that is excessive code for the user to need to input. Why do abbreviation only to enclose a span to hold the pop up? That would be pointless.

Any other ideas? Or is it a no go on dA? The commission didn't request it or anything, I was just trying to see if I could remove it.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 26, 2013
I understand now. You want to disable the browser tooltip. Well, I have tried it myself to see if I can find a workaround to do that using CSS only. However, I don't see that to be possible without the help of js. :no: JS is required along with CSS to achieve that. CSS alone can't do it. :(

And yes you can fake out with alt attribute but as you said that doesn't apply to acronym and abbr :hmm:

nesting span tag is another way but yeah it is a long stuff. :XD:

So ultimately, you can't hide the tooltip using CSS alone.
Reply
:icongillianivy:
GillianIvy Featured By Owner May 26, 2013  Hobbyist General Artist
Okay, thanks for helping me brain storm it. ;D
Reply
:iconcyphervisor:
CypherVisor Featured By Owner May 26, 2013
Most welcome! :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 25, 2013  Hobbyist General Artist
to hide the default one? Okies. It will still let me do the styled replacement one though, right.... Okay, I think I see how that works there. Thanks!
Reply
:iconseranda7:
Seranda7 Featured By Owner Aug 4, 2012  Hobbyist General Artist
That's awesome, I wanted to use this just a few days ago!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Aug 5, 2012
I see! :eyes:
Reply
:iconeternalstay:
EternalStay Featured By Owner Jul 29, 2012
I think you misspelled Skinner :roll:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 29, 2012
Well, actually not. I had reached the total number of characters that can be entered for the journal title so I had to reduce one "n" in the skinner. But at that time I had written CSS3 which now I've replaced with just CSS so I guess I can put an "n" in the skinner! *Goes to edit the title again...* :D
Reply
:iconeternalstay:
EternalStay Featured By Owner Jul 29, 2012
Content is a CSS 2.1 attribute anyway ;P
[link]
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 29, 2012
Well, I know that too. You may read some comments that I got earlier mentioning about the same. :XD: But to grab people's attention I had put it to be as CSS3 intentionally. I had removed it after a while and made it as "CSS" as you can see now. :thanks:
Reply
:iconeternalstay:
EternalStay Featured By Owner Jul 29, 2012
Oh sorry, I normally read other comments first ^^;
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 29, 2012
Haha.. that's okay... :hug:
Reply
:iconpixiepot:
pixiepot Featured By Owner Jul 29, 2012  Student General Artist
Thank you for this, it will be very useful for future references.
May I also ask for an example for in what realistic instance would content be used in? Thank you.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 29, 2012
You're welcome dear. :hug: Umm... you can use content in many instances like having a pop-up button title, Image name highlighting over it or perhaps adding an image on hyperlinks at the end or beginning! :D
Reply
:iconpixiepot:
pixiepot Featured By Owner Jul 29, 2012  Student General Artist
:huggle:

Thank you! :) I'll try to use these elements in my next skin, I suppose. :) Also, thanks for the prompt reply.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 29, 2012
No problem! :hug:

And I shall be glad to see them! :thanks:
Reply
:iconpixiepot:
pixiepot Featured By Owner Jul 29, 2012  Student General Artist
:hug:

Thank you! :huggle:
Reply
:iconfirstfear:
firstfear Featured By Owner Jul 28, 2012  Professional Digital Artist
thank you for this!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 29, 2012
You're welcome dear! :hug:
Reply
:iconsingingflames:
SingingFlames Featured By Owner Jul 28, 2012  Hobbyist Writer
Oh, neat! I'm still learning all this, but this is good to know. :)
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 28, 2012
That's great. And thanks.. :)
Reply
:iconasjjohnson:
AsjJohnson Featured By Owner Jul 26, 2012  Hobbyist General Artist
Can I use the :before one to put a :icon : code in front of something? If so, can you show me how?
Or can I put something like, another paragraph within the :before thing? Like, :before {<p class="myclass">}
...though, it looks like it's not possible to use that property that way...
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 26, 2012
Well, you can surely use string to generate content using the :before pseudo-element so I think you can have a paragraph generated using it. But I'm not sure how long the string can be to be used.

I don't know whether it is possible to generate the :iconUSERNAME: code. But it would be awesome though! :la: You've given a nice perspective here. I can give a try to see if that's possible! :D
Reply
:iconasjjohnson:
AsjJohnson Featured By Owner Jul 26, 2012  Hobbyist General Artist
I mainly wondered because I tried making the default journal skin, and when I pushed the mini-avatar in front of the date, it messed up the bottom of the journal. So if I could use the content thing to put the avatar there, it would probably work better.
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 26, 2012
Hmm... Okay! :nod:
Reply
:iconchivi-chivik:
Chivi-chivik Featured By Owner Jul 22, 2012  Hobbyist Digital Artist
Cool, but this is CSS2, for you to know :|
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
Yes, actually I know its CSS2. I have mentioned it as CSS3 so people gets an interest to view it as something new in the dA CSS you know. :P May be I'll change it to CSS2. :D

But, it's great that you've mentioned it after noticing! :hug:
Reply
:iconchivi-chivik:
Chivi-chivik Featured By Owner Jul 22, 2012  Hobbyist Digital Artist
Now I understand! :iconigetitplz:
:) But I'd have been interested anyways (this in my case) because DA still has many CSS limits than other webpages. :(

not at all :meow:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
Its better to limit some of this properties I would say otherwise too much customization can make DA dirty. :no:
Reply
:iconchivi-chivik:
Chivi-chivik Featured By Owner Jul 22, 2012  Hobbyist Digital Artist
Yes, but there are others that could be awesome. (as the 'border-radius' one) :|
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
border-radius does work in dA. And I use it often in my skins.. :)
Reply
:iconchivi-chivik:
Chivi-chivik Featured By Owner Jul 22, 2012  Hobbyist Digital Artist
seriously? It told me that it didn't work! :(
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 23, 2012
Huh! :O It works fine. :)
Reply
(1 Reply)
:iconarchaemic:
archaemic Featured By Owner Jul 22, 2012  Hobbyist Digital Artist
These are all CSS2...
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
Yes, actually I know its CSS2. I have mentioned it as CSS3 so people gets an interest to view it as something new in the dA CSS you know. :P May be I'll change it to CSS2. :D

But, it's great that you've mentioned it after noticing! :hug:
Reply
:icondynamicability:
dynamicability Featured By Owner Jul 22, 2012
awesome... I need to try :D

but I'll will try if I have a premium membership :P
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
You can try it in your stash writer I suppose! :D

Though you might not be able to use it. :hmm:
Reply
:icondaremaker:
daremaker Featured By Owner Jul 21, 2012
I seriously need to learn some coding @.@
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
Haha...Sure thing! Go ahead! :hug:
Reply
:iconlucas420:
lucas420 Featured By Owner Jul 21, 2012  Hobbyist Traditional Artist
aah yes!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
:D
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 21, 2012   General Artist
Wow, this looks pretty awesome! :la:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
Yeah! :la:
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 24, 2012   General Artist
:la: I love la
Reply
:iconjaney-in-a-bottle:
janey-in-a-bottle Featured By Owner Jul 21, 2012  Hobbyist General Artist
I have a bad feeling about IE support here, though... ^^;
apart from that, the counter sounds awesome. :)
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jul 22, 2012
Actually it works! :nod: atleast in the latest IE9. Don't know if it works in the previous version though! :|
Reply
:iconjaney-in-a-bottle:
janey-in-a-bottle Featured By Owner Jul 22, 2012  Hobbyist General Artist
at work we'll have to create sites that have to be compatible down to IE7. that's really annoying, since we can't use so many nifty CSS rules... especially the counter would make my work with the long FAQ pages a lot easier... oh well. :shrug:
but good to know about IE9. :)
Reply
Add a Comment:
 
×

Featured in Collections


More from DeviantArt



Details

Submitted on
July 20, 2012
Link
Thumb

Stats

Views
5,394
Favourites
100 (who?)
Comments
120
×