input field with underline under each character

input field with underline under each character

Go to Source

See the Code
See it Full Page
See Details

Created [to answer a SO question]( Try deleting and writing something else in the `input` field.

It uses [**the `ch` unit**]( whose width is the width of the `0` character. It also assumes the font in the `input` field is a monospace one so that all characters have the same width.

So the width for every character is always `1ch`. The gap between the characters is taken to be `.5ch`. This is the value we set for `letter-spacing`. The `width` of the `input` is the number of characters times the sum between the letter width (`1ch`) and the gap width (`.5ch`). So that's `7*(1ch + .5ch) = 7*1.5ch = 10.5ch`.

We remove the actual `border` of the `input` and we set a fake one using a `repeating-linear-gradient`. The dash (`dimgrey`) goes from `0` to `1ch` and the gap (`transparent`) starts immediately after the dash and goes to `1.5ch`.

It's attached to the left and the bottom of the input – this is the `background-position` component (`0%` horizontally and `100%` vertically).

It spreads across the entire input horizontally (`100%`) and is `2px` tall – this is the `background-size` component of the `background`.

This Pen uses: HTML, SCSS, Babel, and Babel

Popular design news of the week: January 9, 2017 – January 15, 2017

Popular design news of the week: January 9, 2017 – January 15, 2017

Go to Source

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

5 Modern Website Background Ideas for 2017


10 Web Predictions for 2017


Ladies and Gentlemen: The Biggest Design Fail of 2017


Why are We all Moving Away from Apple?


Tiny Trends #1: Non-Rectangular Headers


24 Examples of Texture Usage in Web Design


Norway’s New Passport – Already a Design Classic?


Hello, Unsplash, Inc.


UX Design Trends to Follow in 2017


8 Free Apps for Picking a Colour Scheme


Microsoft’s Windows 10 Design Refresh Revealed in Leaked Screenshots


How Micro-Interactions Drive User Engagement


Graphic Designer Creates Epic Social Network for Superheroes and Villains


Hello it’s Charlie


How to Create Perfectly Centered Text with Flexbox


20 Sketch Tutorials for Beginner Designers


Mobile Website Speed Testing Tool – Google


Say Hello to Opera Neon


Showcase of Beautiful Websites with Glitch Effects


How to Create Spotify Colorizer Effects with CSS Blend Modes


Designing for Brand Interaction


Building a CSS Framework with Sass


Design Thinking, Where it Came from and the Types of People Who Made it All happen


The Evolution of UI/UX Designers into Product Designers


My Blend 2.0 – Visual Email & Unsubscribe


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: 30 Sparkling Glitter Brushes from The Artifex Forge – only $7.50!

Go to Source

Collective #280

Collective #280

Go to Source



Skeletal Animation System

A standalone, stateless, dual quaternion based skeletal animation system that aims to give the user a flexible module for managing skeletal animations across different 3D models and bone groups. Made by Chinedu Francis Nwafili.

Check it out



Prettier is an opinionated JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. By James Long. Read the article here.

Check it out

Collective #280 was written by Pedro Botelho and published on Codrops.

Go to Source