Delivering our world from long shadows

    The article describes a practical example of removing long shadows from icons using user styles or user scripts. There are links to working on sites (,, styles and scripts. UPD 05/31/2014: Added styles on and Download here - find among files, select Raw, direct link.

    Aliens (long shadows) appeared on the outskirts of our city. If you imagine their height in the rays of the setting sun, consciousness refuses to build this picture.
    Aliens must be removed, otherwise our world will forever be different, unnaturally embossed. (“Toaster” is not our territory anymore, so there’s no need to worry much about it. There are long shadows, maybe there will be questions and answers of arbitrary quality.) Now, 2 mutants require rehabilitation - the Habrastorage logo and cloud drawing.

    Why are long shadows dangerous?

    Looking at unlimited long shadows, the reader does not have a tangible idea of ​​the height of the light source above the horizon and the height of the patterned objects. As a rule, long-shadow mutants are adjacent to flat interface elements, which leads to the idea of ​​2 kinds of objects - flat (drawn) and volume mutants.


    There is no need to sanitize the design of a flat interface, since these are examples of the life of those pages that we are honored to get to - it's the same as remaking the world (or site). But we must correct the mutation of high shadows - for the sake of the 3-dimensionality of Euclidean geometry and the preservation of the non-surrealism of the world. If flat in a 3-dimensional world is found, then objects with infinite height casting such long shadows do not.

    There is another source of extraterrestrial atmosphere that you have to touch - this is the authentication page. There are the same mutated letters "T" and "M" on the logos and some mutated icons there. But since the domain of the authorization page is different, it is desirable to isolate such an action in a separate user script or browser extension.

    Strictly speaking, user-style resources are sufficient to sanitize icons. Therefore, we will build a group of user scripts and user styles that will perform these tasks, and the one selected for use by the installed add-ons will be selected for use.

    How will they work?

    The principle is very simple: instead of a picture from the site, a picture (in base64 format) from user script or user style is substituted. There are several such pictures (now - 5 pcs. On 3 domains).

    Total, there are 3 ways to implement, rid the world of long shadows. The results of all methods are the same; in place of mutated images, such corrected ones will be observed:

    If Stylish in Firefox or for Chrome is installed in your browser, use:

    *) ufoCorrect : user-style for correcting shadows in the authorization page and on Habrastorage.

    The use of only style provides a quick installation of the layout of the page, without jerking the display during loading. In addition, styles do not create security issues - the user does not need to take the risk of trusting the contents of the script, because there are no scripts.

    As a bonus, there is a correction for QA (or whatever it is in a new way). However, some users may not be interested in this resource.

    If Stylish is not installed (and there is no desire to install), you can do with scripts, use:

    *) ufoCorrect-script(for installation, select “Raw” from the list by name; direct link to install): user script that does the only thing: sets styles (as seen by its code). No pre-installation of Stylish. Scripts can be installed by simple manipulation - by clicking a button in Firefox or dragging a file into the list of Chrome scripts (or the new Opera), or through NinjaKit in Safari.

    *) component of the HabrAjax script . Does not have access to the authorization domain so that the user does not have questions about what he will do there. Therefore, it does not delete the shadow on the “TM” on the authorization page and will not delete it. But nothing prevents using 2 scripts or styles at the same time - ufoCorrect and HabrAjax.

    We add that HabrAjax uses access to the domain for another important purpose - to automate the casting of images directly through Habr, so its function is not limited to helping with image resolution.

    UPD (2014-05-31): added :

    And the shadow on the new Habr was removed, with compatibility with ZenComment 4 and HabrAjax .

    At the same time, the script now needs to be taken on , since the previous hosting ( ) has become unavailable for recording new scripts since May 17.

    UPD2 (2014-06-01): ufoCorrect user styles were updated - expanded to the same Habr and Freelansim.

    Only registered users can participate in the survey. Please come in.

    How do you feel about the presence of UFO long shadows on the resource pages?

    • 56.8% neutral; 365 not cause concern
    • 27.1% felt unconscious concern about the foreignness of design elements 174
    • 15.7% have long been looking for a way to get rid of the influence of aliens on my brain 101
    • 20.2% yes everything is fine, I'm one of them 130

    Also popular now: