HOME | DD

Description
body div#devskin9867787 .CodeMirror { font-family:monospace; } body div#devskin9867787 .CodeMirror-scroll { overflow:auto; } body div#devskin9867787 .CodeMirror-lines { padding:4px 0; } body div#devskin9867787 .CodeMirror pre { padding:0 4px; } body div#devskin9867787 .CodeMirror-scrollbar-filler { background-color:white; } body div#devskin9867787 .CodeMirror-gutters { border-right:1px solid #ddd; background-color:#f7f7f7; white-space:nowrap; } body div#devskin9867787 .CodeMirror-linenumber { padding:0 3px 0 5px; min-width:20px; text-align:right; color:#999; } body div#devskin9867787 .CodeMirror div.CodeMirror-cursor { border-left:1px solid black; z-index:3; } body div#devskin9867787 .CodeMirror div.CodeMirror-secondarycursor { border-left:1px solid silver; } body div#devskin9867787 .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width:auto; border:0; background:#7e7; z-index:1; } body div#devskin9867787 .cm-tab { display:inline-block; } body div#devskin9867787 .cm-s-default .cm-keyword { color:#708; } body div#devskin9867787 .cm-s-default .cm-atom { color:#219; } body div#devskin9867787 .cm-s-default .cm-number { color:#164; } body div#devskin9867787 .cm-s-default .cm-def { color:#00f; } body div#devskin9867787 .cm-s-default .cm-variable { color:black; } body div#devskin9867787 .cm-s-default .cm-variable-2 { color:#05a; } body div#devskin9867787 .cm-s-default .cm-variable-3 { color:#085; } body div#devskin9867787 .cm-s-default .cm-property { color:black; } body div#devskin9867787 .cm-s-default .cm-operator { color:black; } body div#devskin9867787 .cm-s-default .cm-comment { color:#a50; } body div#devskin9867787 .cm-s-default .cm-string { color:#a11; } body div#devskin9867787 .cm-s-default .cm-string-2 { color:#f50; } body div#devskin9867787 .cm-s-default .cm-meta { color:#555; } body div#devskin9867787 .cm-s-default .cm-error { color:red; } body div#devskin9867787 .cm-s-default .cm-qualifier { color:#555; } body div#devskin9867787 .cm-s-default .cm-builtin { color:#30a; } body div#devskin9867787 .cm-s-default .cm-bracket { color:#997; } body div#devskin9867787 .cm-s-default .cm-tag { color:#170; } body div#devskin9867787 .cm-s-default .cm-attribute { color:#00c; } body div#devskin9867787 .cm-s-default .cm-header { color:blue; } body div#devskin9867787 .cm-s-default .cm-quote { color:#090; } body div#devskin9867787 .cm-s-default .cm-hr { color:#999; } body div#devskin9867787 .cm-s-default .cm-link { color:#00c; } body div#devskin9867787 .cm-negative { color:#d44; } body div#devskin9867787 .cm-positive { color:#292; } body div#devskin9867787 .cm-header, body div#devskin9867787 .cm-strong { font-weight:bold; } body div#devskin9867787 .cm-em { font-style:italic; } body div#devskin9867787 .cm-link { text-decoration:underline; } body div#devskin9867787 .cm-invalidchar { color:red; } body div#devskin9867787 div.CodeMirror span.CodeMirror-matchingbracket { color:#0f0; } body div#devskin9867787 div.CodeMirror span.CodeMirror-nonmatchingbracket { color:#f22; } body div#devskin9867787 .CodeMirror { line-height:1; position:relative; overflow:hidden; background:#FAFFF9; color:black; padding:4px 0; } body div#devskin9867787 .CodeMirror-scroll { margin-bottom:-30px; margin-right:-30px; padding-bottom:30px; padding-right:30px; height:100%; outline:0; position:relative; } body div#devskin9867787 .CodeMirror-sizer { position:relative; } body div#devskin9867787 .CodeMirror-vscrollbar, body div#devskin9867787 .CodeMirror-hscrollbar, body div#devskin9867787 .CodeMirror-scrollbar-filler { position:absolute; z-index:6; display:none; } body div#devskin9867787 .CodeMirror-vscrollbar { right:0; top:0; overflow:auto; } body div#devskin9867787 .CodeMirror-hscrollbar { bottom:0; left:0; overflow:auto; } body div#devskin9867787 .CodeMirror-scrollbar-filler { right:0; bottom:0; z-index:6; } body div#devskin9867787 .CodeMirror-gutters { position:absolute; left:0; top:0; height:100%; padding-bottom:30px; z-index:3; } body div#devskin9867787 .CodeMirror-gutter { white-space:normal; height:100%; padding-bottom:30px; margin-bottom:-32px; display:inline-block; } body div#devskin9867787 .CodeMirror-gutter-elt { position:absolute; cursor:default; z-index:4; } body div#devskin9867787 .CodeMirror-lines { cursor:text; } body div#devskin9867787 .CodeMirror pre { border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-width:0; background:transparent; font-family:inherit; font-size:inherit; margin:0; white-space:pre; line-height:inherit; color:inherit; z-index:2; position:relative; overflow:visible; } body div#devskin9867787 .CodeMirror-wrap pre { white-space:pre-wrap; } body div#devskin9867787 .CodeMirror-linebackground { position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; } body div#devskin9867787 .CodeMirror-linewidget { position:relative; z-index:2; overflow:auto; } body div#devskin9867787 .CodeMirror-widget { display:inline-block; } body div#devskin9867787 .CodeMirror-wrap .CodeMirror-scroll { overflow:auto; } body div#devskin9867787 .CodeMirror-measure { position:absolute; width:100%; height:0; overflow:hidden; visibility:hidden; } body div#devskin9867787 .CodeMirror-measure pre { position:static; } body div#devskin9867787 .CodeMirror div.CodeMirror-cursor { position:absolute; visibility:hidden; border-right:0; width:0; } body div#devskin9867787 .CodeMirror-focused div.CodeMirror-cursor { visibility:visible; } body div#devskin9867787 .CodeMirror-selected { background:#d9d9d9; } body div#devskin9867787 .CodeMirror-focused .CodeMirror-selected { background:#d7d4f0; } body div#devskin9867787 .cm-searching { background:#ffa; background:rgb(255, 255, 0); background:rgba(255,255,0,.4); } body div#devskin9867787 .CodeMirror span { } body div#devskin9867787 .cm-s-default .cm-wat-relative { position:relative; } body div#devskin9867787 .cm-s-default .cm-wat-absolute { position:absolute; left:-29px; } body div#devskin9867787 .cm-s-default .cm-wat-20px { left:0px; width:20px; } body div#devskin9867787 .cm-s-default .cm-wat-ghost { display:block; opacity:0.42; filter:alpha(opacity=42); _zoom:1; } body div#devskin9867787 .cm-s-default.cm-wat-code { padding-left:29px; } body div#devskin9867787 .cm-s-default.cm-wat-ie { background:url(https://a.deviantart.net/avatars/t/r/trollexplorerplz.gif?3) no-repeat scroll right center #FAFFF9; } body div#devskin9867787 .dv img { vertical-align:middle; } body div#devskin9867787 .dh { width:80%; margin:4px auto; padding:4px 0; border:1px solid #5A6459; } body div#devskin9867787 .dbig { font-size:16pt; } body div#devskin9867787 .dnope { display:none; } body div#devskin9867787 .hv-hold, body div#devskin9867787 .hv-text { display:inline-block; position:relative; } body div#devskin9867787 .hv-grid, body div#devskin9867787 .hv-hold::after { position:absolute; top:0; left:0; width:100%; height:100%; } body div#devskin9867787 .hv-hold::after { content:''; display:block; top:100%; } body div#devskin9867787 .hv-grid i { position:relative; float:left; width:1px; height:100%; cursor:help; } body div#devskin9867787 .hv-grid i::after { content:url(https://a.deviantart.net/avatars/c/h/challengeacceptedplz.png?1); display:none; position:absolute; top:30px; left:25px; } body div#devskin9867787 .hv-grid i:hover::after { display:block; } body div#devskin9867787 .tr .shadow-holder, body div#devskin9867787 .tr .shadow, body div#devskin9867787 .tr .wrap, body div#devskin9867787 .tr .lit, body div#devskin9867787 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin9867787 .tr .lit > i, body div#devskin9867787 .tr .lit > img, body div#devskin9867787 .tr .lit q * { display:none; } body div#devskin9867787 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin9867787 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:2000px; } body div#devskin9867787 .tr, body div#devskin9867787 .tr .lit q::before { width:15px; height:15px; } body div#devskin9867787 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin9867787 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:url(https://e.deviantart.net/emoticons/m/meow.gif); background-position:0px; } body div#devskin9867787 .tr q[style*='1px']::before { background-position:2px; } body div#devskin9867787 .tr q[style*='2px']::before { background-position:3px; } body div#devskin9867787 .tr q[style*='3px']::before { background-position:4px; } body div#devskin9867787 .tr q[style*='4px']::before { background-position:6px; } body div#devskin9867787 .tr q[style*='5px']::before { background-position:8px; } body div#devskin9867787 .tr q[style*='6px']::before { background-position:9px; } body div#devskin9867787 .tr q[style*='7px']::before { background-position:10px; } body div#devskin9867787 .tr q[style*='8px']::before { background-position:12px; } body div#devskin9867787 .tr q[style*='9px']::before { background-position:13px; } body div#devskin9867787 .tr q[style*='0px']::before { background-position:15px; } body div#devskin9867787 acronym { border-bottom:1px dotted currentColor; } body div#devskin9867787 .alink.bottom { display:none; } body div#devskin9867787 .grf-indent .text { padding:4px 15px 4px 30px !important; } body div#devskin9867787 .r { text-align:right; } body div#devskin9867787 .c { text-align:center; } body div#devskin9867787 .l { text-align:left; }

