Steven TrueSlu

404 Page

A Pen by Conner 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.

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.

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.

Animated CSS Gradient Border

Inspired by the github universe alert: https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png

A Pen by Mike Schultz on CodePen.

License.

CSS only order process steps

It's been a while. Just a nice process bar here where you can click on the different steps and be presented with information. The box at the top will also animate depending on the steps.

A Pen by Jamie Coulter on CodePen.

License.

	<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">

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

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

	<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" />

	<div id=container>
	Make
	<div id=flip>
	<div><div>wOrK</div></div>
	<div><div>lifeStyle</div></div>
	<div><div>Everything</div></div>
	</div>
	AweSoMe!
	</div>