HOME | DD

electricjonny — CSS3 Thumbs
Published: 2011-12-15 20:46:47 +0000 UTC; Views: 12874; Favourites: 44; Downloads: 0
Redirect to original
Description /* set a max-width for the whole journal */ body div#devskin7808734 .gr-box { max-width:920px; margin:0px auto 0px auto; border:1px solid #a6b2a6; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* hide certain borders */ body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 i, body div#devskin7808734 .gr-top .gr, body div#devskin7808734 , body div#devskin7808734 i.gr3, body div#devskin7808734 .gr-body { border:none!important; } /* top of journal borders and other borders */ body div#devskin7808734 .gr-top { border-bottom:1px solid #a6b2a6; border-right:none; border-left:none; } /* hide certain things */ body div#devskin7808734 .gr-top .metadata img, body div#devskin7808734 i.gr1, body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 { display:none; } body div#devskin7808734 .gr-body .gr { border-top:none; border-right:none; border-left:none; } /* the top of the journal */ body div#devskin7808734 .gr-top { background:#DAE4D9 url(https://fc02.deviantart.net/fs71/f/2014/240/d/c/topfade_by_electricjonny-d7wzcyu.gif) repeat-x scroll center top; background: -webkit-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background: -moz-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background:linear-gradient(top, #E7F0E6 0%, #CCD9CD 75%); text-align:center; padding:0px 0px 0px 0px; } /* text align the top journal info */ body div#devskin7808734 .gr-top .metadata { text-align:center; } /* color of links in journal info */ body div#devskin7808734 .gr-top .metadata a { color:#89968A; } /* the journal author and category */ body div#devskin7808734 .gr-top .metadata .name, body div#devskin7808734 .gr-top .metadata .name a, body div#devskin7808734 .gr-top .metadata .category a { color:#000000; } body div#devskin7808734 .gr-top .metadata .name a:hover, body div#devskin7808734 .gr-top .metadata .category a:hover { color:#000000; text-decoration:underline; } /* no bullet on the category */ body div#devskin7808734 .gr-top .metadata ul li { list-style-type:none; } /* nudge the journal info up a tad */ body div#devskin7808734 .gr-top .metadata ul { margin-top:-5px; } /* main background */ body div#devskin7808734 .text { background:#2E3D35 url(https://fc01.deviantart.net/fs71/f/2014/206/7/6/skinbg_green_by_electricjonny-d7sb0fz.png) repeat; padding:20px; margin-bottom:-56px; } /* box-shadow on the content box's */ body div#devskin7808734 .shadow { box-shadow:6px 6px 6px #1B241F; -moz-box-shadow:6px 6px 6px #1B241F; -webkit-box-shadow:6px 6px 6px #1B241F; margin-top:20px; } /* the bottom holding the comment link */ body div#devskin7808734 .ppb { margin-top:14px; height:40px; border-top:1px solid #a6b2a6; background:#e7f0e6 url(https://fc06.deviantart.net/fs70/f/2014/206/0/a/ppb_by_electricjonny-d7sb0gc.gif) center bottom repeat-x; background: -webkit-linear-gradient(180deg, #e7f0e6, #ccd9cd); background: -moz-linear-gradient(180deg, #e7f0e6, #ccd9cd); background:linear-gradient(180deg, #E7F0E6, #CCD9CD); } /* the title of the journal */ body div#devskin7808734 .gr-top h2 { padding-top:65px; color:#2c3635; font-family:Palatino Linotype; font-size:20pt; text-shadow:2px 2px 3px #F2FCF1; } body div#devskin7808734 .gr-top h2 a { color:#2c3635!important; } /* the top image */ body div#devskin7808734 .gr-top .gr { padding:10px; background:transparent url(https://orig12.deviantart.net/f282/f/2014/208/9/e/journal_lightning_animated_by_electricjonny-d7sg6i4.png) no-repeat top center!important; height:135px; } /* title of the content box */ body div#devskin7808734 .newstitle { background:#EAEFE8; background: -webkit-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background: -moz-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background:linear-gradient(top, #F1F7EF 20%, #C6CCC5 100%); text-shadow:2px 2px 3px #F6F9F4; text-align:center; font-family:Palatino Linotype; font-size:18pt; padding:2px; border:1px solid #a6b2a6; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; } body div#devskin7808734 .newstitle.good { background:#468451; background: -webkit-linear-gradient(top, #e6ede4, #468451); background: -moz-linear-gradient(top, #e6ede4, #468451); background:linear-gradient(top, #E6EDE4, #468451); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.bad { background:#A56565; background: -webkit-linear-gradient(top, #e6ede4, #a56565); background: -moz-linear-gradient(top, #e6ede4, #a56565); background:linear-gradient(top, #E6EDE4, #A56565); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.gold { background:#E5D81B; background: -webkit-linear-gradient(top, #fffced 20%, #e5d81b 100%); background: -moz-linear-gradient(top, #fffced 20%, #e5d81b 100%); background:linear-gradient(top, #FFFCED 20%, #E5D81B 100%); text-shadow:1px 1px 2px #F6F9F4; } /* the content box it's self */ body div#devskin7808734 .news { background:#ccd9cd url(https://fc00.deviantart.net/fs71/f/2014/206/0/8/skincontentbg_by_electricjonny-d7sb0fk.png) repeat; border:1px solid #a6b2a6; border-top:none; padding:0px 10px 10px 10px; font-size:12px; border-radius:0px 0px 6px 6px; -moz-border-radius:0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -moz-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -webkit-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); } /* first letter of content */ body div#devskin7808734 .a:first-letter { font-size:14pt; } /* indent the first sentence of the content */ body div#devskin7808734 .a { text-indent:20px; margin:0px 0px 5px 0px; line-height:18px; } /* links in the content */ body div#devskin7808734 .news a { color:#0B7200; border-bottom:1px solid transparent; text-decoration:none; font-weight:normal; outline:none; text-shadow:1px 1px 0px rgba(0,0,0,.15); transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a:hover:not(.img) { color:#309923; border-bottom:1px solid #309923; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a:active:not(.img) { color:#125908; border-bottom:1px solid #125908; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } /* define the external links */ body div#devskin7808734 a .img:hover, body div#devskin7808734 a:hover .img, body div#devskin7808734 a:hover .img:hover { text-decoration:none!important; border-bottom:none!important; } body div#devskin7808734 .news a[class^='external'] { color:#053275; text-decoration:none; border-bottom:1px solid transparent; transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:hover:not(.img) { color:#0958BF; text-decoration:none; border-bottom:1px solid #0958BF; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:active:not(.img) { color:#042959; text-decoration:none; border-bottom:1px solid #042959; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } /* style links to show */ body div#devskin7808734 .news a.show { font-size:0px; } body div#devskin7808734 .news a.show:after { font-size:12px; content:attr(href); } body div#devskin7808734 a.external, body div#devskin7808734 a.external:after { display:inline; content:''!important; } /* style bold, since dA's style plays on it */ body div#devskin7808734 b { font-weight:bold; background:transparent; display:inline; } /* classes I can use to define certain things */ body div#devskin7808734 .red { color:#C90404; display:inline; } body div#devskin7808734 .blue { color:#052363; display:inline; } body div#devskin7808734 .green { color:#43895D; display:inline; } body div#devskin7808734 .big { font-size:13pt; display:inline; } body div#devskin7808734 .small { display:inline; font-size:7pt; position:relative; } body div#devskin7808734 .code { text-indent:0px; font-family:Courier New; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 .scroller { text-indent:0px; font-family:'Source Code Pro', courier; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 blockquote { text-indent:0px; border:none; } /* the comments link button */ body div#devskin7808734 a.commentslink { background:transparent url(https://99.82.246.199/journal/journal_comments.png) 0px 0px no-repeat; background: -webkit-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background: -moz-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background:linear-gradient(180deg, #DBEADA 20%, #B5C5B4 100%); border:1px solid #8BA68B; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:3px 3px 8px rgba(0,0,0,.35); -moz-box-shadow:3px 3px 8px rgba(0,0,0,.35); -webkit-box-shadow:3px 3px 8px rgba(0,0,0,.35); display:inline-block; padding:4px 6px 4px 6px; margin:8px 0px 0px 0px; text-indent:0px; text-decoration:none; word-spacing:auto; color:#2C3635; transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -moz-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -webkit-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -ms-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -o-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; } body div#devskin7808734 a:hover.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -37px no-repeat; background: -webkit-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background: -moz-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background:linear-gradient(top, #DBEADA 20%, #C8D6C7 100%); padding:6px 16px 6px 16px; margin:6px 0px 0px 0px; transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -o-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; } body div#devskin7808734 a:active.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -74px no-repeat; background: -webkit-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background: -moz-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background:linear-gradient(top, #C8D6C7 20%, #DBEADA 100%); box-shadow:1px 1px 4px rgba(0,0,0,.35); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.35); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.35); transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -o-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; } body div#devskin7808734 a.commentslink:first-letter { font-size:12px; } /* not used anymore, but the previous journals link */ body div#devskin7808734 a.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; display:none; } body div#devskin7808734 a:hover.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -27px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 a:active.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -54px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 .sig { position:relative; bottom:-30px; right:-8px; width:100px; } /* hide various things */ body div#devskin7808734 .preview, body div#devskin7808734 ul.f, body div#devskin7808734 .gr-top h2 img, body div#devskin7808734 i.tri, body div#devskin7808734 .hsep, body div#devskin7808734 div.drag-and-collect { display:none; } /* style the thumb-holder */ body div#devskin7808734 .thumb-holder { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } body div#devskin7808734 .thumb-holder2 { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* style the thumbs to remove the padding */ body div#devskin7808734 span.shadow { padding:0px; } /* title of the thumb-holder */ body div#devskin7808734 .thumb-holder b { display:block; color:#3F3F3F; font-size:16pt; text-align:center; text-shadow:2px 2px 4px #999999; margin-top:-10px; } body div#devskin7808734 .thumb-holder .thumb:hover { border-bottom:none; } body div#devskin7808734 .news .shadow.mild a:hover, body div#devskin7808734 .news .shadow.mild a:active { border:none!important; } /* remove box-shadow of thumbs - added in another place */ body div#devskin7808734 .thumb-holder .shadow { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; margin:-2px 0px -5px 0px; } body div#devskin7808734 .thumb-holder img { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; max-width:100%; } /* set up the transition */ body div#devskin7808734 .thumb-holder .shadow-holder { transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; } /* rotate the thumbs, kinda randomly */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1) { transform:rotate(4deg) scale(.8,.8); -moz-transform:rotate(4deg) scale(.8,.8); -webkit-transform:rotate(4deg) scale(.8,.8); -ms-transform:rotate(4deg) scale(.8,.8); -o-transform:rotate(4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2) { transform:rotate(-2deg) scale(.8,.8); -moz-transform:rotate(-2deg) scale(.8,.8); -webkit-transform:rotate(-2deg) scale(.8,.8); -ms-transform:rotate(-2deg) scale(.8,.8); -o-transform:rotate(-2deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3) { transform:rotate(1deg) scale(.8,.8); -moz-transform:rotate(1deg) scale(.8,.8); -webkit-transform:rotate(1deg) scale(.8,.8); -ms-transform:rotate(1deg) scale(.8,.8); -o-transform:rotate(1deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4) { transform:rotate(-4deg) scale(.8,.8); -moz-transform:rotate(-4deg) scale(.8,.8); -webkit-transform:rotate(-4deg) scale(.8,.8); -ms-transform:rotate(-4deg) scale(.8,.8); -o-transform:rotate(-4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } /* unrotate them and zoom up on hover */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4):hover { transform:rotate(0) scale(1,1); -moz-transform:rotate(0) scale(1,1); -webkit-transform:rotate(0) scale(1,1); -ms-transform:rotate(0) scale(1,1); -o-transform:rotate(0) scale(1,1); transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; box-shadow:6px 6px 8px rgba(0,0,0,.5); -moz-box-shadow:6px 6px 8px rgba(0,0,0,.5); -webkit-box-shadow:6px 6px 8px rgba(0,0,0,.5); z-index:99; } /* put the exact date on the timestamp */ body div#devskin7808734 li.author span:not(.name):not(.username-with-symbol):not(.user-symbol):after { content:' - 'attr(title); } /* the top and bottom box-shadow look */ body div#devskin7808734 .boxShadowTop { position:relative; top:-20px; margin:0px -20px -50px -20px; } body div#devskin7808734 .boxShadowBottom { position:relative; bottom:71px; margin:61px -20px -49px -20px; } /* the box shadow styles themselves */ body div#devskin7808734 .boxShadow1 { border-top:1px solid #000000; opacity:.5; filter:alpha(opacity=50); _zoom:1; } body div#devskin7808734 .boxShadow2 { border-top:1px solid #000000; opacity:.468203; filter:alpha(opacity=47); _zoom:1; } body div#devskin7808734 .boxShadow3 { border-top:1px solid #000000; opacity:.432504; filter:alpha(opacity=43); _zoom:1; } body div#devskin7808734 .boxShadow4 { border-top:1px solid #000000; opacity:.395469; filter:alpha(opacity=40); _zoom:1; } body div#devskin7808734 .boxShadow5 { border-top:1px solid #000000; opacity:.358121; filter:alpha(opacity=36); _zoom:1; } body div#devskin7808734 .boxShadow6 { border-top:1px solid #000000; opacity:.321018; filter:alpha(opacity=32); _zoom:1; } body div#devskin7808734 .boxShadow7 { border-top:1px solid #000000; opacity:.284532; filter:alpha(opacity=28); _zoom:1; } body div#devskin7808734 .boxShadow8 { border-top:1px solid #000000; opacity:.24895; filter:alpha(opacity=25); _zoom:1; } body div#devskin7808734 .boxShadow9 { border-top:1px solid #000000; opacity:.214517; filter:alpha(opacity=21); _zoom:1; } body div#devskin7808734 .boxShadow10 { border-top:1px solid #000000; opacity:.181468; filter:alpha(opacity=18); _zoom:1; } body div#devskin7808734 .boxShadow11 { border-top:1px solid #000000; opacity:.150042; filter:alpha(opacity=15); _zoom:1; } body div#devskin7808734 .boxShadow12 { border-top:1px solid #000000; opacity:.120494; filter:alpha(opacity=12); _zoom:1; } body div#devskin7808734 .boxShadow13 { border-top:1px solid #000000; opacity:.093113; filter:alpha(opacity=9); _zoom:1; } body div#devskin7808734 .boxShadow14 { border-top:1px solid #000000; opacity:.068233; filter:alpha(opacity=7); _zoom:1; } body div#devskin7808734 .boxShadow15 { border-top:1px solid #000000; opacity:.046259; filter:alpha(opacity=5); _zoom:1; } body div#devskin7808734 .boxShadow16 { border-top:1px solid #000000; opacity:.027692; filter:alpha(opacity=3); _zoom:1; } body div#devskin7808734 .boxShadow17 { border-top:1px solid #000000; opacity:.013171; filter:alpha(opacity=1); _zoom:1; } body div#devskin7808734 .boxShadow18 { border-top:1px solid #000000; opacity:.003549; filter:alpha(opacity=0); _zoom:1; } /* make text white so you can see it */ body div#devskin7808734 .writer.no-lub.put-art-here { color:#FFFFFF; } /* the button to go down to scripts */ body div#devskin7808734 .scripts { margin:20px 0px 0px 0px; background:rgb(220, 225, 220); background:rgba(220, 225, 220, .65); background: -webkit-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background: -moz-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background:linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); color:#FFFFFF; text-shadow:2px 2px 4px #000000; padding:4px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; position:absolute; text-decoration:none; transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:hover { background:rgb(250, 255, 250); background: -webkit-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background: -moz-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background:linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:active { background:rgb(251, 252, 253); background: -webkit-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background: -moz-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background:linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); transition:all 90ms ease-in-out; -moz-transition:all 90ms ease-in-out; -webkit-transition:all 90ms ease-in-out; -ms-transition:all 90ms ease-in-out; -o-transition:all 90ms ease-in-out; } /* testing html -
Title
Links: google - deviantart

Thumbs:thumb215696250: :thumb212025848: :thumb204696348: :thumb197056824: :thumb196923931: :thumb196465321: :thumb195777501: :thumb195600192: :thumb164427940: :thumb164848022: :thumb157628618: :thumb157754691:


.big
.small
.red
.blue
A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text A long line of text
*/



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:thumb245809217: :thumb191354398: :thumb106043616:


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



Related content

[ TEXT ]


electricjonny - The Program

[ TEXT ]


electricjonny - My Time On deviantART

[ TEXT ]


electricjonny - Fear, Regret, and Ego

[ TEXT ]


electricjonny - III
Comments: 108

AzeeraTheNinja In reply to ??? [2011-12-20 00:53:12 +0000 UTC]

No problem!

👍: 0 ⏩: 0

Elandria In reply to ??? [2011-12-19 10:31:03 +0000 UTC]

OOOHHH

👍: 0 ⏩: 0

SilverPixiGirl [2011-12-19 04:42:21 +0000 UTC]

I will Gillian..... but not pee my pants!

this is very cool!

👍: 0 ⏩: 1

electricjonny In reply to SilverPixiGirl [2011-12-19 04:50:08 +0000 UTC]

Thanks

👍: 0 ⏩: 0

gillianivyart In reply to ??? [2011-12-18 21:31:20 +0000 UTC]

👍: 0 ⏩: 1

electricjonny In reply to gillianivyart [2011-12-18 21:40:46 +0000 UTC]

👍: 0 ⏩: 1

gillianivyart In reply to electricjonny [2011-12-18 21:43:17 +0000 UTC]

I don't know how to do any of that stuffs! I've got learning to do!

👍: 0 ⏩: 1

electricjonny In reply to gillianivyart [2011-12-18 21:51:16 +0000 UTC]

It's pretty easy to figure out. You can use transitions to adjust the animation between normal and hover/active of a lot of things. Here's another transitioning journal, if you want to Firebug it and play around [link]

👍: 0 ⏩: 1

gillianivyart In reply to electricjonny [2011-12-18 23:30:55 +0000 UTC]

That's beyond awesome!!!!!!!!!



!

👍: 0 ⏩: 1

electricjonny In reply to gillianivyart [2011-12-18 23:46:29 +0000 UTC]

It really is

This makes a lot of smooth transitions that you used to do with jQuery scripting a lot simpler.

👍: 0 ⏩: 0

JurgenDoe In reply to ??? [2011-12-17 03:04:09 +0000 UTC]

Works in Safari too

👍: 0 ⏩: 1

electricjonny In reply to JurgenDoe [2011-12-17 03:13:37 +0000 UTC]

Oh nice

I think dA might be scripting some stuff here to make it work uniformly across browsers. I haven't looked into it yet.

👍: 0 ⏩: 0

JurgenDoe In reply to ??? [2011-12-17 02:58:49 +0000 UTC]

Freaking awesome man

👍: 0 ⏩: 1

electricjonny In reply to JurgenDoe [2011-12-17 03:00:43 +0000 UTC]

Thank you

👍: 0 ⏩: 0

rotane [2011-12-16 11:52:55 +0000 UTC]

Did you add a :hover to .shadow-holder as well? Because as I see it, when you put your cursor slightly outside a thumb (best noticable on the white space above the last one), it rotates the thumb straight, but it'll only enlarge it when you hover over it (the img itself). That's a weird effect – usability wise – and I hope is was done by accident

👍: 0 ⏩: 2

electricjonny In reply to rotane [2011-12-16 19:20:47 +0000 UTC]

Well that was easier to fix than I thought. I kept running into problems when I first tried this

Anyway, I edited this journal, and the thumbs scale up and rotate at the same time now. Also added the HTML and CSS for the thumbs in the description, if people want to play with this once it's released to people.

👍: 0 ⏩: 1

rotane In reply to electricjonny [2011-12-18 11:53:16 +0000 UTC]

Well, looks pretty good now! Do you have an ETA?

