Steven TrueSlu

Floating Head

Attribution mark for inclusion on other pens

Full-Width Panel Expansion, CSS only

A CSS only expanding panel gallery with keyboard support and CSS Vars to progressively enhance with animation.

The keyboard support is probably not truly accessible. I'll leave it as an exercise to the reader to add real accessibility aria-roles and JavaScript.

Thanks to @davidkpiano for help with setup and the Animation At Work community for helpful feedback.

Like sliding panels? Try these transform-based sliding panels

Codepen Challenge - Checkboxes

A Pen by Pinnacle Web Development on CodePen.

License.

Icon in search input

A simple search input with an icon at the right

A Pen by Ismail Ghallou (Smakosh) on CodePen.

License.

Daily UI | #003 - Landing Page

View it at dribbble or Behance

A Pen by Marco Biedermann on CodePen.

License.

	<div class="panels">
	<a href="#" class="panel">
	<div class="panel__content" style="background-image: url(https://unsplash.it/1100/1100/?image=760);">
	<h3 class="panel__title">A</h3>
	</div>
	</a>
	<a href="#" class="panel">
	<div class="panel__content" style="background-image: url(https://unsplash.it/1100/1100/?image=786)">
	<h3 class="panel__title">B</h3>
	</div>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link href='https://fonts.googleapis.com/css?family=Lato:300,400\|Montserrat:700' rel='stylesheet' type='text/css'>
	<style>
	@import url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css);
	@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link href='https://fonts.googleapis.com/css?family=Lato:300,400\|Montserrat:700' rel='stylesheet' type='text/css'>
	<style>
	@import url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css);
	@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

	<body class="align">

	<div class="grid">

	<form action="https://httpbin.org/post" method="POST" class="form login">

	<div class="form__field">
	<label for="login__username"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use></svg><span class="hidden">Username</span></label>
	<input id="login__username" type="text" name="username" class="form__input" placeholder="Username" required>
	</div>

	.brand
	%a{:href => 'https://www.jamiecoulter.co.uk',:target => '_blank'}
	%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logo.png'}
	.login
	.login_title
	%span Login to your account
	.login_fields
	.login_fields__user
	.icon
	%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png'}