HOME | DD
junoknight — CSS Journals 101 - blending
Published: 2006-10-16 22:17:08 +0000 UTC; Views: 5326; Favourites: 39; Downloads: 123
Redirect to original
Description
This tutorial will give you basic information on how to blend the top and bottom of a deviantART journal via means of CSS (cascading style sheets).Please NOTE! A subscriber or senior membership is required for a CSS journal. If you are not a subscriber, see this link for information.
also note - i suggest Photoshop for this job, which can price anywhere between $40 for "Photoshop Elements" to around $1000 for the official program. See this link for more information.
This is a step-by-step process explaining how to acheive a well blended journal.
Though simple, this is a very effective means of making nice journals, which can be added onto at any point in time (which i indent to complete, don't worry!)
Blending 201 coming soon!
Information refered to in text -
Example of what it will look like when finished
templates coming soon
brushes!
- Splatter by peterpson
- Splatter by ashzstock
- Splatter by JavierZhX
Links to CSS tutorials
HTMLDog is what i suggest
quick journal reference by `thespook
i would also suggest searching through DA, as DA has some awesome tutorials waiting to be found.
the cute little helper dude is ©~junotenbatsu
Related content
Comments: 85
👍: 0 ⏩: 0
Oh dear
Thanks for telling me.
Over 5,000 views.... not a single person noticed.
I give up on life.
👍: 0 ⏩: 0
hello, i tried to follow your tutorial, but deviantart continues saying me that there's a problem with the array of the css.. can you please help me?
👍: 0 ⏩: 1
Sure lol
Um... can you save the css code as a .txt file, upload it to [link] and note me with the link?
Or note me your email address and I'll note back with mine and you can attach it.
👍: 0 ⏩: 1
thank you so much!! ^^ I'll do it as soon as possible!
👍: 0 ⏩: 1
Ah thats awesome! Its simple and explains very well! I have been looking for something like this to help me for a while now!
Thankyou so much!
👍: 0 ⏩: 1
This would probably be much more useful if I had a subscription... or if I still understood what was being said haha
👍: 0 ⏩: 1
👍: 0 ⏩: 1
Kind of..there were so many speech bubbles and...words..
👍: 0 ⏩: 0
Thank you for this tutorial.
👍: 0 ⏩: 1
👍: 0 ⏩: 1
This is great! If I decide to switch things up in my journal, I'll see what I can come up with using this!
👍: 0 ⏩: 1
sweet! I can't wait to see what you make of it
👍: 0 ⏩: 0
Awesome tutorial will use it somehow, I am fairly new and learning. I know some good CSS and I will try that on my journal, if I find it
👍: 0 ⏩: 1
(you have to buy a subscription first 
👍: 0 ⏩: 0
👍: 0 ⏩: 1
yeah i miss you aryn! Get skype and talk to me
👍: 0 ⏩: 1
xD Can't get skype.
I pretty much can't get any of my old computer settings/programs back until I own my OWN computer, which will be when i'm 18. I've been banned from the computer twice now, so, now MY computer sits in my room as a paper weight with no connection and I have to use the family one.
;-; Sucks.
👍: 0 ⏩: 1
nice, just found this! thanks for crediting my splats
👍: 0 ⏩: 1
👍: 0 ⏩: 0
Hi.
I was doing this and I didnt find "Add Css" in my journal section 
Help?
Alright. thanks for making the tutorial, its easy and I kinda get it now
marry x-mas
bye
👍: 0 ⏩: 1
👍: 0 ⏩: 0
i was just thinking about you today
(bitch)
👍: 0 ⏩: 1
What else would I be?
Dead?
Not before you, I'm afraid.
👍: 0 ⏩: 1
👍: 0 ⏩: 0
thanks for all your help! and this is perfect-now i can go through it step by step. i'm glad i added you to my watch-i have a feeling i will be learning a lot from you!
👍: 0 ⏩: 1
awwww!! thats so cute...if only i understood words...
👍: 0 ⏩: 1
awesome!! i'll try to do this...although i'm not so sure about the coding part :/
u'r awesome!
👍: 0 ⏩: 1
👍: 0 ⏩: 0
nice tutorial..
although I have a few critiques:
1. it's not necesarry to define both min-heigth and max-heigth.. just defining height is enough..
2. you shouldn't define the max-width..
since the journals are width dynamic you should use padding or margins to define the width of an object..
I don't really understand why you've set the width to a max of 1000.. what if someone with a 1600x1200 resolution is looking at you journal ?
this will cur of a big part of the journaltop..
what you need to do is not define the width and simply create a big enough background-image
3. apart from defining the journaltop h2 color,
you migth wanne define the journaltop color and and journaltop span color as well.. to change the color of the 'Journal Entry: Fri Oct 27, 2006, 4:19 PM'..
apart from that.. nice tutorial...
keep up the good work..
👍: 0 ⏩: 1
actually about the max width, it stops the journal from exceeding the image. 
👍: 0 ⏩: 1
span does indeed only affect the date.. that's why you have to define the journaltop color as well.. coz that will define the 'journal entry:'
and about the width.. preventing the journal from exceeding the image is not a good way to work..
just make you're image big enough.. or even better use a repeating background image ( background-repeat: repeat-x; )
👍: 0 ⏩: 1
ah.. 
👍: 0 ⏩: 1
repeat-mirror.. how do you mean ?
👍: 0 ⏩: 1
ehhh.... like, GAH i can't think.
i want it mirrored so that it resembles a reflection, a mirror. repeat-x-mirror would be that it repeats on the x axis mirrored. probably not, as it's kinda complicated for something so simple as CSS. do you actually like my tutorial though? or is it not really worth keeping up?
👍: 0 ⏩: 1
| Next =>