Celvas Corp. Proudly Presents...

17 min read

Deviation Actions

Celvas's avatar
By
Published:
1.4K Views
Design & Code by Celvas


... her newest creation:


      

The TehAngelsCry Journal Skin



This is the live preview of this deviation. If you want to comment or fave, please do it there! Thank you!


It's a bold, strong new direction. Well, maybe not new, but it's a direction, and that still counts for something. It uses a total of five Celvas-creation image files ...

  • The logo up top
  • The portfolio and blog links
  • The social media icons
  • The hr divider line
  • The mood box icon

... while the rest of the journal skin was produced through witchcraft. I mean a deal with a demon. The devil. I MEAN CSS TRICKERY. Making for a total of 371 lines of selectors and declarations.

I must say in advance that this journal skin will not be up for everybody to download and install unless otherwise specified by a deviant named hereafter. It is a gift for TehAngelsCry, who, as of yet, had the peculiar notion that there are more important things in life than a journal skin that matches your profile design. Yeah, I know. Bonkers.




Celvas, you've got a lot of odd stuff going on like cool fake-animated buttons, a custom box for custom stuff, a cleverly implemented mood box on the bottom left, several mixable and multi-purpose column styles, custom headings apart from the usual h1 to h6 stuff - but what about the usual features?
by Imaginary Friend

Well, imaginary friend, I'm glad you asked. As you can see, I have styled the blockquote, but I've also styled the headings h1 to h6 (making them inline objects as I went), the image and literature thumbs, the links and link hovers, the hr divider - everything you can access in Rich Editing mode.

Following are two rows of image and literature deviations by TehAngelsCry. It is important to notice that, while the literature thumbs will always look like this, the image deviation thumbs can be the default or styled state. This is due to the fact that you might not want a stamp inside one of those borders, or what have you. By wrapping the image thumbs into the div class "sleek" you get the desired frames, and only then.


The difference between b/strong and i/emB Strong? I em!
Okay, yes... that was terrible... but what are the differences between <b> and <strong>, and <i> and <em>?
On a normal web browser (on a laptop, computer, or tablet) they have the same effect.
A Sonnet to My MindIn the hallows of your mind, do you see
the memories of your dreams that will become
grass beneath your feet? Your reality!
No - not yours. It is my mind. My kingdom.
My skies so vibrant, and an unknown hue.
The creatures around me whisper my name.
A lake before me in crystalline blue
With gentle ripples, caressing the rain.
A docile breeze brings with it the silence,
Unexpected and unwanted, it stuns
me. Darkness begins to descend - so dense -
And I find myself lost beneath two suns.
       Inside my mind are infinite new worlds,
       With dangerous monsters, and golden pearls.

Mature Content

Clandestine LoveA clandestine love with nought to bear,
but isolated loves true despair.



Les buttons!


Now, I did have some fun with those buttons, because the fact that I cannot animate them using code caused me grief. Until I realized that I don't actually have to animate them to make them look like you're pushing them. CSS trickery commenced, and after going clown-crazy with the amount of stackable box-shadows, this is the (playable) result:


Button with link Button w/o link Button with link Button w/o link


FYI, these buttons are used as span classes!

Then there is this baby. It's a custom box, so the div class is called cbox. Not a lot to it, despite it looking spiff as was requested. :salute: It fits in a lot of tight spaces, too, which I will demonstrate next showing off the columns feature and a lot of placeholder text. Stay tuned.




This is the div class halve (for obvious reasons).
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
And another shot of div halve.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


div class tblue

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
div class torange

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
div glass tgrey

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.


Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.




    Hope you'll have a lots of fun with this. Will be sending all the stuff and information shortly, Cat.

Love, Celvas


© 2013 - 2024 Celvas
Comments40
Join the community to add your comment. Already a deviant? Log In
Deltapotamus's avatar
So I was checking out your code in my search to see if there are ways of separately styling image thumbs from literature thumbs (I wish there was a way of coding "shadow-box that has a child with class .thumb .lit" for example, but I don't think there is).   But I think I found a workaround in your way of styling the border with the box shadow - I hadn't thought of that.

I like your consideration for providing the option of going with the default dA image thumbs, but I think I'd personally prefer making the sleek the default and then getting a separate div for the default look (even though it's probably easier to do it as you did).   More work in coding, but then you don't have to put in the divs every time you do an art feature... but again that's just my preference.

One suggestion: instead of using a separate clear div after your columns, you might want to put it in the :after pseudo-element.  I'm pretty sure you could pair write it something like:

div.halve:last-child:after { clear:both; }

Of course, this wouldn't work all the time, such as when you're pairing your trisect class the twothird one, but it cuts down on the divs you have to add in manually. :meownod: