.:News: Improve your CSS!

10 min read

Deviation Actions

xReiichiru's avatar
By
Published:
1K Views
I wanted to rant. Then I decided to... educate?

And it's caused by journal skins and how their starting to worry and irritate me a little. 
It has always annoyed me to see skins which use very basic CSS (which was probably taken from Icyworlds.net (not that I have anything against the site.)) and then an image they took from google,  and then the skin  looks... okay. I've also always disliked skins which have very busy backgrounds and so their not legible. And now, I see them getting "myspacey". 
We are deviantART. We do things with class, thinking out-of-the-box, blowing the borders and deviously! 

So here's some ideas on how to make your skin more interesting, readable, professional and maybe even a little devious. I'm not a know-it-all or anything, but I've made these mistakes many a time before and I think they might be helpful. :shrug:

Make it readable!
This takes time to get good at, but before finishing a skin, check and see if it's readable. Ask a friend or unbiased person. 

:star: Things that don't usually work:
:pointr: Unedited images. Their unpredictable and the colours usually clash with the text.
:pointr:  Busy patterns in strong colours
:pointr:  Dark or similar coloured text over the background (so say, brown text on red background.)

:star: Possible Solutions:
:pointr: Content boxes. Use either a block of solid colour, a lightly textured background or solid colour set at a low optimacy (to let the background filter through.) 
:pointr: Open up PS or GIMP and create a box of white (or black) over the background image, and then set that to low optimacy. Make the text sit over this box in the journal. You can also brush this effect on (like I did with this background.)
:pointr: Use a plain colour and have a light shadow behind your text to add interest.
:pointr: Use a plain colour with a light texture using filters (so noise and clouds filters can be nice.) 
:pointr: If your creating it in PS or GIMP test the text. Open a new layer, zoom to 100% and write in a similiar text to what you'll use in a similiar font. 


Get rid of the Journal Icon! 
Usually it will look bad. 
I think there's another way, but I'll give you this one:


.journalbox .journaltop img {
display: none;
}



Style ALL OF THE THINGS!
Style more stuff. If your commissioning, you don't need to each time, if the user doesn't use those tags, but their nice to know. 
How to do it:
Try just adding a . before a html tag : P You can style .a and a:hover (links), .strong, .italic and .underline (texts),  .img (images), .ul (listed items) and lots more. Learning HTML and CSS is good here, since you'll know more.


More ideas:
:pointr: Watch your banner and footer height.
:pointr: Use more Lorem Ipsum please!
:pointr: Can we have more collaborations between CSS skinners/coders and other artists?
:pointr: Make sure links are differentiated from normal text.
:pointr: Join CSS groups to keep up to date! CSS3 should be released to us all sometime in the new year (i'd imagine..) and it's
going to be awesome.
:pointr:  On that note, go to w3schools and actually learn CSS and HTML. 
:pointr: Be different. Don't just make a banner, code some text and add a footer. Great for beginners, but try scrollbars, galleries, hiding things, hover, shadow, boxes... CSS lets you do a lot, use it.
:pointr: I like to make my journals a little smaller. 
:pointr: Less Times New Roman, more google fonts. Make sure their readable though!
:pointr: Stop with the cloning please. Your not learning anything when you just puke up different colours of (boring) skins. Do yourself justice by trying new things almost every time.
:pointr: Simple can be best. Personally I like journals to be a little busy, but very simple, sleek, smooth, efficient journal skins are also very popular and enjoyable.
:pointr: Theft. Don't modify another person's CSS then claim as your own. Changing the images, colours and things like that doesn't make it yours and it's not okay!

These are kind of just my views. :shrug: 
If you want help, critique or anything else relating to CSS and HTML, let me know and I'll help you all I can. 
Here's to a Journal Pimpin' New Year!


Linkies
    Some skins I like...
    Deep Blue Journal Skin by Thewinator   Candle's lights Journal Skin by mxlove  panda journal... by tyleramato  Nyan Cat Skin Version 1 by Metterschlingel  Vintage Rose Skin by 4u64ica :thumb245948517:  Fresh Dew by Infinite705  :thumb127718301:  Merry Christmas Journal Skin by gracelessnight  dA V7.0 Gallery CSS by AimanStudio




    © 2011 - 2024 xReiichiru
    Comments21
    Join the community to add your comment. Already a deviant? Log In
    Shadowhedge1001's avatar
    Do you need a program to make journals?