Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created September 15, 2016 08:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CodeMyUI/c7d3c561972550924035f6bd2c8e5fb9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CodeMyUI/c7d3c561972550924035f6bd2c8e5fb9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CodeMyUI created this gist Sep 15, 2016.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <h1>Pure CSS - file icons</h1>
    <h2>with nice hover animation</h2>
    <div class="icons">
    <div class="icon icon--doc"><i title="doc"></i></div>
    <div class="icon icon--pdf"><i title="pdf"></i></div>
    <div class="icon icon--sheets"><i title="xlsx"></i></div>
    <div class="icon icon--slides"><i title="ppt"></i></div>
    <div class="icon icon--code"><i title="xml"></i></div>
    </div>
    7 changes: 7 additions & 0 deletions pure-css-file-icons-with-nice-hover-animation.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Pure CSS - File icons with nice hover animation
    -----------------------------------------------
    File icons combined with pure CSS and some unicode symbols which appear on hover with simple transform and opacity transitions.

    A [Pen](http://codepen.io/mauriceconchis/pen/vKdBrm) by [Aleksandar Čugurović](http://codepen.io/mauriceconchis) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/mauriceconchis/pen/vKdBrm/license).
    186 changes: 186 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,186 @@
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600);

    // Variables
    $white: #fff;
    $sheets: #0f9d58;
    $pdf: #db4437;
    $doc: #4285f4;
    $slides: #f5b707;
    $code: #00a78e;

    // Mixins
    @mixin center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    body {
    background-color: $white;
    font-smoothing: antialiased;
    height: 100vh;
    font-family: 'Open Sans', sans-serif;
    }

    h1 {
    font-size: 50px;
    text-align: center;
    font-weight: 300;
    color: #777;
    margin-bottom: 0;
    }

    h2 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 16px;
    color: #bbb;
    }

    .icons {
    font-size: 0;
    @include center;
    }

    .icon {
    display: inline-block;
    width: 40px;
    height: 50px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    margin: 0 5px;

    &::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-radius: 0 2px;
    transition: all 0.2s linear;
    backface-visibility: hidden;
    }

    &--doc {
    background-color: $doc;

    &::after {
    background: linear-gradient(45deg, lighten($doc, 15%) 50%, $white 50%);
    }

    i {
    &::before {
    content: '☰';
    }
    }
    }

    &--pdf {
    background-color: $pdf;

    &::after {
    background: linear-gradient(45deg, lighten($pdf, 15%) 50%, $white 50%);
    }

    i {
    &::before {
    content: '☵';
    }
    }
    }

    &--sheets {
    background-color: $sheets;

    &::after {
    background: linear-gradient(45deg, lighten($sheets, 15%) 50%, $white 50%);
    }

    i {
    &::before {
    content: '⊟';
    }
    }
    }

    &--slides {
    background-color: $slides;

    &::after {
    background: linear-gradient(45deg, lighten($slides, 15%) 50%, $white 50%);
    }

    i {
    &::before {
    content: '⧉';
    }
    }
    }

    &--code {
    background-color: $code;

    &::after {
    background: linear-gradient(45deg, lighten($code, 15%) 50%, $white 50%);
    }

    i {
    &::before {
    content: '< >';
    }
    }
    }

    i {
    @include center;
    display: block;
    font-size: 10px;
    color: $white;
    font-weight: 500;

    &::before,
    &::after {
    display: block;
    transition: all 0.2s linear;
    }

    &::before {
    text-align: center;
    font-size: 12px;
    opacity: 0;
    transform: translateY(5px);
    }

    &::after {
    content: attr(title);
    transform: translateY(-5px);

    }
    }

    &:hover {
    border-radius: 2px 4px 2px 2px;

    &::after {
    width: 12px;
    height: 12px;
    }

    i {
    &::before {
    transform: translateY(0);
    opacity: 1;
    }

    &::after {
    transform: translateY(0);
    }
    }
    }
    }