There's no such thing as a former alpha tester~

:iconchallengeacceptedplz:

[Google-translated introduction which can be skipped]
I was inactive on dA for a while and when I went back I noticed that I'm not an alpha tester anymore, because there was recruiting of new active members. That's logical and I felt awkward for being inactive tester anyway. But the problem is that CSS3 transitions are still not available for beta testers and regular users. And this is sad, because I planned to use it for some chaos tricks..

“I don't want one eventually! I want one right now!”

Fortunately the solution is pretty obvious: we (non alpha testers) can use CSS attribute-value selectors to match inline «style» property formed by JavaScript mouseover handler of the ineractive thumbnails to apply pre-defined rules sequence which simulates the transition effect.
For this trick we can use journal- or literature-deviation thumbnail. Let's take a look at the code, produced by :thumb367755371:

journal title journal text

First two ‹span.shadow*› elements is useless containers,
‹a.lit› - link to the journal page; this element handles mouseover/mouseout events to run «LitBox.hover()/out()» functions,
‹i›, ‹img› - decorative stuff,
‹span.wrap› - another useless container,
‹q› - is what we need, the element with dynamic «style» attribute. «LitBox.hover()/out()» functions changes its «style.top» property whereby thumbnail's content visually moves up and down.

So we can put a thumb into container (to isolate its CSS rules from the rest of journal skin), like this:

:thumb367755371:
and stylize some elements related to ‹div.tr› ‹q› depending on the current position of ‹q› element, like this:
.tr q[style*="top: (x-1)px"] something {styles for fake-transition frame n+1}.tr q[style*="top: (x-2)px"] something {styles for fake-transition frame n+2}.tr q[style*="top: (x-3)px"] something {styles for fake-transition frame n+3}
..and so on.

Since the latest versions of Chrome and Opera has a redrawing bug, when CSS dynamically applies to child elements by parental attribute selectors, we can't use anything inside ‹q›. So that stylizable elements are ‹q› itself, its siblings, and its pseudo elements. In our case ‹q› has no siblings, and inside it there are text nodes, so pseudo elements (::before/::after) will bring us less trouble.

In this way we can describe forward-stroke part of some transition effect(s) frame by frame, which triggers on mouseover, and use in combination with other stuff to create something cool But to convert real CSS3 transition to fake one we need to know one more thing about it - FPS. Let's figure it out (I write in detail so you can maintain this stuff by yourself, in case of if dA will change something or if you require further features).
Said object «LitBox» located in the deviantart-network_jc.js file where we can see this code:

1

var d = $(g);

2

var c = d.find("q");

3

var a = c.position();

4

var b = (c.height() - d.height()) + 10;

5

if (b <= 0) {

6

return

7

}

8

Station.stopAnimation(c[0]);

9

Station.run(c[0], "top", {

10

from: a.top,

11

to: a.top - b,

12

time: e ? ((b / 2) * 25 * 3) : (b * 25 * 3)

13

})

..which is derped. I mean, the only "compression" applied here is variable names shortening, and unfortunately it's enough to make it a bit difficult to read. But I'm not going to rename anything to stay close to real context.
So, let's start from the end: frame rate is about frames per second, in our case it's eqal to pixels per second, and that is speed, which is equal to distance divided by time.

Distance:
distance = to − from = a.top − b − a.top = −b
This means that ‹q›'s «style.top» property changes from '0' to '−b' pixels.
By the way,
−distance = b = (c.height() − d.height()) + 10, where c is ‹q› and d is ‹a›.
So we can set ‹a›'s height to 10 pixels (in CSS) to compensate that constant, therefore b becomes equal to the height of ‹q›.

Time:
time = e ? ((b / 2) ∙ 25 ∙ 3) : (b ∙ 25 ∙ 3)
from what I see e is always true, so:
time = (b / 2) ∙ 25 ∙ 3 = b ∙ 37.5

Speed:
speed = distance / time = −b / (b ∙ 37.5) = −1/37.5 = −0.02(6) pixels per millisecond.
This means that maximum FPS of the fake transition animation is 26.(6)

Now, let's go practice CSS

As mentioned above, the effect is applied to ‹q›'s pseudo-elements, so let's take first one, ‹q›::before, for concreteness. All the other stuff from thumb's code is junk so we need to get rid of it, to obtain structure like this:
‹div.tr› (invisible container) → junk (invisible and ignored wrappers) → ‹q›::before (visible, positioned relative to invisible container)
Which is fairly easy to achieve:

.tr { position: relative; visibility: hidden;} .tr q::before { position: absolute; visibility: visible;}

[upd] I mean, it's easy in theoretical parallel universe without Internet Explorer. Latest version of this thing, named IE10, knows about the existence of modern technologies, which makes it annoying like never before. The problem is: there's no way to hide the element and show it's pseudo-element childs, so we're forced to "raise" the visibility from ‹q›::before to the ‹q› itself.
But since in some ways pseudo-elements still remain cozier to use - we'll just hide ‹q›'s content using old school "negative text-indent" trick and will pretend that everything is fine

.tr .lit q { visibility: visible; text-indent: -9001px; color: transparent;}

Plus, to make the containers between ‹div.tr› and ‹q›::before invisible not just for eyes but for the box model as well, we need to reset some of their styles:

.tr .shadow-holder,.tr .shadow,.tr .wrap,.tr .lit,.tr .lit q { display: inline; position: static; width: 0; height: 0; margin: 0; padding: 0; border: 0 none; overflow: visible;}

And finally there are some elements, not wrappers, which can be safely removed:

.tr .lit > i,.tr .lit > img,.tr .lit q * { display: none;}

We got the base. Now, as proved above, we need to compensate a constant from the distance formula by setting ‹a›'s height to 10 pixels:

.tr .lit { display: block; height: 10px;}

Once it's done - ‹q›'s height becomes equal to distance, which is known as total number of frames in fake transition. For example 1.5 seconds of this effect on full frame rate requires 26.(6) ∙ 1.5 = 40 frames, so:

.tr .lit q { visibility: visible; text-indent: -9001px; color: transparent; display: block; height: 40px;}

Ok, it's time to describe the effect itself. For example let's take a picture.. a picture of a pony, as a background, and resize it on mouseover from '50px' to '100%' of its parent square box (percents are far-fetched here to show the limitations of this method as applied to 'inherited' or 'current' CSS values). Like this:

→

The style for ‹q›::before becomes:

.tr q::before { position: absolute; background: url('http:/ /fc09.deviantart.net/fs71/f/2013/121/2/1/d4ancxp_fixd_by_fli_c-d63qo0w.png') no-repeat center center; background-size: 50px auto;}

Our transition animation will proceed according to some Bézier curve.. because it's fashionable and because we'll be able to fairly compare the result of this little experiment with real CSS3 transition effect. Let's take something like cubic-bezier(0.66, 1, 1, 0) :

In terms of CSS3 it can be described as:

.tr:hover q::before { background-size: 100% auto; transition: background-size 1.5s cubic-bezier(0.66, 1, 1, 0) 0s;}

As you know this real (native) transition will automatically handle that the target parameter should be animated from pixels value (50px) to percents (100%). And of course in fake one we should deal with any stuff like this with bare hands. In this case it's not a big deal though: 50px (initial pic width) / 300px (current container width) ∙ 100% = 16.(6)%, so default (frame #0) size stays 50px and fake transition will animate it from ~16.67% to 100%.. but yes, it is less flexible than native one - it can't recalculate itself to nicely jump from static values to dynamic if they change. So..

.tr,.tr q::before { width: 300px; height: 300px;}

Now back to JavaScript

Anyway, we got all the required information to run some cubic-bezier function to generate rules sequence! Google says that this one is ok, so be it.
(If you ok with programming than this is a tl;dr for you:)

1

var frequency = 1 / 37.5, // 0.02(6) frames per millisecond

2

duration = 1500, // 1500 milliseconds (1.5 seconds)

3

frames = frequency * duration, // 40 frames

4

from = 50 / 300 * 100, // frame 0 is 16.(6) units

5

to = 100, // frame 40 is 100 units

6

unit = '%', // units is percents

7

css = '',

8

curve = bezier(

9

0.66, 1, 1, 0, // cubic-bezier points

10

(1000 / 60 / duration) / 4 // default precision

11

);

12

13

to -= from;

14

15

for (var f = 1; f <= frames; f++) {

16

css += sprintf ('.tr q[style*="%dpx"]::before {background-size: %.2F%s}\n', -f, from + to * curve(f/frames), unit);

17

}

18

19

console.log(css);

And the result is:

.tr q[style*="-1px"]::before {background-size: 19.74%}.tr q[style*="-2px"]::before {background-size: 22.67%}.tr q[style*="-3px"]::before {background-size: 25.44%}.tr q[style*="-4px"]::before {background-size: 28.05%}.tr q[style*="-5px"]::before {background-size: 30.93%}.tr q[style*="-6px"]::before {background-size: 33.42%}.tr q[style*="-7px"]::before {background-size: 35.78%}.tr q[style*="-8px"]::before {background-size: 38.02%}.tr q[style*="-9px"]::before {background-size: 40.14%}.tr q[style*="-10px"]::before {background-size: 42.14%}.tr q[style*="-11px"]::before {background-size: 44.01%}.tr q[style*="-12px"]::before {background-size: 45.75%}.tr q[style*="-13px"]::before {background-size: 47.37%}.tr q[style*="-14px"]::before {background-size: 48.86%}.tr q[style*="-15px"]::before {background-size: 50.21%}.tr q[style*="-16px"]::before {background-size: 51.43%}.tr q[style*="-17px"]::before {background-size: 52.72%}.tr q[style*="-18px"]::before {background-size: 53.75%}.tr q[style*="-19px"]::before {background-size: 54.68%}.tr q[style*="-20px"]::before {background-size: 55.49%}.tr q[style*="-21px"]::before {background-size: 56.18%}.tr q[style*="-22px"]::before {background-size: 56.72%}.tr q[style*="-23px"]::before {background-size: 57.24%}.tr q[style*="-24px"]::before {background-size: 57.63%}.tr q[style*="-25px"]::before {background-size: 57.90%}.tr q[style*="-26px"]::before {background-size: 58.10%}.tr q[style*="-27px"]::before {background-size: 58.23%}.tr q[style*="-28px"]::before {background-size: 58.30%}.tr q[style*="-29px"]::before {background-size: 58.33%}.tr q[style*="-30px"]::before {background-size: 58.33%}.tr q[style*="-31px"]::before {background-size: 58.34%}.tr q[style*="-32px"]::before {background-size: 58.39%}.tr q[style*="-33px"]::before {background-size: 58.55%}.tr q[style*="-34px"]::before {background-size: 58.88%}.tr q[style*="-35px"]::before {background-size: 59.45%}.tr q[style*="-36px"]::before {background-size: 60.59%}.tr q[style*="-37px"]::before {background-size: 62.38%}.tr q[style*="-38px"]::before {background-size: 65.60%}.tr q[style*="-39px"]::before {background-size: 71.19%}.tr q[style*="-40px"]::before {background-size: 100.00%}

..ta-da
Here's a little gif , comparison with native transition side by side (left - this sequence, right - actual CSS3).. not absolutely identical but
Also, here is the live demo , its complete CSS , and most importantly [upd] —

— CSS generator , which can help to create fake-transition CSS code.

And that's it. I hope it was informative
pfft (SVG journal skin)Testing animated SVG as a journal skin. Should work everywhere, except old iOS devices and latest (Presto/2.12.388) Opera.. unfortunately. Fluffle Puff is best poni btw :)

Description
body div#devskin9867787 .CodeMirror { font-family:monospace; } body div#devskin9867787 .CodeMirror-scroll { overflow:auto; } body div#devskin9867787 .CodeMirror-lines { padding:4px 0; } body div#devskin9867787 .CodeMirror pre { padding:0 4px; } body div#devskin9867787 .CodeMirror-scrollbar-filler { background-color:white; } body div#devskin9867787 .CodeMirror-gutters { border-right:1px solid #ddd; background-color:#f7f7f7; white-space:nowrap; } body div#devskin9867787 .CodeMirror-linenumber { padding:0 3px 0 5px; min-width:20px; text-align:right; color:#999; } body div#devskin9867787 .CodeMirror div.CodeMirror-cursor { border-left:1px solid black; z-index:3; } body div#devskin9867787 .CodeMirror div.CodeMirror-secondarycursor { border-left:1px solid silver; } body div#devskin9867787 .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width:auto; border:0; background:#7e7; z-index:1; } body div#devskin9867787 .cm-tab { display:inline-block; } body div#devskin9867787 .cm-s-default .cm-keyword { color:#708; } body div#devskin9867787 .cm-s-default .cm-atom { color:#219; } body div#devskin9867787 .cm-s-default .cm-number { color:#164; } body div#devskin9867787 .cm-s-default .cm-def { color:#00f; } body div#devskin9867787 .cm-s-default .cm-variable { color:black; } body div#devskin9867787 .cm-s-default .cm-variable-2 { color:#05a; } body div#devskin9867787 .cm-s-default .cm-variable-3 { color:#085; } body div#devskin9867787 .cm-s-default .cm-property { color:black; } body div#devskin9867787 .cm-s-default .cm-operator { color:black; } body div#devskin9867787 .cm-s-default .cm-comment { color:#a50; } body div#devskin9867787 .cm-s-default .cm-string { color:#a11; } body div#devskin9867787 .cm-s-default .cm-string-2 { color:#f50; } body div#devskin9867787 .cm-s-default .cm-meta { color:#555; } body div#devskin9867787 .cm-s-default .cm-error { color:red; } body div#devskin9867787 .cm-s-default .cm-qualifier { color:#555; } body div#devskin9867787 .cm-s-default .cm-builtin { color:#30a; } body div#devskin9867787 .cm-s-default .cm-bracket { color:#997; } body div#devskin9867787 .cm-s-default .cm-tag { color:#170; } body div#devskin9867787 .cm-s-default .cm-attribute { color:#00c; } body div#devskin9867787 .cm-s-default .cm-header { color:blue; } body div#devskin9867787 .cm-s-default .cm-quote { color:#090; } body div#devskin9867787 .cm-s-default .cm-hr { color:#999; } body div#devskin9867787 .cm-s-default .cm-link { color:#00c; } body div#devskin9867787 .cm-negative { color:#d44; } body div#devskin9867787 .cm-positive { color:#292; } body div#devskin9867787 .cm-header, body div#devskin9867787 .cm-strong { font-weight:bold; } body div#devskin9867787 .cm-em { font-style:italic; } body div#devskin9867787 .cm-link { text-decoration:underline; } body div#devskin9867787 .cm-invalidchar { color:red; } body div#devskin9867787 div.CodeMirror span.CodeMirror-matchingbracket { color:#0f0; } body div#devskin9867787 div.CodeMirror span.CodeMirror-nonmatchingbracket { color:#f22; } body div#devskin9867787 .CodeMirror { line-height:1; position:relative; overflow:hidden; background:#FAFFF9; color:black; padding:4px 0; } body div#devskin9867787 .CodeMirror-scroll { margin-bottom:-30px; margin-right:-30px; padding-bottom:30px; padding-right:30px; height:100%; outline:0; position:relative; } body div#devskin9867787 .CodeMirror-sizer { position:relative; } body div#devskin9867787 .CodeMirror-vscrollbar, body div#devskin9867787 .CodeMirror-hscrollbar, body div#devskin9867787 .CodeMirror-scrollbar-filler { position:absolute; z-index:6; display:none; } body div#devskin9867787 .CodeMirror-vscrollbar { right:0; top:0; overflow:auto; } body div#devskin9867787 .CodeMirror-hscrollbar { bottom:0; left:0; overflow:auto; } body div#devskin9867787 .CodeMirror-scrollbar-filler { right:0; bottom:0; z-index:6; } body div#devskin9867787 .CodeMirror-gutters { position:absolute; left:0; top:0; height:100%; padding-bottom:30px; z-index:3; } body div#devskin9867787 .CodeMirror-gutter { white-space:normal; height:100%; padding-bottom:30px; margin-bottom:-32px; display:inline-block; } body div#devskin9867787 .CodeMirror-gutter-elt { position:absolute; cursor:default; z-index:4; } body div#devskin9867787 .CodeMirror-lines { cursor:text; } body div#devskin9867787 .CodeMirror pre { border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-width:0; background:transparent; font-family:inherit; font-size:inherit; margin:0; white-space:pre; line-height:inherit; color:inherit; z-index:2; position:relative; overflow:visible; } body div#devskin9867787 .CodeMirror-wrap pre { white-space:pre-wrap; } body div#devskin9867787 .CodeMirror-linebackground { position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; } body div#devskin9867787 .CodeMirror-linewidget { position:relative; z-index:2; overflow:auto; } body div#devskin9867787 .CodeMirror-widget { display:inline-block; } body div#devskin9867787 .CodeMirror-wrap .CodeMirror-scroll { overflow:auto; } body div#devskin9867787 .CodeMirror-measure { position:absolute; width:100%; height:0; overflow:hidden; visibility:hidden; } body div#devskin9867787 .CodeMirror-measure pre { position:static; } body div#devskin9867787 .CodeMirror div.CodeMirror-cursor { position:absolute; visibility:hidden; border-right:0; width:0; } body div#devskin9867787 .CodeMirror-focused div.CodeMirror-cursor { visibility:visible; } body div#devskin9867787 .CodeMirror-selected { background:#d9d9d9; } body div#devskin9867787 .CodeMirror-focused .CodeMirror-selected { background:#d7d4f0; } body div#devskin9867787 .cm-searching { background:#ffa; background:rgb(255, 255, 0); background:rgba(255,255,0,.4); } body div#devskin9867787 .CodeMirror span { } body div#devskin9867787 .cm-s-default .cm-wat-relative { position:relative; } body div#devskin9867787 .cm-s-default .cm-wat-absolute { position:absolute; left:-29px; } body div#devskin9867787 .cm-s-default .cm-wat-20px { left:0px; width:20px; } body div#devskin9867787 .cm-s-default .cm-wat-ghost { display:block; opacity:0.42; filter:alpha(opacity=42); _zoom:1; } body div#devskin9867787 .cm-s-default.cm-wat-code { padding-left:29px; } body div#devskin9867787 .cm-s-default.cm-wat-ie { background:url(https://a.deviantart.net/avatars/t/r/trollexplorerplz.gif?3) no-repeat scroll right center #FAFFF9; } body div#devskin9867787 .dv img { vertical-align:middle; } body div#devskin9867787 .dh { width:80%; margin:4px auto; padding:4px 0; border:1px solid #5A6459; } body div#devskin9867787 .dbig { font-size:16pt; } body div#devskin9867787 .dnope { display:none; } body div#devskin9867787 .hv-hold, body div#devskin9867787 .hv-text { display:inline-block; position:relative; } body div#devskin9867787 .hv-grid, body div#devskin9867787 .hv-hold::after { position:absolute; top:0; left:0; width:100%; height:100%; } body div#devskin9867787 .hv-hold::after { content:''; display:block; top:100%; } body div#devskin9867787 .hv-grid i { position:relative; float:left; width:1px; height:100%; cursor:help; } body div#devskin9867787 .hv-grid i::after { content:url(https://a.deviantart.net/avatars/c/h/challengeacceptedplz.png?1); display:none; position:absolute; top:30px; left:25px; } body div#devskin9867787 .hv-grid i:hover::after { display:block; } body div#devskin9867787 .tr .shadow-holder, body div#devskin9867787 .tr .shadow, body div#devskin9867787 .tr .wrap, body div#devskin9867787 .tr .lit, body div#devskin9867787 .tr .lit q { display:inline; position:static; width:0; height:0; margin:0; padding:0; border:0 none; overflow:visible; background:none; cursor:default; } body div#devskin9867787 .tr .lit > i, body div#devskin9867787 .tr .lit > img, body div#devskin9867787 .tr .lit q * { display:none; } body div#devskin9867787 .tr .lit { display:block; height:10px; position:static !important; } body div#devskin9867787 .tr .lit q { visibility:visible; text-indent:-9001px; color:transparent; display:block; height:2000px; } body div#devskin9867787 .tr, body div#devskin9867787 .tr .lit q::before { width:15px; height:15px; } body div#devskin9867787 .tr { display:inline-block; position:relative; visibility:hidden; } body div#devskin9867787 .tr .lit q::before { content:''; display:block; position:absolute; left:0; top:0; text-indent:0; color:black; background:url(https://e.deviantart.net/emoticons/m/meow.gif); background-position:0px; } body div#devskin9867787 .tr q[style*='1px']::before { background-position:2px; } body div#devskin9867787 .tr q[style*='2px']::before { background-position:3px; } body div#devskin9867787 .tr q[style*='3px']::before { background-position:4px; } body div#devskin9867787 .tr q[style*='4px']::before { background-position:6px; } body div#devskin9867787 .tr q[style*='5px']::before { background-position:8px; } body div#devskin9867787 .tr q[style*='6px']::before { background-position:9px; } body div#devskin9867787 .tr q[style*='7px']::before { background-position:10px; } body div#devskin9867787 .tr q[style*='8px']::before { background-position:12px; } body div#devskin9867787 .tr q[style*='9px']::before { background-position:13px; } body div#devskin9867787 .tr q[style*='0px']::before { background-position:15px; } body div#devskin9867787 acronym { border-bottom:1px dotted currentColor; } body div#devskin9867787 .alink.bottom { display:none; } body div#devskin9867787 .grf-indent .text { padding:4px 15px 4px 30px !important; } body div#devskin9867787 .r { text-align:right; } body div#devskin9867787 .c { text-align:center; } body div#devskin9867787 .l { text-align:left; }

