working on it ...

Filters

Explore Public Snippets

Sort by

Found 14k snippets

    public by ratlogic modified Aug 31, 2017  233  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  651  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  1649  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  2167  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  3139  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  1277  0  3  0

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

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

    public by fostus modified Jun 6, 2016  1310  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  2911  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  320533  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 by DrCustUmz modified Feb 25, 2016  4043  5  6  1

    CSS - Mobile First Base

    /* Smartphones start somewhere around here */
    @media (min-width: 300px) {
    }
    
    /* You might do landscape phones here if your content seems to need it */
    @media (min-width: 450px) {
    }
    
    /* Starting into tablets somewhere in here */
    @media (min-width: 600px) {
    }
    
    /* Perhaps bigger tablets */
    @media (min-width: 750px) {
    }
    
    /* Desktop screen or landscape tablet */
    @media (min-width: 900px) {
    }
    
    /* A bit bigger if you need some adjustments around here */
    @media (min-width: 1100px) {
    }
    
    /* Widescreens */
    @media (min-width: 1500px) {
    }
    • Public Snippets
    • Channels Snippets