Steven TrueSlu

How do I get a custom colored underline that will span multiple lines?

First in series of pens where I just want to make a library of useful tricks I have used for websites. In this one the key trick is multiline underline with any color I want. This is show using a random gradient so I could practice some more javascript.

A Pen by Will King on CodePen.

License.

Gradient Buttons with Background-Color Change (CSS-only)

Everyone likes Gradients. A selection of Gradient Buttons that change the Background Color when Hovering. The direction can be set in the CSS (see comment or check the JS-Panel for Instruction)

A Pen by MrPirrera on CodePen.

License.

CSS Particle Effects

Using JavaScript to generate the particles but leaving the motions to CSS.

Open to suggestions.

A Pen by Zed Dash on CodePen.

License.

404 Page

A Pen by Conner on CodePen.

License.

Fancy Search Box // SVG + CSS + jQuery

Simple animations using CSS and stroke-dashoffset! Enjoy

A Pen by TrueSlu on CodePen.

License.

CSS-only Sliding Panels using transforms

Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance.

Responsively switches to a stacked layout on smaller screens, or by using the .panels--stacked class

A Pen by Shaw on CodePen.

License.

	<p id="offscreen-text" class="offscreen-text"></p>
	<p id="text" class="text"></p>

	<svg id="svg">
	</svg>

	<input type="text" class="input", id="input" />

	<!-- Page preloader -->
	<div id="hola">
	<div id="preloader">
	<span></span>
	<span></span>
	</div>
	</div>

	<!-- Start content -->
	<div class="page-wrap">

	<head>
	<title>Media panel</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
	</head>

	<body>
	<div class="social">
	<h2>Social Media</h2>
	<button class="icon-btn twitter">

	<main>
	<input type="text" class="search" />
	<div class="line-1"></div>
	<div class="line-2"></div>
	</main>