Shop More Submit  Join Login
×

Featured in Collections

Journals by DeviBrigard


More from deviantART



Details

Submitted on
July 20, 2012
Link
Thumb

Stats

Views
5,106
Favourites
102 (who?)
Comments
120
×
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
Add a Comment: