Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

Submitted on
May 16, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
7,913 (14 today)
Favourites
125 (who?)
Comments
38
×

CSS Did You Know? - May 16th, 2013

Thu May 16, 2013, 10:05 PM

{

CSS Did You Know?

}


Volume 11


:iconcss-dyk:

Welcome

CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note CSS-DYK. :)

Inside

Journals are like Ogres by GillianIvy
Color Models and Transparency by jonarific


:icongillianivy:

Journals are like Ogres



They both have layers!  And they both can make you cry.  The deviantART journals have two different structures.  The original 'Old School' layout where everything is named .journalbox, etc.  And my preference, the newer gruze structure.  I prefer the gruze expressly because it is chockful of layers.  Kinda like cake or onions, but ogres makes sense too.  You can still make a basic simple journal skin with the gruze structure and it has so many layers that you can use what they have instead adding more and more stuff on the user end.

Already, ginkgografix has made a very nice explanation comparing the old structure with the new.  (see Related Resources)  It is a recommended read and has an illustration that might help you envision this structure.  However, there are more points to the gruze, that either weren't there when her tutorial was made or were relatively unknown.  miontre has helped discover the usage and test these with me.  And now, I'm pretty satisfied to share this knowledge.  Copy & paste examples into your journal to test and play with.

First, we will take a look at the simplest break down of the gruze structure, the bare minimum you will need to know to make your journal.
.gr-box{} -- Contains entire journal
.gr-top{} -- Contains the title, journal date, top
.gr-body{} -- Contains the body elements (text and bottom and list)
.text{} -- Contains the text only
.bottom{} -- Bottom link for comments/previous link (prev no longer used)
.list{} -- Mood list

It is very simplified and comparable to the old structure.  And it really isn't harder to learn.  Let's talk a little about how you would use these.  Let's code in a background and some basic structuring.  The very first thing I always do is get rid of the default styles.  I use the "*" code to effect all areas.
*{
background:none;
border:none;
padding:0;
margin:0;
}