There's no such thing as a former alpha tester~

:iconchallengeacceptedplz:

[Google-translated introduction which can be skipped]
I was inactive on dA for a while and when I went back I noticed that I'm not an alpha tester anymore, because there was recruiting of new active members. That's logical and I felt awkward for being inactive tester anyway. But the problem is that CSS3 transitions are still not available for beta testers and regular users. And this is sad, because I planned to use it for some chaos tricks..

“I don't want one eventually! I want one right now!”

Fortunately the solution is pretty obvious: we (non alpha testers) can use CSS attribute-value selectors to match inline «style» property formed by JavaScript mouseover handler of the ineractive thumbnails to apply pre-defined rules sequence which simulates the transition effect.
For this trick we can use journal- or literature-deviation thumbnail. Let's take a look at the code, produced by :thumb367755371:

journal title journal text

First two ‹span.shadow*› elements is useless containers,
‹a.lit› - link to the journal page; this element handles mouseover/mouseout events to run «LitBox.hover()/out()» functions,
‹i›, ‹img› - decorative stuff,
‹span.wrap› - another useless container,
‹q› - is what we need, the element with dynamic «style» attribute. «LitBox.hover()/out()» functions changes its «style.top» property whereby thumbnail's content visually moves up and down.

So we can put a thumb into container (to isolate its CSS rules from the rest of journal skin), like this:

