djsubstance

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 substance on CodePen.

License.

djsubstance

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 substance on CodePen.

License.

djsubstance

<nav>Global navigation</nav>
<header>
  <h1>Fun with background gradients</h1>
  <p>Just a bit of fun while wondering about using simple and subtle CSS gradients for backgrounds...</p>
</header>
<main>
  <ul class="cards">
    <li class="card -red">
      <div class="card--image">✤</div><h2>Red</h2>
        <p>Red is the color at the long wavelength end of the visible spectrum of light, next to orange and opposite violet.</p>

djsubstance

3D Carousel

This is a simple carousel react component, that utilizes CSS transformations to create this 3D effect.

The cards are rotated, translated and blurred based on their distance in the list from the active card. Additionally, the color of the card is changing to be darker while maintaining the same hue using hsl().

A Pen by substance on CodePen.

License.

djsubstance

day 30 today we going to design a button with an awesome hover effect.

A Pen by Ajay on CodePen.

License.

djsubstance

<!-- Explanation in JS tab -->

<!-- The two texts -->
<div id="container">
	<span id="text1"></span>
	<span id="text2"></span>
</div>

<!-- The SVG filter used to create the merging effect -->
<svg id="filters">

djsubstance

Circular Corner Borders 3D Hover Image (CSS Only)

Hover image effect with corner borders. CSS only

A Pen by substance on CodePen.

License.

djsubstance

Circular Corner Borders 3D Hover Image (CSS Only)

Hover image effect with corner borders. CSS only

A Pen by substance on CodePen.

License.

djsubstance

3D Room - Pure CSS

A Pen by substance on CodePen.

License.

djsubstance

<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>