This gives you a blank slate to work with.  I also get rid of the elements I do not want.  The gruze border, triangle and journal image (and space left behind from removing it.
.gr1, .gr2, .gr3, .tri, .gr-top h2 img, .indent{display:none;}

So now, the journal is completely blank.  And looks rather blah.  I'm going to demonstrate just something simple.  A grey bg with light text.  This will have no extras coded in, just a title, text and footer link.  I'm doing this ultra skinny for sake of the preview.  Really, you would want the widths to be about double.  And fixed width is not necessary.
.gr-box{
background:#444444;
padding:0 24px;
margin:auto;
max-width:624px;
border:#999999 1px solid;
border-radius:3px;
}

.gr-top, .text, .bottom{
width:375px;
margin:auto;
border-left:#777777 1px solid;
border-right:#999999 1px solid;
padding:24px;
}
.gr-top h2 a{
color:#999999!important;
text-shadow:#222222 1px 1px 0;
}

.text, .commentslink, .gr-top span{
color:#999999;
}


Grey Bg 1 by GillianIvy


Now, I'll be adding different shades of grey and green to display the different layers.  The preview might get kind of odd looking.  But it will demonstrate the positions and potential for each new layer.  Since every layer can have a background, you can make some pretty complex designs.  Keep in mind the above picture to compare.  Those codes did not change at all, only added in more codes.  I did them to look kind of like miontre's background borders he recently demonstrated.  (see Related Resources)  First, the new codes...
body{}
.negate-box-margin{}
.gr-body{}
.grf-indent{}
And with the styling added...
body{
background:#3c5400 url(http://fc02.deviantart.net/fs70/f/2012/337/0/0/subtlepatterns_diagmonds_inverted_by_gillianivy-d5myz76.png);
padding:8px;
border:#9aae2b 1px solid;
}
.negate-box-margin{
background:#565656 url(http://fc07.deviantart.net/fs71/f/2012/337/9/b/square_bg_by_gillianivy-d5myzrg.png);
padding:12px;
border:#9aae2b 1px solid;
}
.gr-body{
background:linear-gradient(to bottom, rgba(60,84,0,1) 0%,rgba(39,39,39,1) 23%,rgba(39,39,39,0) 100%);
border:#272727 1px solid;
margin-bottom:8px;
}
.grf-indent{
background:#272727;
margin:8px;
border:#9aae2b 1px solid;
}


Green and Grey Layers by GillianIvy


As you see, it gives you two outer layers and two inner layers.  The inner layers are both contained within the .gr-box but the .gr-top is not inside.  So, it is separated.  But .text and .bottom and .list (not shown, it is the moods) are all contained within those.  So, the possibilities of what you can do are endless.  Fake border images, like seen above.  Layered images (pngs set to top|center|bottom and left|center|right that float over each other).  Hidden watermarks (add in a semi transparent image with your signature)...  

It takes your basic design into an advanced skin.  You cannot do that with the old .journalbox structure.  And chances are, as you continue to skin, you'll get better at it.  So, learn the more advanced structure rather than mastering the old and then learning the new...  I don't even remember the old structure now, and they cannot mix.  The gruze cancels out some of the journalbox.

Related Resources

:thumb354675797: Old vs Gruze Journals by ginkgografix

p.s. Tips

When coding the journal title, it has changed to a link now.  So to override the default colors, you must declare your color important.
.gr-top h2 a{color:#ffffff!important;}

Limit the width of the text area so it is easier to read.  Keep it centered in your skin by setting the margins to auto.
.text{max-width:675px; margin:auto;}

Same thing with the main journal container, when you have a fixed witdh and you don't want your skin to hug the left or right side of the browser, set the margin to auto.
.gr-box{width:1024px margin:auto;}

Show & Tell


I'd like to see your journals!  I'm a bit of a geek about CSS (in case that is not plainly obvious).  So, I like to talk about different ways to code things, since there is no 'right' way to do it.  Please, comment and link with your creations and discuss how you have used layers in your skins.  Any advice to offer fellow readers?  Share it here.  And ask me any CSS related questions.  I don't mind troubleshooting , sometimes, just bouncing your thought off another person can fix the problem.

Credits


Patterns are from subtlepatterns.com


:iconjonarific:

Color Models and Transparency



No matter how experienced you are with CSS, you've most likely dealt with colors before. Did you know, however, that there are several other ways of using colors in CSS, apart from the most widely known hexadecimal model (i.e. #123ABC)? In this article, I'd like to introduce you to two alternate color models, as well as ways how to use them in your designs.
 
 

The RGB(A) model

The RGB model is vastly similar to the hexadecimal one. Colors are also split up into red, green and blue counterparts, but instead of by hex digits (00 through FF), they're defined by values ranging from 0 to 255. Here's what the syntax of an RGB color value looks like:

rgb(red, green, blue);

/* or */

rgba(red, green, blue, alpha);


You start with "rgb" and then place the values for red, green and blue in brackets behind it. In addition, you have the option of adding a fourth value for alpha (transparency) when using "rgba" at the beginning. You can use this syntax anywhere you would've used the hexadecimal model, i.e. in color, background-color, text-shadow or box-shadow properties.
 
Examples:
rgb(0, 0, 0) — black
rgb(255, 255, 255) — white
rgb(255, 0, 0) — red
rgba(0, 0, 0, 0.5) — 50% black
rgba(0, 255, 0, 0.25) — 25% green
 
 

The HSL(A) model

The HSL model takes a completely different approach at defining colors. While it essentially has the same range of colors the RGB model has, it does not use a color's red, green and blue counterparts, but its hue, saturation and lightness values instead:
 
hsl(hue, saturation, lightness);

/* or */

hsla(hue, saturation, lightness, alpha);


Using hue, you start by defining the base color on the color wheel. A value of 0 represents full red, 120 represents green and 240 represents blue. At 360, you're back at red. Any values in between are mixtures of those three main colors. So if I was looking for a shade of purple, I'd go for a value between 240 and 360. Next, you specify the color's saturation, which is a value between 0 and 1. Zero achieves complete desaturation (which is a color-less shade of gray), while 1 makes it as vivid as possible. Finally, lightness stands for the color's brightness; once again a value between 0 and 1. Zero is pitch-black and 1 is total white, while every value in between results in a darker/brighter version of the chosen base color. When using "hsla", you can once again add an alpha value at the end.
 
Examples:
hsl(anything, anything, 0) — black
hsl(anything, anything, 1) — white
hsl(0, 1, 0.5) — red
hsla(120, 1, 0.5, 0.25) — 25% green
hsla(240, 0.2, 0.4, 0.5) — 50% pale purple
 
 

Transparency

At this point, you might be asking yourself what the point of knowing these alternate color models is. The most important aspect is that the RGB and HSL models give you the possibility to specify alpha/transparency values. Transparency can be extremely helpful in a number of ways:
 
Transparency as a stylistic means
 
Half-transparent elements can create nice little details, and —when not overused— add some polish to a design. The possibilities are endless, but here's a really primitive example of a transparent-black text box [background-color: rgba(0,0,0,0.7);] on top of an image:
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Sed a ipsum eget leo faucibus feugiat.
 
Increased flexibility
 
Transparency can also greatly increase color flexibility. Let's say we want to display text that is slightly darker than the background. On a white background (#FFFFFF), we might choose #CCCCCC as a text color. The result looks like this:
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Proin convallis urna ac odio ultricies ac vestibulum magna pulvinar.

But what if that text ends up on a darker background? If the background color is darker than the text color, the text will actually appear brighter and our goal of having slightly darker text is destroyed. Or even worse, if the background color equals the text color, you won't be able to see anything at all anymore:
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Proin convallis urna ac odio ultricies ac vestibulum magna pulvinar.

Here's where transparency comes in. If we give the text a transparent-black color [i.e. color: rgba(0,0,0,0.2);] instead of a fixed shade of gray, it will appear as intended on every possible background:
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem ligula, tempus nec blandit placerat, aliquet vulputate nisi. Proin convallis urna ac odio ultricies ac vestibulum magna pulvinar.
 
 

Bonus: "Guessing" colors

Finally, I'd like to mention an advantage specifically tied to the HSL model. When playing around with a design, you often find yourself tweaking a color again and again to find the perfect shade. You likely need Photoshop or something similar running alongside, because there's no way of knowing the changes you have to make to the red, green and blue counterparts if a color should appear slightly more vivid, for instance. The HSL model changes this. Once you've found a hue (base color) you like, you can simply change the other two values without having to worry about messing the color up. Want to have that orange a little more vivid? Increase its saturation. Want to make that blue a slight bit darker? Lower its lightness. This might sound somewhat complicated, but once you've gotten the hang of it, it's really convenient!
 
 

Conclusion

I hope this article has given you an insight into the variety of color models you can use in CSS, and how they might come in handy compared to the hexadecimal model. If you've got any questions, feel free to leave a comment! Happy color coding!
 
jonarific


Add a Comment:
 
:iconchiratsukionna:
chiratsukionna Featured By Owner Jun 1, 2013  Hobbyist Traditional Artist
Lolz same here ^^""" but i'll try 2 understand it,thanks
Reply
:iconsplashyrainbow:
SplashyRainbow Featured By Owner May 18, 2013  Hobbyist Digital Artist
After reading the comments I just feel like I'm a stupid. I still don't get it :(
Reply
:iconotterandterrier:
OtterAndTerrier Featured By Owner May 18, 2013  Hobbyist General Artist
Journals are like ogres!! :rofl:
Great article, again!
Reply
:iconvanmall:
vanmall Featured By Owner May 18, 2013  Hobbyist Digital Artist
This is definitely useful. :clap:
Reply
:iconpikachu-28:
Pikachu-28 Featured By Owner May 18, 2013
:clap:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 17, 2013  Hobbyist General Artist
so yea... typing, it is this thing I seem to mess up all the time when trying to write a comment and add a link but accidentally click through and end up losing everything I typed....

To summarize. My entry needs a fix to break up the big blockquote with too much information...
body{}
.negate-box-margin{}
.gr-body{}
.grf-indent{}
And with the styling added...

body{
background:#3c5400 url([link];


And I said something along the lines of my previews being ugly, but so are ogres.

Then comment to Jonarific on great explanation, I never used HSL, does it work on dA, yes? And I use ColorHexa and colorschemedesigner (that is where I ended up clicking something). So anyways, thanks for explaining the differences and benefits of the alternate color codes.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 17, 2013
Another great article! :clap: :love:
Reply
:iconakio-stock:
akio-stock Featured By Owner May 17, 2013  Hobbyist Photographer
'Journals make you cry' indeed!
Reply
:icongillianivy:
GillianIvy Featured By Owner May 17, 2013  Hobbyist General Artist
Yes, so many times pounding the head on the desk to make something work... The best solution always seemed to be walk away and come back later and magically figure it out because it was so easy... :shifty:
Reply
:iconakio-stock:
akio-stock Featured By Owner May 18, 2013  Hobbyist Photographer
Haha, yes. I end up asking my boyfriend for help and then I sit there when he does magic and the CSS obeys, thinking 'really? this is all I had to do?' :explosion:
Reply
Add a Comment: