dA has changed the allowed CSS properties slightly, and I (`electricjonny) wanted to write about them here so that people can understand what they are and how to use them.

Not everything I'm writing about is new, but I wanted to go over some things in a bit more detail so people can understand how it's used.  Below you can see some links that will jump down to the specific area talking about them (unless you superbrowsed over to this journal (with the #/d type link).  In which case, you're out of luck, I think.  Click the title here to load this page normally).




So here is an example of a border-radius, which many of you probably already know of, but here it is again (you can hover over the CSS property to get a tooltip with more information):


Here's another div with a border-radius, but not all corners have the same radius value:





box-shadow is a handy property you can apply, although it's a bit more complicated.  But here's a simple example:


That's the simplest form you can write out a box-shadow.  But you can make it a bit more complicated, for example, adding a spread value to the shadow.  A spread value is how much to shrink or expand the shadow.  So here's that same example, but I've expanded the box-shadow by 5 pixels:


Then you can tell the shadow to be an inset shadow, so that it's applied inside of the div and not on the outside.  You can do this by simply adding inset after your color value.  here's a box-shadow with an inset shadow type:


Then to add even more customization, you can add box-shadow's on top of each other, to add more of them.  Here's a div with multiple box-shadow's:





rgba() is a way to specify color values based on red green and blue values, and an alpha value.  This is useful to put transparency into the color.  Below is the same blue colored box as above, but at lower than half opacity, which should show the background texture:


The rgba() color notation can be used anywhere that you can put colors.  You may need to specify the opacity value with a 0 in front of the decimal, but that may change in the future.  If you get errors using rgba() try making the alpha value start with a 0.




As you may know if you style a lot of things, comments are very useful in making notations about what a specific thing does.  The comment doesn't effect the style at all, it's just used to let people know what the developer is doing with the code.  Comments are written between /* and */.  So this is a proper comment: /* this selector styles the headings */.  Below is an example of some CSS and a comment:





The :before: and :after and content selectors and properties are all related, and it lets you apply content based on CSS rather than HTML.  The :before and :after selectors let you apply content before and after certain classes and selectors, and what is before and after is selected based on the content property.  That's a bit hard to explain, but here is an example:


Now that specific example is a bit strange and useless.  Lets see what else we can do.  We don't have to use text with content.  We can use images (and more), so lets see what happens when we use an image.  Here is the same CSS, but instead of using text, I'm going to apply an image:


But wait, there's more!  So we can use text for content and also images.  But we can also append attributes to things.  This is a bit complicated, but lets say you want to put the location of a link after the link.  Here's what I mean:


Now lets adjust things a tad more to get something useful - remove the [link] part and apply our image to any link we post:


And of course, the same works with :before, and it will add your content before the selector.

You'll notice that I've used this to add " - (time since posted)" after the .timestamp class at the top here: content:" - ("attr(title)")";




[attr="foo"] is a way to get more selective with your selectors.  We've been selecting things we want to style with classes (prefixed with a period), and DOM elements (like img).  With [attr="foo"] selectors, you can select attributes specifically based on what the attribute value is.  For example, we can select all href links that are youtube.com or youtu.be domains differently from all other domains.  So you can see, based on the link color, that some links are youtube domains, while other links aren't (ok, well technically youtube.com or youtu.be just needs to be somewhere in the domain, but dA's crappy outgoing filter sort of screws this up.  But I hope you get the idea):


There are four ways to select things based on the attribute value. 

• [attr="foo"] means "this attribute must match this value in order to be true".
• [attr^="foo"] means "this attribute must start with this value to be true".
• [attr$="foo"] means "this attribute must end in this value to be true".
• [attr*="foo"] means "this attribute must contain this value anywhere in the value to be true".

So as you can imagine, you can start getting creative with how you style things based on what kind of attributes you or dA uses.  You can get pretty specific with how certain links look based on the href value, or you can play with how the .timestamp class here looks, if you want to style it differently when the title says a certain thing.

Just so you know, right now you can't use any / character in your attribute.  So you can't use [href*="/art/"] to select only those specific URL's.