working on it ...

Filters

Explore Public Snippets

Sort by

Found 14k snippets

    public by samuelcrockford modified Mar 14, 2019  58  1  3  0

    Centre child inside its parent - Old School Way

    How to centre a div vertically and horizontally inside its parent
    /* Center a div - The old school way*/
    .parent { /* Center my child relative to me */
      position: relative;
    }
    .child { /* Center me inside my parent*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    public by ratlogic modified Aug 31, 2017  239  0  5  0

    img zoom

    img zoom
    img{
        transition: -webkit-transform 0.50s ease;
        transition: transform 0.50s ease;
    
    }
    
    img:active {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    
    }

    public by grovesdm modified Mar 19, 2017  683  7  3  0

    Tint an image

    css
    /* Working method */
    .tinted-image {
      background: 
        /* top, transparent red, faked with gradient */ 
        linear-gradient(
          rgba(255, 0, 0, 0.45), 
          rgba(255, 0, 0, 0.45)
        ),
        /* bottom, image */
        url(image.jpg);
    }

    public by GabrielaFavre modified Nov 19, 2016  1659  1  3  0

    Base reset

    CSS
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }
    
    

    public by JKCPR modified Oct 31, 2016  2186  2  5  1

    Matching Height - using CSS @element query

    A simple elegant solution to matching element heights using the @element query.
    //  Some html setup required
    /*
        <div id=thing1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, temporibus consequuntur velit dolor! Eos animi molestias  found here <a href="http://codepen.io/tomhodgins/pen/yadeXV"> thanks Tommy </a>aliquid eum error officiis vel et saepe a facilis, voluptate dignissimos nam assumenda, deleniti.</div>
        <div id=thing2>This one doesn't have as much text as id=thing1… so it's set to 100eh, or 100 element height units for #thing1, which makes it the same height.</div>
    */
    
    div {
      margin: 1em 0;
      width: 50%;
      float: left;
      color: black;
      background: lime;
    }
    #thing2 {
      background: red;
    }
    @element '#thing1' {
      #thing2 {
        height: 100eh;
      }
    }

    public by cytostatic modified Jun 24, 2016  3147  8  3  0

    horizontal text- scrolling

    Class and animation for horizontal text- scrolling in HTML.
    CSS
    .horizontalTextScrolling {
      /* Starting position */
      -moz-transform:translateX(100%);
      -webkit-transform:translateX(100%);
      transform:translateX(100%);
      /* Apply animation to this element */
      -moz-animation: horizontalTextScrolling 15s linear infinite;
      -webkit-animation: horizontalTextScrolling 15s linear infinite;
      animation: horizontalTextScrolling 15s linear infinite;
    }
    /* Move it (define the animation) */
    @-moz-keyframes horizontalTextScrolling {
      0%   { -moz-transform: translateX(100%); }
      100% { -moz-transform: translateX(-100%); }
    }
    @-webkit-keyframes horizontalTextScrolling {
      0%   { -webkit-transform: translateX(100%); }
      100% { -webkit-transform: translateX(-100%); }
    }
    @keyframes horizontalTextScrolling {
      0%   {
        -moz-transform: translateX(100%); /* Firefox bug fix */
        -webkit-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%);
      }
      100% {
        -moz-transform: translateX(-100%); /* Firefox bug fix */
        -webkit-transform: translateX(-100%); /* Firefox bug fix */
        transform: translateX(-100%);
      }
    }

    public by Yuriy modified Jun 9, 2016  1287  0  3  0

    Примусово перености рядки

    Примусово перености рядки: word-break.css
    word-break: break-all;
    
    

    public by fostus modified Jun 6, 2016  1320  0  4  0

    Список в дві колонки

    Список в дві колонки: ulli.css
    .wrap ol {
      list-style-position: inside;
      -moz-column-count: 2; /* Firefox */
      -webkit-column-count: 2; /* Safari and Chrome */
      column-count: 2;
      list-style-type: decimal;
      height: 200px;
    }
    
    

    public by JKCPR modified May 31, 2016  2920  1  5  1

    @each Sass Directive - processing icons

    A nice DRY approach to writing your huge icon collection into stylesheets
    // @each Sass Directive
    $icon-names: (twitter '\e004' ), (facebook '\e005' ), (gplus '\e006' );
    
    %ico-font-base {
        font-family: 'ico-fonts';
        speak: none;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
        
        //Better Font Rendering
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    
    @each $icon-name in $icon-names {
        .icon-#{nth($icon-name, 1)}:after {
            @extend %ico-font-base;
            content: nth($icon-name, 2);
        }
    }        

    public by afelicioni modified Feb 27, 2016  320553  2  4  0

    CSS blink class

    CSS blink class: file.css
    @keyframes blink {
        50% { opacity:0.0  }
    }
    @-webkit-keyframes blink {
        50% { opacity:0.0  }
    }
    @-moz-keyframes blink {
        50% { opacity:0.0  }
    }
    @-ms-keyframes blink {
        50% { opacity:0.0  }
    }
    @-o-keyframes blink {
        50% { opacity:0.0  }
    }
    .blink {
        -webkit-animation: blink 1s step-start 0s infinite;
        -moz-animation: blink 1s step-start 0s infinite;
        -ms-animation: blink 1s step-start 0s infinite;
        -o-animation: blink 1s step-start 0s infinite;
        animation: blink 1s step-start 0s infinite;
    }
    
    
    • Public Snippets
    • Channels Snippets