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](https://stackoverflow.com/questions/41658552/how-to-create-a-7-character-underline-input-text-field-in-html-and-cssscreensho/41661432#41661432). Try deleting and writing something else in the `input` field.

It uses [**the `ch` unit**](https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch) 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!

Source
Go to Source

Collective #280

Collective #280

Go to Source

Advertisement

C280_Skeleton

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

C280_Prettier

Prettier

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