👍: 0 ⏩: 1

electricjonny In reply to rotane [2011-12-18 11:59:56 +0000 UTC]

Nope, sorry, I haven't heard any ETA yet. But I bet it will be soonish. I think it's been released to staff, so you might be able to use it, but I'm not sure.

👍: 0 ⏩: 0

electricjonny In reply to rotane [2011-12-16 18:00:46 +0000 UTC]

Haha, I knew someone would notice that, eventually

I made this sort of quickly after it was released to us (devBUG alpha testers), and I saw the rotate and enlarge problem, but I had some issues making it work right due to dA's HTML on thumbs. Would have been easier if I was img src-ing all of the images myself, without dA's :thumbxxx: HTML, but then that just gets harder for people to use.

I will probably go back and fix this, since I think this could be, at least, a good example of an CSS3 skin for people to play with. You can see the HTML and CSS here [link]

👍: 0 ⏩: 1

rotane In reply to electricjonny [2011-12-18 11:53:15 +0000 UTC]

"Haha, I knew someone would notice that, eventually"

Yeah, nothing like that escapes my watchful eye

👍: 0 ⏩: 1

electricjonny In reply to rotane [2011-12-18 11:58:23 +0000 UTC]

Gotta love a perfectionist

👍: 0 ⏩: 0

foundsoundfunny In reply to ??? [2011-12-16 07:15:27 +0000 UTC]

Woah, awesome!

Last I heard the parser couldn't neatly handle properties with brackets or something weird... so, has it been rewritten or what?

👍: 0 ⏩: 1

electricjonny In reply to foundsoundfunny [2011-12-16 18:04:21 +0000 UTC]

Yeah the CSS was redone, and now allows a lot more things. You can even do selectors as [attr="foo"], which I find pretty useful (you could set the timestamp on your journal to be one color, then another color when it gets to a certain date for example. Handy for time dependent journals).

And you get comments now But I'm sure this will all be explained once it's ready for people to use.

👍: 0 ⏩: 0

VelCake In reply to ??? [2011-12-16 01:41:44 +0000 UTC]

this CSS is beautiful

👍: 0 ⏩: 1

electricjonny In reply to VelCake [2011-12-16 04:05:54 +0000 UTC]

Thanks

👍: 0 ⏩: 0

bradleysays In reply to ??? [2011-12-16 00:46:10 +0000 UTC]

Sexy. Can't wait until it's released to everyone.

👍: 0 ⏩: 1

electricjonny In reply to bradleysays [2011-12-16 00:56:41 +0000 UTC]

Yeah

I'm excited, since I learned all the CSS I know just from the dA journals here. This will let the dA skinners really shine.

👍: 0 ⏩: 0

trezoid In reply to ??? [2011-12-15 22:00:07 +0000 UTC]

Oh, do we get linear-gradient?

Please tell me we get gradients.

And RGBA?

That'd be pretty awesome

👍: 0 ⏩: 1

electricjonny In reply to trezoid [2011-12-15 22:11:28 +0000 UTC]

Perhaps

👍: 0 ⏩: 1

trezoid In reply to electricjonny [2011-12-15 22:18:18 +0000 UTC]

Oh, Awesome. Time to rebuild a couple of my journal skins

👍: 0 ⏩: 2

electricjonny In reply to trezoid [2011-12-15 22:21:33 +0000 UTC]

But it's not quite ready, so you can't design your skin on dA just yet.

👍: 0 ⏩: 0

electricjonny In reply to trezoid [2011-12-15 22:20:06 +0000 UTC]

👍: 0 ⏩: 0

TRlCKS In reply to ??? [2011-12-15 21:22:17 +0000 UTC]

CSS3

👍: 0 ⏩: 1

electricjonny In reply to TRlCKS [2011-12-15 21:26:19 +0000 UTC]

👍: 0 ⏩: 0

neurotype-on-discord [2011-12-15 20:56:01 +0000 UTC]

CSS3 support?! are there any blogs on what tags work now?

👍: 0 ⏩: 1

electricjonny In reply to neurotype-on-discord [2011-12-15 20:58:12 +0000 UTC]

It's not quite ready for people yet. But it will soon be released and explained

👍: 0 ⏩: 1

neurotype-on-discord In reply to electricjonny [2011-12-16 03:32:05 +0000 UTC]

...seriously. I made a website at some point recently and was amazed at all the things I could do.

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2011-12-18 21:32:31 +0000 UTC]

Why did you not tell me? I'm eager peeing myself too!!!!

👍: 0 ⏩: 1

neurotype-on-discord In reply to gillianivyart [2011-12-19 02:13:03 +0000 UTC]

I figured you'd be on top of this! ...also we can't do anything with it yet D:

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2011-12-19 04:33:46 +0000 UTC]

Antici-

.
.
.

.
.
.
say it! say it!
Pation!

👍: 0 ⏩: 1

neurotype-on-discord In reply to gillianivyart [2011-12-20 02:20:08 +0000 UTC]

it's gonna be legen--wait for it--dairy!

/howImetyourmother

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2011-12-20 20:29:20 +0000 UTC]

Never saw that, had to google that. But full of quotes about things that are legendary and testicles... Maybe I should see this. Epic BAWLS!

👍: 0 ⏩: 1

neurotype-on-discord In reply to gillianivyart [2011-12-21 00:27:10 +0000 UTC]

It's aweeeeesome ...kind of like Friends+Seinfeld for the 2000s.

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2011-12-21 07:13:03 +0000 UTC]

But I don't really like either of those shows Seinfeld gave me headaches and Friends was too annoying women. (Is that sexist of me?) Though I liked Phoebe, she was strange. I never had very many female friends, I always hung out with the boys. Funny, I seem to have mostly female friends now. But I think they are mostly the chicks who are like me and don't generally get along with a gaggle of giggling girls.

👍: 0 ⏩: 1

neurotype-on-discord In reply to gillianivyart [2011-12-24 07:37:12 +0000 UTC]

Haha--the women on this one are soooooo much better. One of them is a Canadian with a gun collection and serious hockey ...yeah, the one thing they really have in common is the setting. Friends in New York.

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2011-12-24 08:50:54 +0000 UTC]

I'll keep it in mind though. If it's on Netflix, I might add to my queue. I watch a lot of shows via Netflix. Currently on Warehouse 13, but the show is very formulaic and predictable. But entertaining.

👍: 0 ⏩: 1

neurotype-on-discord In reply to gillianivyart [2011-12-24 20:09:03 +0000 UTC]

Do it.

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2011-12-26 06:43:09 +0000 UTC]

Just added in Netflix. All you had to do was say Neil Patrick Harris. I love Dr. Horrible's Sing-a-long Blog. Best. Ever. So, yes, I must go watch this Thanks for the recommendation.

👍: 0 ⏩: 1

neurotype-on-discord In reply to gillianivyart [2011-12-26 21:03:35 +0000 UTC]

he is fantastic as a womanizer!

My goal is to geteveryone on it so I can reference it all the time.

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2011-12-27 11:03:56 +0000 UTC]

Well, I've watched about 5 episodes straight. I like it, except the main character Barney is of course, my favorite character. I have a penchant for jack asses.

👍: 0 ⏩: 1


| Next =>