TrueSlu

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container center">
  <a href="#login" class="btn btn-large teal modal-trigger">Login</a>
</div>

<div id="login" class="modal ">
  <h5 class="modal-close">&#10005;</h5>
  <div class="modal-content center">
    <h4>Login Form</h4>

TrueSlu

<div class="page">
  <div class="container">
    <div class="left">
      <div class="login">Login</div>
      <div class="eula">By logging in you agree to the ridiculously long terms that you didn't bother to read</div>
    </div>
    <div class="right">
      <svg viewBox="0 0 320 300">
        <defs>
          <linearGradient

TrueSlu

header color change scroll

A Pen by Jyoti Pathania on CodePen.

License.

TrueSlu

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <header id="#top">
    <div class="row">
      <div class="large-4 column lpad">
        <div class="logo">
          <span>Some</span>
          <span>Forum</span>
        </div>
      </div>
      <div class="large-8 column ar lpad">

TrueSlu

<div id="progress"></div>

<div class="center">
  <div id="register">

    <i id="progressButton" class="ion-android-arrow-forward next"></i>

    <div id="inputContainer">
      <input id="inputField" required autofocus />
      <label id="inputLabel"></label>

TrueSlu

Button hover effects with box-shadow

Making some basic animations with box-shadows. No extra elements or even pseudo elements required.

Check out my button collection for more.

A Pen by Giana on CodePen.

License.

TrueSlu

Facebook Emoji Reactions | Pure CSS

Inspiration Source : http://iconstore-1.ambercreativelab.netdna-cdn.com/wp-content/uploads/2015/12/fb-emoji-featured.png

A Pen by Ashish Bardhan on CodePen.

License.

TrueSlu

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.

TrueSlu

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.

TrueSlu

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