working on it ...

Filters

Explore Public Snippets

Sort by

Found 14k snippets

    public by ratlogic  254  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  666  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  1670  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  2195  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  3160  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  1307  0  3  0

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

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

    public by fostus  1339  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  2938  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  320556  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  4072  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