deviant art

Deviant Login Shop  Join deviantART for FREE Take the Tour
[x]
more ▶

Featured in Groups:

Details

December 15, 2011
Sta.sh Writer
Link
Thumb

Statistics

Comments: 100
Favourites: 41 [who?]

Views: 8,139 (25 today)
[x]


Awesome Art + Fun Presentation

Here are some thumbs from my favourites I thought I'd share.  But I'm not exactly writing this journal to show off the thumbs ;)

Thumbs

By the way, this journal looks best in Firefox, IE (amazing right?), and Opera.  Might also work in Safari - haven't checked.  Oddly, it doesn't work so well in Chrome.  There's a few bugs with Chrome still.

And just for some extra pizazz, here's a link to the dA forums, and here's an outgoing link to google.  Notice the sexy color transition?  And the different colors for each?  With this skin, any deviantart.com domain is green, while outgoing links are blue with an outgoing symbol after it.  All done with just CSS.

I'm not sure when CSS3 will be available for people to use, but I'm sure they'll announce it in due time :)


:iconelectricjonny:
HTML
<div align="center"><div class="thumb-holder"><b>Thumbs</b>:thumb245809217: :thumb255711027: :thumb191354398: :thumb141015036: :thumb107374597: :thumb106043616: :thumb62478918: :thumb74465331:</div></div>

CSS
/* style the thumb-holder */
.thumb-holder {
     background:url(http://st.deviantart.net/blogskins/green/daskin_noise.png) repeat;
     margin:20px 20px 20px 20px;
     padding:20px;
     box-shadow:5px 5px 10px rgba(0,0,0,.6);
     border-radius:6px;
}

/* style the thumbs to remove the padding */
span.shadow {
     padding:0px;
}

/* title of the thumb-holder */
.thumb-holder b {
     display:block;
     color:#3F3F3F;
     font-size:16pt;
     text-align:center;
     text-shadow:2px 2px 4px #999999;
     margin-top:-10px;
}

.thumb-holder .thumb:hover {
     border-bottom:none;
}

/* remove box-shadow of thumbs - added in another place */
.thumb-holder .shadow {
     box-shadow:none;
     margin:0px;
}

.thumb-holder img {
     border-radius:4px;
}

/* set up the transition */
.thumb-holder .shadow-holder {
     transition:all 80ms ease-in-out;
}

/* rotate the thumbs, kinda randomly */
.thumb-holder .shadow-holder:nth-child(4n+1) {
     transform:rotate(4deg) scale(.8,.8);
     box-shadow:1px 1px 4px rgba(0,0,0,.6);
}

.thumb-holder .shadow-holder:nth-child(4n+2) {
     transform:rotate(-2deg) scale(.8,.8);
     box-shadow:1px 1px 4px rgba(0,0,0,.6);
}

.thumb-holder .shadow-holder:nth-child(4n+3) {
     transform:rotate(1deg) scale(.8,.8);
     box-shadow:1px 1px 4px rgba(0,0,0,.6);
}

.thumb-holder .shadow-holder:nth-child(4n+4) {
     transform:rotate(-4deg) scale(.8,.8);
     box-shadow:1px 1px 4px rgba(0,0,0,.6);
}

/* unrotate them and zoom up on hover */
.thumb-holder .shadow-holder:nth-child(4n+1):hover, .thumb-holder .shadow-holder:nth-child(4n+2):hover, .thumb-holder .shadow-holder:nth-child(4n+3):hover, .thumb-holder .shadow-holder:nth-child(4n+4):hover {
     transform:rotate(0) scale(1,1);
     transition:all 80ms ease-in-out;
     box-shadow:6px 6px 8px rgba(0,0,0,.5);
     z-index:100;
}
Add a Comment:
 
love 0 0 joy 1 1 wow 0 0 mad 0 0 sad 0 0 fear 0 0 neutral 0 0
:iconelectricjonny:
`electricjonny Apr 13, 2013  Hobbyist Photographer
And mother fucking hate, hate, that this is still fucking alpha-only. Come on $pachunka, release this already :B Or is that up someone else's ass to approve and initial to be ready to be released :B
Reply
:icongillianivy:
`GillianIvy Apr 13, 2013  Hobbyist General Artist
They make a great teaser though.
Reply
:iconelectricjonny:
`electricjonny Apr 13, 2013  Hobbyist Photographer
What?
Reply
:icongillianivy:
`GillianIvy Apr 13, 2013  Hobbyist General Artist
The CSS3 thumbs are a teaser for those who cannot use it. Sorry, thought I was making sense. But I'm tired, I should learn to speak in context rather just half a random thought...
Reply
:iconelectricjonny:
`electricjonny Apr 13, 2013  Hobbyist Photographer
Gotcha :giggle:
Reply
:icongillianivy:
`GillianIvy Apr 13, 2013  Hobbyist General Artist
Yea, should so go to bed now. Will stop checking my messages on repeat.
Reply
:iconelectricjonny:
`electricjonny Apr 13, 2013  Hobbyist Photographer
:lol: Goodnight.
Reply
:iconmiontre:
`miontre Nov 10, 2012  Hobbyist Photographer
Give us transitions! :iconanimefaceplz:

Nice transitions you made here! :D
Reply
:iconelectricjonny:
`electricjonny Nov 10, 2012  Hobbyist Photographer
Thank you :D Let's hope transitions come soon. We got gradients, now it's time for transitions :D
Reply
:iconmiontre:
`miontre Nov 10, 2012  Hobbyist Photographer
I agree! :highfive:
Reply
Add a Comment: