Constructs

I believe many people understood the annoying experience dealing with multi-level dropdown menus when your mouse have to go through narrow “passages” trying to get the correct submenu to open, and of course, once in a while you’d miss. This is not a new concern in web UX. If we Google about this issue, we can find workarounds such as adding delay to the submenus or calculation of mouse movements to gauge the intention of opening a submenu. In this blog post, Chris Coyier from CSS-Tricks revisited this topic to add one more interesting way you can address this issue using CSS only. His clever workaround uses pseudo elements to “widen the passages” the mouse can travel that would not accidentally close an active submenu. Hit the button below to learn more.

View More

Throughout the years we have seen a couple of articles about creating textured text background such as on Scotch.io and Codrops. In this article, Codepen contributor Yoksel takes it up a notch by showing us how to create animated text fills using animated shadows or gradients and even videos. The author demonstrated how this can be accomplished using five different ways namely:

• background-clip:text
• SVG text
• SVG mask and SVG clippath
• mix blend mode
• SVG mask and HTML

Since this is a highly experimental technique, it is understandable that browser support are limited but still cool stuff nonetheless. Hit the button below to learn more and view the demos.

View More   View Demo

Icon fonts are truly one of the best advancements in web technology of the modern days. Back in the days, front-end developers have to endure the tedious process of creating and cropping images to put simple icons on websites. With the advent icon fonts, not just countless hours of trivial work can be saved but using them gave a bunch of other advantages as well such as:

• they are infinitely scalable
• they can be styled with CSS (change size, color, add stroke, borders, shadows, hover effects, etc)
• no HTTP request for an icon image

In this round-up blog post at Scotch.io, Chris Sevilleja has shared 11 popular icon font tools you can find out there today. If I may add one more to the list, you should also check out Fontello because it allows front-end developers to customize your icon bundle by choosing icons as needed instead of downloading the whole font pack. The result is a lighter file that can help reduce website loading time. In addition, you can also create custom icon fonts by uploading your own SVG icons or SVG font into the website, which is super useful. Click the button to learn more.

View More

Tuts+ contributor Cory Simmons has written a cool tutorial on how to create responsive scrollable panels with flexible box or Flexbox. Flexbox is a CSS box model that allows children of a flex container to be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Here are the general idea of the whole markup:

HTML

Make sure to wrap your entire page in a container.

<div class="wrap">
 
  <main>
 
    <aside>
      <h1>Sidebar</h1>
      <p>
        lipsum...
      </p>
    </aside>
 
    <article>
      <h1>Content</h1>
      <p>
        lipsum...
      </p>
    </article>
 
  </main>
 
</div>

CSS

html and body are given height:100%. The .wrap is also set with display:flex to give the child elements access to flex property.

html, body {
  height: 100%;
}
 
.wrap {
  height: 100vh;
  display: flex;
}

Make it Flexible

Set flex property and value to main, aside and article. To make aside and article scrollable, set overflow-y: scroll. Otherwise, the whole page will be scrollable just as a usual website.

main {
  flex: 1;
  display: flex;
}
 
aside, article {
  overflow-y: scroll;
  padding: 2em;
}
 
aside {
  flex: 1;
}
 
article {
  flex: 2;
}

Hit the button below to read the full tutorial.

View More   View Demo