:thumb367755371:
and stylize some elements related to ‹div.tr› ‹q› depending on the current position of ‹q› element, like this:
.tr q[style*="top: (x-1)px"] something {styles for fake-transition frame n+1}.tr q[style*="top: (x-2)px"] something {styles for fake-transition frame n+2}.tr q[style*="top: (x-3)px"] something {styles for fake-transition frame n+3}
..and so on.

Since the latest versions of Chrome and Opera has a redrawing bug, when CSS dynamically applies to child elements by parental attribute selectors, we can't use anything inside ‹q›. So that stylizable elements are ‹q› itself, its siblings, and its pseudo elements. In our case ‹q› has no siblings, and inside it there are text nodes, so pseudo elements (::before/::after) will bring us less trouble.

In this way we can describe forward-stroke part of some transition effect(s) frame by frame, which triggers on mouseover, and use in combination with other stuff to create something cool But to convert real CSS3 transition to fake one we need to know one more thing about it - FPS. Let's figure it out (I write in detail so you can maintain this stuff by yourself, in case of if dA will change something or if you require further features).
Said object «LitBox» located in the deviantart-network_jc.js file where we can see this code:

1

var d = $(g);

2

var c = d.find("q");

3

var a = c.position();

4

var b = (c.height() - d.height()) + 10;

5

if (b <= 0) {

6

return

7

}

8

Station.stopAnimation(c[0]);

9

Station.run(c[0], "top", {

10

from: a.top,

11

to: a.top - b,

12

time: e ? ((b / 2) * 25 * 3) : (b * 25 * 3)

13

})

..which is derped. I mean, the only "compression" applied here is variable names shortening, and unfortunately it's enough to make it a bit difficult to read. But I'm not going to rename anything to stay close to real context.
So, let's start from the end: frame rate is about frames per second, in our case it's eqal to pixels per second, and that is speed, which is equal to distance divided by time.

Distance:
distance = to − from = a.top − b − a.top = −b
This means that ‹q›'s «style.top» property changes from '0' to '−b' pixels.
By the way,
−distance = b = (c.height() − d.height()) + 10, where c is ‹q› and d is ‹a›.
So we can set ‹a›'s height to 10 pixels (in CSS) to compensate that constant, therefore b becomes equal to the height of ‹q›.

Time:
time = e ? ((b / 2) ∙ 25 ∙ 3) : (b ∙ 25 ∙ 3)
from what I see e is always true, so:
time = (b / 2) ∙ 25 ∙ 3 = b ∙ 37.5

Speed:
speed = distance / time = −b / (b ∙ 37.5) = −1/37.5 = −0.02(6) pixels per millisecond.
This means that maximum FPS of the fake transition animation is 26.(6)

Now, let's go practice CSS

As mentioned above, the effect is applied to ‹q›'s pseudo-elements, so let's take first one, ‹q›::before, for concreteness. All the other stuff from thumb's code is junk so we need to get rid of it, to obtain structure like this:
‹div.tr› (invisible container) → junk (invisible and ignored wrappers) → ‹q›::before (visible, positioned relative to invisible container)
Which is fairly easy to achieve:

.tr { position: relative; visibility: hidden;} .tr q::before { position: absolute; visibility: visible;}

[upd] I mean, it's easy in theoretical parallel universe without Internet Explorer. Latest version of this thing, named IE10, knows about the existence of modern technologies, which makes it annoying like never before. The problem is: there's no way to hide the element and show it's pseudo-element childs, so we're forced to "raise" the visibility from ‹q›::before to the ‹q› itself.
But since in some ways pseudo-elements still remain cozier to use - we'll just hide ‹q›'s content using old school "negative text-indent" trick and will pretend that everything is fine

.tr .lit q { visibility: visible; text-indent: -9001px; color: transparent;}

Plus, to make the containers between ‹div.tr› and ‹q›::before invisible not just for eyes but for the box model as well, we need to reset some of their styles:

.tr .shadow-holder,.tr .shadow,.tr .wrap,.tr .lit,.tr .lit q { display: inline; position: static; width: 0; height: 0; margin: 0; padding: 0; border: 0 none; overflow: visible;}

And finally there are some elements, not wrappers, which can be safely removed:

.tr .lit > i,.tr .lit > img,.tr .lit q * { display: none;}

We got the base. Now, as proved above, we need to compensate a constant from the distance formula by setting ‹a›'s height to 10 pixels:

.tr .lit { display: block; height: 10px;}

Once it's done - ‹q›'s height becomes equal to distance, which is known as total number of frames in fake transition. For example 1.5 seconds of this effect on full frame rate requires 26.(6) ∙ 1.5 = 40 frames, so:

.tr .lit q { visibility: visible; text-indent: -9001px; color: transparent; display: block; height: 40px;}

Ok, it's time to describe the effect itself. For example let's take a picture.. a picture of a pony, as a background, and resize it on mouseover from '50px' to '100%' of its parent square box (percents are far-fetched here to show the limitations of this method as applied to 'inherited' or 'current' CSS values). Like this:

