JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
Hello.
<div id='header'>CSS Pack by SleepyFool</div> <div id='disclaimer'> <p> Hello. This is a CSS pack of text manipulations, though many can also be applied to images or any other element. </p> <p> Most of these effects should work by just applying the class name on the left-most column, but the {{{tw-glitch}}} and {{{tw-glitch-more}}} classes require a {{{data-tw-glitch}}} html attribute with a value equal to the content of the element. </p> <p> Some of these effects have CSS variables which you can use to alter their behavior. The stylesheet has the default values defined at the very top, which you can also change. These were created and tested on SugarCube but should theoretically work with any story format as it's pure CSS. </p> <p> Disclaimer: these CSS effects are provided as is — if they do not work, it's likely because of some other clash with your existing stylesheet, or you may be attempting to use incompatible classes together. Aside from the first section, each effect is incompatible with another effect in the same section — animations may additionally be incompatible with other effects depending on what is being animated (though you can often get around this limitation by successively wrapping elements). </p> <p> <b>CAUTION:</b> CSS effects and text animations are often better when used //sparingly//. </p> </div> <div id='exampleC'> <div class='example title'> <div class='label'>Font styles</div> <div class='css'> CSS effect </div> <div class='comment'> Origin </div> <div class='variables'>Accepted variables</div> </div> <<set _list to [ { id: `tw-none`, comment: `Harlowe import`, }, { id: `tw-invisible`, comment: `SleepyFool original`, }, { id: `tw-bold`, comment: `Harlowe import`, }, { id: `tw-italic`, comment: `Harlowe import`, }, { id: `tw-superscript`, comment: `Harlowe import`, }, { id: `tw-subscript`, comment: `Harlowe import`, }, { id: `tw-expand`, comment: `Harlowe import`, variables: `--tw-expand`, }, { id: `tw-condense`, comment: `Harlowe import`, variables: `--tw-condense`, }, ]>> <<for _i, _class range _list>> <div class='example'> <div class='label'> <<print _class.id>> </div> <div class='css'> An <span @class="_class.id">example</span> usage </div> <div class='comment'> <<print _class.comment>> </div> <div class='variables'> <<if _class.variables>> <<print "<pre>"+_class.variables+"</pre>">> <</if>> </div> </div> <</for>> <div class='example'> <div class='label'>tw-drop-cap</div> <div class='css tw-drop-cap'> This is a an example sentence consisting of words which are in turn made of letters. </div> <div class='comment'> SleepyFool original </div> <div class='variables'> <pre>--tw-drop-cap-size<br/>--tw-drop-cap-margin<br/>--tw-drop-cap-font</pre> </div> </div> <div class='example title'> <div class='label'>Lines</div> <div class='css'> CSS effect </div> <div class='comment'> Origin </div> <div class='variables'>Accepted variables</div> </div> <<set _list to [ { id: `tw-underline`, comment: `Harlowe import`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-underline-dashed`, comment: `SleepyFool original`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-underline-dotted`, comment: `SleepyFool original`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-underline-double`, comment: `Harlowe import`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-underline-wavy`, comment: `Harlowe import`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-strike`, comment: `Harlowe import`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-strike-dashed`, comment: `SleepyFool original`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-strike-dotted`, comment: `SleepyFool original`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-strike-double`, comment: `Harlowe import`, variables: `--tw-line-color<br/>--tw-line-width`, }, { id: `tw-strike-wavy`, comment: `Harlowe import`, variables: `--tw-line-color<br/>--tw-line-width`, }, ]>> <<for _i, _class range _list>> <div class='example'> <div class='label'> <<print _class.id>> </div> <div class='css'> An <span @class="_class.id">example</span> usage </div> <div class='comment'> <<print _class.comment>> </div> <div class='variables'> <<if _class.variables>> <<print "<pre>"+_class.variables+"</pre>">> <</if>> </div> </div> <</for>> <div class='example title'> <div class='label'>Filters</div> <div class='css'> CSS effect </div> <div class='comment'> Origin </div> <div class='variables'>Accepted variables</div> </div> <<set _list to [ { id: `tw-glow`, comment: `SleepyFool original`, variables: `--tw-glow-color`, }, { id: `tw-glow-weak`, comment: `SleepyFool original`, variables: `--tw-glow-color`, }, { id: `tw-glow-strong`, comment: `SleepyFool original`, variables: `--tw-glow-color`, }, { id: `tw-smear`, comment: `Harlowe import`, variables: `--tw-smear-color`, }, { id: `tw-blur`, comment: `Harlowe import`, variables: `--tw-blur`, }, { id: `tw-blurrier`, comment: `Harlowe import`, variables: `--tw-blur`, }, ]>> <<for _i, _class range _list>> <div class='example'> <div class='label'> <<print _class.id>> </div> <div class='css'> An <span @class="_class.id">example</span> usage </div> <div class='comment'> <<print _class.comment>> </div> <div class='variables'> <<if _class.variables>> <<print "<pre>"+_class.variables+"</pre>">> <</if>> </div> </div> <</for>> <div class='example title'> <div class='label'>Text shadows</div> <div class='css'> CSS effect </div> <div class='comment'> Origin </div> <div class='variables'>Accepted variables</div> </div> <div class='example'> <div class='label'>tw-outline</div> <div class='css'> An <span class="tw-outline">example</span> usage </div> <div class='comment'> Harlowe import </div> <div class='variables'> <pre>--tw-outline-width<br/>--tw-outline-color</pre> </div> </div> <<set _list to [ { id: `tw-shadow`, comment: `Harlowe import`, variables: `--tw-shadow-color`, }, { id: `tw-emboss`, comment: `Harlowe import`, variables: `--tw-emboss-color`, }, ]>> <<for _i, _class range _list>> <div class='example'> <div class='label'> <<print _class.id>> </div> <div class='css'> An <span @class="_class.id">example</span> usage </div> <div class='comment'> <<print _class.comment>> </div> <div class='variables'> <<if _class.variables>> <<print "<pre>"+_class.variables+"</pre>">> <</if>> </div> </div> <</for>> <div class='example title'> <div class='label'>Transforms</div> <div class='css'> CSS effect </div> <div class='comment'> Origin </div> <div class='variables'>Accepted variables</div> </div> <<set _list to [ { id: `tw-mirror`, comment: `Harlowe import`, }, { id: `tw-upside-down`, comment: `Harlowe import`, }, { id: `tw-tall`, comment: `Harlowe import`, }, { id: `tw-flat`, comment: `Harlowe import`, }, { id: `tw-180`, comment: `SleepyFool original`, }, ]>> <<for _i, _class range _list>> <div class='example'> <div class='label'> <<print _class.id>> </div> <div class='css'> An <span @class="_class.id">example</span> usage </div> <div class='comment'> <<print _class.comment>> </div> <div class='variables'> <<if _class.variables>> <<print "<pre>"+_class.variables+"</pre>">> <</if>> </div> </div> <</for>> <div class='example title'> <div class='label'>Animations</div> <div class='css'> CSS effect </div> <div class='comment'> Origin </div> <div class='variables'>Accepted variables</div> </div> <<set _list to [ { id: `tw-blink`, comment: `Harlowe import`, variables: `--tw-blink-time`, }, { id: `tw-fade-in-out`, comment: `Harlowe import`, variables: `--tw-fade-in-out-time`, }, { id: `tw-rumble`, comment: `Harlowe import`, variables: `--tw-rumble-time<br/>--tw-rumble-height`, }, { id: `tw-shudder`, comment: `Harlowe import`, variables: `--tw-shudder-time<br/>--tw-shudder-width`, }, { id: `tw-sway`, comment: `Harlowe import`, variables: `--tw-sway-time<br/>--tw-sway-width` }, { id: `tw-buoy`, comment: `Harlowe import`, variables: `--tw-buoy-time<br/>--tw-buoy-height`, }, { id: `tw-fidget`, comment: `Harlowe import`, variables: `--tw-fidget-time<br/>--tw-fidget-dist`, }, { id: `tw-spin`, comment: `SleepyFool original`, variables: `--tw-spin-time`, }, { id: `tw-spin-x`, comment: `SleepyFool original`, variables: `--tw-spin-time`, }, { id: `tw-spin-y`, comment: `SleepyFool original`, variables: `--tw-spin-time`, }, { id: `tw-swing`, comment: `SleepyFool original`, variables: `--tw-swing-time<br/>--tw-swing-angle`, }, { id: `tw-bounce`, comment: `SleepyFool original`, variables: `--tw-bounce-time<br/>--tw-bounce-height`, }, { id: `tw-wave`, comment: `SleepyFool original`, variables: `--tw-wave-time<br/>--tw-wave-angle`, }, ]>> <<for _i, _class range _list>> <div class='example'> <div class='label'> <<print _class.id>> </div> <div class='css'> An <span @class="_class.id">example</span> usage </div> <div class='comment'> <<print _class.comment>> </div> <div class='variables'> <<if _class.variables>> <<print "<pre>"+_class.variables+"</pre>">> <</if>> </div> </div> <</for>> <div class='example'> <div class='label'>tw-glitch</div> <div class='css'> An <span class="tw-glitch" data-tw-glitch="example">example</span> usage </div> <div class='comment'> SleepyFool original </div> <div class='variables'> <pre>--tw-glitch-L<br/>--tw-glitch-L-time<br/>--tw-glitch-L-color<br/>--tw-glitch-R<br/>--tw-glitch-R-time<br/>--tw-glitch-R-color<br/>--tw-glitch-delay</pre> </div> </div> <div class='example'> <div class='label'>tw-glitch-more</div> <div class='css'> An <span class="tw-glitch-more" data-tw-glitch="example">example</span> usage </div> <div class='comment'> SleepyFool original </div> <div class='variables'> <pre>--tw-glitch-L<br/>--tw-glitch-L-time<br/>--tw-glitch-L-time2<br/>--tw-glitch-L-color<br/>--tw-glitch-R<br/>--tw-glitch-R-time<br/>--tw-glitch-R-time2<br/>--tw-glitch-R-color<br/>--tw-glitch-delay</pre> </div> </div> <div class='example' id='slide-down'> <div class='label'>tw-slide-down-disappear</div> <div class='css'> An <span class='effect'>example</span> usage<br/><small>(hover to see)</small> </div> <div class='comment'> SleepyFool original </div> <div class='variables'><pre>--tw-slide-time</pre></div> </div> <div class='example' id='slide-right'> <div class='label'>tw-slide-right-disappear</div> <div class='css'> An <span class='effect'>example</span> usage<br/><small>(hover to see)</small> </div> <div class='comment'> SleepyFool original </div> <div class='variables'><pre>--tw-slide-time</pre></div> </div> <div class='example' id='slide-left'> <div class='label'>tw-slide-left-disappear</div> <div class='css'> An <span class='effect'>example</span> usage<br/><small>(hover to see)</small> </div> <div class='comment'> SleepyFool original </div> <div class='variables'><pre>--tw-slide-time</pre></div> </div> <div class='example' id='slide-up'> <div class='label'>tw-slide-up-disappear</div> <div class='css'> An <span class='effect'>example</span> usage<br/><small>(hover to see)</small> </div> <div class='comment'> SleepyFool original </div> <div class='variables'><pre>--tw-slide-time</pre></div> </div> </div> <<done>> <<run $('#slide-down').hover( () => $('#slide-down .effect').addClass('tw-slide-down-disappear'), () => $('#slide-down .effect').removeClass('tw-slide-down-disappear') ); $('#slide-right').hover( () => $('#slide-right .effect').addClass('tw-slide-right-disappear'), () => $('#slide-right .effect').removeClass('tw-slide-right-disappear') ); $('#slide-left').hover( () => $('#slide-left .effect').addClass('tw-slide-left-disappear'), () => $('#slide-left .effect').removeClass('tw-slide-left-disappear') ); $('#slide-up').hover( () => $('#slide-up .effect').addClass('tw-slide-up-disappear'), () => $('#slide-up .effect').removeClass('tw-slide-up-disappear') ); >> <</done>>