melanyss

<header>
  <h1>Pure <strong>CSS</strong> Tree</h1>
  <p>...a folders tree view, without JS :P</p>
</header>
<ul id="compositions-list" class="pure-tree main-tree">
  <li>
    <input type="checkbox" id="trigger-views" checked="checked">
    <label for="trigger-views">views</label>
    <ul class="pure-tree">
      <li class="pure-tree_link"><a href="" title="index.jade" target="_blank">index.html</a></li>

melanyss

Dynamic Image Colorizing with

Removes chrome from color input swatch and overlays over an image, using blend modes to colorize. Voila! Color changing without JS.

Chrome and Firefox only right now.

A Pen by Noah Blon on CodePen.

License.

melanyss

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <title>SVG Download</title>
  <defs>
    <clipPath id="mainCircleMask">
<circle fill="none" stroke="#000000" stroke-width="14.9511" stroke-miterlimit="10" cx="400" cy="319.7" r="121"/>    
    </clipPath>
  </defs>
<path id="outlineBg" stroke="#CFD8DC" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" fill="none" stroke-miterlimit="10" stroke-width="15"/>
  <line id="baseStart" x1="338" y1="431.5" x2="461" y2="431.5" fill="none" stroke="#607D8B" stroke-miterlimit="10" stroke-width="15"/>
   <path id="outline" stroke="#607D8B" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" fill="none" stroke-miterlimit="10" stroke-width="15"/>

melanyss

BLACK FRIDAY SALE NOW ON - 50% OFF EVERYTHING!

Visit my store and get cool shit for half price!

A Pen by Chris Gannon on CodePen.

License.

melanyss

File Tree CSS

Saw a file tree structure online and had to create a SASS version for BootAdmin.org.

A Pen by Sazzad on CodePen.

License.

melanyss

Animated CSS3 Buttons

Experimental css buttons by Designify.me

A Pen by Sazzad on CodePen.

License.

melanyss

<header>
        <nav>
            <h1>Lorem</h1>
            <div><i class="fa fa-newspaper-o"></i></div>
            <div><i class="fa fa-soccer-ball-o"></i></div>
            <div><i class="fa fa-lightbulb-o"></i></div>
            <div><i class="fa fa-plane"></i></div>
            <div><i class="fa fa-briefcase"></i></div>
            <a href=""><i class="fa fa-facebook"></i></a>
            <a href=""><i class="fa fa-twitter"></i></a>

melanyss

<nav class="nav">
  <div class="burger">
    <div class="burger__patty"></div>
  </div>

  <ul class="nav__list">
    <li class="nav__item">
      <a href="#1" class="nav__link c-blue"><i class="fa fa-camera-retro"></i></a>
    </li>
    <li class="nav__item">

melanyss

animation submit button

Inspired by the shot of Colin Garven : https://dribbble.com/shots/1426764-Submit-Button

A Pen by Valentin Galmand on CodePen.

License.

melanyss

<main class="wrapper">
	<h1>SVG Icon Buttons</h1>
	<p class="max-w">Simple buttons with vertically aligned SVG icons in a variety of styles. <a href="https://google.github.io/material-design-icons/" target="_blank"><strong>Icons found here.</strong></a> *These buttons use Flexbox, if you need to support IE9, you're out of luck :(</p>
	
	<!-- basic -->
	<p>
		<a href="" class="btn red">Basic<svg class="btn-icon" viewBox="0 0 24 24"><path d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>
		
		<a href="" class="btn pink">Basic<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4 8h4v-4h-4v4zm6 12h4v-4h-4v4zm-6 0h4v-4h-4v4zm0-6h4v-4h-4v4zm6 0h4v-4h-4v4zm6-10v4h4v-4h-4zm-6 4h4v-4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/><path d="M0 0h24v24h-24z" fill="none"/></svg></a>