→

The style for ‹q›::before becomes:

.tr q::before { position: absolute; background: url('http:/ /fc09.deviantart.net/fs71/f/2013/121/2/1/d4ancxp_fixd_by_fli_c-d63qo0w.png') no-repeat center center; background-size: 50px auto;}

Our transition animation will proceed according to some Bézier curve.. because it's fashionable and because we'll be able to fairly compare the result of this little experiment with real CSS3 transition effect. Let's take something like cubic-bezier(0.66, 1, 1, 0) :

In terms of CSS3 it can be described as:

.tr:hover q::before { background-size: 100% auto; transition: background-size 1.5s cubic-bezier(0.66, 1, 1, 0) 0s;}

As you know this real (native) transition will automatically handle that the target parameter should be animated from pixels value (50px) to percents (100%). And of course in fake one we should deal with any stuff like this with bare hands. In this case it's not a big deal though: 50px (initial pic width) / 300px (current container width) ∙ 100% = 16.(6)%, so default (frame #0) size stays 50px and fake transition will animate it from ~16.67% to 100%.. but yes, it is less flexible than native one - it can't recalculate itself to nicely jump from static values to dynamic if they change. So..

.tr,.tr q::before { width: 300px; height: 300px;}

Now back to JavaScript

Anyway, we got all the required information to run some cubic-bezier function to generate rules sequence! Google says that this one is ok, so be it.
(If you ok with programming than this is a tl;dr for you:)

1

var frequency = 1 / 37.5, // 0.02(6) frames per millisecond

2

duration = 1500, // 1500 milliseconds (1.5 seconds)

3

frames = frequency * duration, // 40 frames

4

from = 50 / 300 * 100, // frame 0 is 16.(6) units

5

to = 100, // frame 40 is 100 units

6

unit = '%', // units is percents

7

css = '',

8

curve = bezier(

9

0.66, 1, 1, 0, // cubic-bezier points

10

(1000 / 60 / duration) / 4 // default precision

11

);

12

13

to -= from;

14

15

for (var f = 1; f <= frames; f++) {

16

css += sprintf ('.tr q[style*="%dpx"]::before {background-size: %.2F%s}\n', -f, from + to * curve(f/frames), unit);

17

}

18

19

console.log(css);

And the result is:

.tr q[style*="-1px"]::before {background-size: 19.74%}.tr q[style*="-2px"]::before {background-size: 22.67%}.tr q[style*="-3px"]::before {background-size: 25.44%}.tr q[style*="-4px"]::before {background-size: 28.05%}.tr q[style*="-5px"]::before {background-size: 30.93%}.tr q[style*="-6px"]::before {background-size: 33.42%}.tr q[style*="-7px"]::before {background-size: 35.78%}.tr q[style*="-8px"]::before {background-size: 38.02%}.tr q[style*="-9px"]::before {background-size: 40.14%}.tr q[style*="-10px"]::before {background-size: 42.14%}.tr q[style*="-11px"]::before {background-size: 44.01%}.tr q[style*="-12px"]::before {background-size: 45.75%}.tr q[style*="-13px"]::before {background-size: 47.37%}.tr q[style*="-14px"]::before {background-size: 48.86%}.tr q[style*="-15px"]::before {background-size: 50.21%}.tr q[style*="-16px"]::before {background-size: 51.43%}.tr q[style*="-17px"]::before {background-size: 52.72%}.tr q[style*="-18px"]::before {background-size: 53.75%}.tr q[style*="-19px"]::before {background-size: 54.68%}.tr q[style*="-20px"]::before {background-size: 55.49%}.tr q[style*="-21px"]::before {background-size: 56.18%}.tr q[style*="-22px"]::before {background-size: 56.72%}.tr q[style*="-23px"]::before {background-size: 57.24%}.tr q[style*="-24px"]::before {background-size: 57.63%}.tr q[style*="-25px"]::before {background-size: 57.90%}.tr q[style*="-26px"]::before {background-size: 58.10%}.tr q[style*="-27px"]::before {background-size: 58.23%}.tr q[style*="-28px"]::before {background-size: 58.30%}.tr q[style*="-29px"]::before {background-size: 58.33%}.tr q[style*="-30px"]::before {background-size: 58.33%}.tr q[style*="-31px"]::before {background-size: 58.34%}.tr q[style*="-32px"]::before {background-size: 58.39%}.tr q[style*="-33px"]::before {background-size: 58.55%}.tr q[style*="-34px"]::before {background-size: 58.88%}.tr q[style*="-35px"]::before {background-size: 59.45%}.tr q[style*="-36px"]::before {background-size: 60.59%}.tr q[style*="-37px"]::before {background-size: 62.38%}.tr q[style*="-38px"]::before {background-size: 65.60%}.tr q[style*="-39px"]::before {background-size: 71.19%}.tr q[style*="-40px"]::before {background-size: 100.00%}

..ta-da
Here's a little gif , comparison with native transition side by side (left - this sequence, right - actual CSS3).. not absolutely identical but
Also, here is the live demo , its complete CSS , and most importantly [upd] —

— CSS generator , which can help to create fake-transition CSS code.

And that's it. I hope it was informative
pfft (SVG journal skin)Testing animated SVG as a journal skin. Should work everywhere, except old iOS devices and latest (Presto/2.12.388) Opera.. unfortunately. Fluffle Puff is best poni btw :)