` Web – AkselKreis

AkselKreis

Category: Web

  • CSS App Icons: The website

    When iOS7 was revealed in 2013, Apple showed off a new design language that was much simpler, and cleaner than the versions that preceded it. It occured to me that these could be easily replicated in CSS and thought it would be a fun experiment to try. I found that a few people had already tried their hand at it, but I thought it wouldn’t hurt to give it a shot.

    I started with the Weather and Clock icons, and that went pretty well, so since then I have been periodically creating more. It’s a fun little diversion that lets me explore new techniques for CSS/SASS.

    This past Spring I created a website to showcase the collection, you can view them here. It’s a work in progress and over time I hope to add many more icons to the site.

  • The CSS mix-blend-mode property

    Mix-blend-mode is an interesting addition to the CSS specification, it enables front-end developers to composite layers in CSS in a way previously available only to image editing programs. If you’re a designer, you know these effects as “Blend Modes” in Adobe Photoshop. The mix-blend-mode property belongs to the CSS Compositing and Blending Level 1 Spec.

    For those unfamiliar with Photoshop, the blend mode is a way of combining 2 or more elements laid on top of one another into something new. Each element retains it’s original data, but when a blend-mode is applied – it can losslessly modify an image’s visual attributes and allow it to combine with other elements it overlaps.

    What’s good?

    * Gives front end developers & designers more parity with photoshop.
    * Lets developers do in code what could only have been done using images previously.

    • Enables a developer focus on keeping visual concerns part of css, instead of wrapping it up in an image.
    • Syntax is easy to understand.

    What’s not so good?

    • (link: http://caniuse.com/#search=mix-blend-mode text: Browser Support:) mix-blend-mode is fully supported in Firefox, Chrome and Opera. It’s partially supported in Safari on Mac & iOS. It’s not at all supported in any version of IE/Edge, Opera Mini or Android Browser.
    • Unexpected Behavior – I had to try some odd combinations to get mix-blend-mode: multiply; to work in Firefox with non-nested divs layered with nested divs. See example here.
    • Doesn’t seem to work with 3D Transforms.

    After some experimenting with mix-blend-mode, I can say that it’s very promising so far, you can view some examples below:

  • jQuery mediaWrapper.js

    Simple, Responsive iframes.

    jQuery mediaWrapper is a plugin for wrapping and making iframes and embedded videos behave more like images when developing a responsive website. Currently iframes will default to an arbitrary width set by the embed code, just like images. Unlike images, the max-width: 100%; height: auto; technique doesn’t work. mediaWrapper.js helps solve this problem by providing a wrapper that enable iframes to work responsively.

    Check out the plugin over at GitHub.