CodeMyUI

<div>
    <div class="search">
        <div class="bar">
            <div class="icon">
                <i></i>
            </div>
        </div>
        <form>
            <input type="text">
        </form>

CodeMyUI

Form inputs with helper text

Playing around with a few methods of using helper/placeholder text in a text input element. For elements like email, phone, ssn, and other types of user data, there's often a need for clarification on which format to enter your information. These experiments keep the input labels in place, and shift the helper text out of the way so that the user still is able to receive that contextual information.

A Pen by Darin on CodePen.

License.

CodeMyUI

Flexbox Responsive Form

A Pen by Adam Argyle on CodePen.

License.

CodeMyUI

CSS3 To-Do List

A Pen by SaFou SaRah on CodePen.

License.

CodeMyUI

<main>
	<div>
		<h1>Smooth Scrolling Sticky ScrollSpy Navigation</h1>
		<section id="introduction">
			<h2>Introduction</h2>
			<p>…</p>
		</section>
		<section id="request-response">
			<h2>Request &amp; Response</h2>
			<p>…</p>

CodeMyUI

A CSS-only Carousel Slider

I've recently read about and discussed CSS Scroll Snapping so often that I felt like I should build a CSS-only carousel based on it.

Here are a few things to note:

Accessibility is in line with all other CSS-only experiments: it can only be considered mediocre in term of semantics and visual indicators. Don't do this in production.

The going forward and back is done via a combination of CSS Scroll Snap together with scroll-behavior: smooth and moving the focus through the slides via anchor links.

CodeMyUI

Checkbox Rocker Toggle Switch

An HTML checkbox form element styled as a rocker toggle switch.

A Pen by Marcus Connor on CodePen.

License.

CodeMyUI

Annoying CRT retro flicker

Uses a subtly animated double text-shadow (green on the left, red on the right) to mimic some retro-looking CRT flicker on white text. Works best with blocky retro pixel fonts. The same effect also work (in a more subdued way) without animation, as a subtle static retro text treatment.

A Pen by Saijo George on CodePen.

License.

CodeMyUI

Autogenerated Collapsible Directory Tree from a UL

Demo for a daily dabble: Autogenerated Collapsible Directory Tree From a Simple List

A Pen by Alex Raven on CodePen.

License.

CodeMyUI

<button class="back">
  <i class="mdi mdi-arrow-left"></i>
</button>


<div class="stage">
  
  <div class="folder-wrap level-current scrolling">
    
    <div class="tile folder">