dA-related CSS Tutorials as well as general CSS Tutorials only!! :thanks:
:iconclear-plz:
Pseudo-classes/elements : vs :: by Celvas, journal
Pseudo-classes/elements : vs ::
Well, I'll be - where did that double-colon come from? It didn't come over the sea and it wasn't in search of India. No, it came with CSS3 and it is not, as some people believe, the new single-colon.
The double-colon is W3C's attempt to clarify the distinction between pseudo-elements and pseudo-classes, both of which received the same single-colon treatment in CSS1 and 2. Basically...
::after
::before
::first-letter
::first-line
::selection
... not all of which are accessible on deviantART - are pseudo-elements. The pseudo-classes (:active, :hover, etc.) are still subject to the single-colon.
Now I have good news and bad news. The bad new
Hi! In this short tutorial I want to dive you into CSS Transitions! Before start: you need some CSS and HTML coding skills. Like an example we will use a simple button. You may open CSSdeck and hove some practice after reading the tutorial.
So, let's create a simple base like.
HTML:
<div class="button">Button</div>
And CSS:
.button {
background: #234C68; /* Background color of the button */
color: white; /* Button's text color */
font-size: 13pt; /* Font's of the button's text size */
display: inline-block; /* Button's display type in the web page's content */
line-height: 1em; /* Line height */
pad
CSS Tricks: Deviations in Journals by pica-ae, literature
Literature
CSS Tricks: Deviations in Journals
As promised in my previous tutorial CSS Tricks: Journal break-down comes the follow up tutorial about styling deviations in journals.
You'll see what classes deviations are built from and how to "hack" them in order to style them entirely to your preference. I will cover regular image thumbs, literature and other text deviation thumbs and embedded deviations.
Deviation Thumbs
Aaah, the traditional way of featuring art in your journal.
Generally, all thumbs consist of an image file, a link and one or more containers around both image and link. This tutorial will explain how those are built up exactly, and also explain the elements text thum
CSS Tricks: Journal break-down by pica-ae, literature
Literature
CSS Tricks: Journal break-down
This has been done before by many others :dummy: I don't want to step on anyone's toes, I just wanted to give this a go myself :)
If you still write CSS NOT using gruze … stop that! Start using gruze. Just do it!
There are a few "hacks" that you will need to make it work totally under your control, but there's always help with those :XD:
Well, here comes help with those hacks :la: (I gotta give GinkgoWerkstatt (https://www.deviantart.com/ginkgowerkstatt) credit for some of it, go hug her! That's an order :evileye:)
At the end of this CSS Trick I will provide you with a template, that I use myself, as a base for creating new skins. It will only contain the basic classes of the jo
CSS Tricks: Before and After! by pica-ae, literature
Literature
CSS Tricks: Before and After!
No, this is not about a tv show in which I take a CSS and make it prettier ;)
It is about the pseudo-elements ::before and ::after.
They are similiar for example to the :hover element, meaning that it is not necessary (or possible) to add them to the HTML, but can be controlled purely by writing CSS. They are always there, but whether they are visible depends on whether you code them or not.
::before and ::after are almost self-explanatory pseudo-elements. They define what happens either before or after a regular HTML element. They can be applied to any element.
Let's get right going!
So in the first simple example we are going to add gui