Constructs

Recently, Wired has updated their website with a new link styling and hover effect. Inspired by this styling, I’ve created something similar but with a little bit additional styles like using different color combinations for the text and background.

HTML

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ante aliquet, porta elit quis, accumsan ipsum. Ut bibendum rhoncus tellus, vel commodo dui fermentum et. Nunc dapibus dui id euismod pharetra. Maecenas <a href="#" class="highlight red">commodo</a> mi quis nibh pretium, eget blandit erat laoreet. Nam ac viverra enim, eu aliquet diam. Proin bibendum pulvinar <a href="#" class="highlight blue">tincidunt</a>. Nunc mollis quam et <a href="#" class="highlight green">euismod</a> augue congue euismod. Integer hendrerit vitae metus eget tincidunt. Duis ex turpis, sodales nec vulputate a, gravida eget tellus.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ante aliquet, porta elit quis, accumsan ipsum. Ut bibendum rhoncus tellus, vel commodo dui fermentum et. Nunc dapibus dui id euismod pharetra. Maecenas <a href="#" class="highlight yellow">commodo</a> mi quis nibh pretium, eget blandit erat laoreet. Nam ac viverra enim, eu aliquet diam. Proin bibendum pulvinar <a href="#" class="highlight pink">tincidunt</a>. Nunc mollis quam et <a href="#" class="highlight orange">euismod</a> augue congue euismod. Integer hendrerit vitae metus eget tincidunt. Duis ex turpis, sodales nec vulputate a, gravida eget tellus.</p>

As you can see here, every links have two different classes which are highlight and a “color” name class. The highlight class is for base styling effects like font color, text-decoration, border and transition. The other class is simply for assigning different color values.

CSS

.highlight {
	text-decoration:none;
	border-bottom:2px solid transparent;
	color:#000;
    -webkit-transition: background .15s cubic-bezier(.33,.66,.66,1);
	transition: background .15s cubic-bezier(.33,.66,.66,1);
}
.red {
	border-color:#ff0000;
	box-shadow:inset 0 -3px 0 #ff0000;
}
.red:hover {
	background-color:#ff0000;
	color:#fff;
}
.blue {
	border-color:#0000ff;
	box-shadow:inset 0 -3px 0 #0000ff;
}
.blue:hover {
	background-color:#0000ff;
	color:#fff;
}
.yellow {
	border-color:#ffff00;
	box-shadow:inset 0 -3px 0 #ffff00;
}
.yellow:hover {
	background-color:#ffff00;
}
.green {
	border-color:#008000;
	box-shadow:inset 0 -3px 0 #008000;
}
.green:hover {
	background-color:#008000;
	color:#fff;
}
.pink {
	border-color:#ffc0cb;
	box-shadow:inset 0 -3px 0 #ffc0cb;
}
.pink:hover {
	background-color:#ffc0cb;
}
.orange {
	border-color:#ffa500;
	box-shadow:inset 0 -3px 0 #ffa500;
}
.orange:hover {
	background-color:#ffa500;
}

Every different “color” classes have its own color code, border-color values to overwrite the transparent color from .highlight and box-shadow values with inset to make the shadow goes inwards. Finally, for hover effect, background-color is applied accordingly to the appropriate classes. Hit the button below to view the demo of highlighter-style link on hover effect.

View Demo

Here is a good reading material for beginners to learn about CSS background property. CSS background have eight properties which are:

• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin
• background-clip
• background-color

The property background itself is a shorthand notation which will allow you to write combination from the other CSS background properties into one declaration only. For example:

	.example {
		background: url(beach.jpg) no-repeat blue;
	}

This example combines three different background properties into one declaration for setting the image url, making the image not repeated and setting blue as the fallback color. Hit the button below to learn more about CSS background properties by Chris Coyier and don’t forget to check out the Codepen demo by Timothy Miller.

View More   View Demo

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

CSS masking can be used to apply unique texture on your website elements like headings and buttons for identity or branding purposes, as demonstrated by Jeremy Frank in his blog post about his recent work for a PBS new series based on nature. Altogether, the effect is pretty simple to achieve with just two lines of code and the PNG-24 texture image. Here’s the code:

.grit {
 -webkit-mask-image: url("grit.png");
 mask-image: url("grit.png");
}

That’s it! However CSS mask is only supported in modern browsers. To learn more and see the demo, hit the buttons below.

View More   View Demo