CSS Snippets

Scheibe Apr 6, 2017

  1. Scheibe

    Scheibe wolfeschlegelsteinhausenbergerdorff Super Moderator

    Messages:
    182
    Likes Received:
    19
    Use rem for Global Sizing; Use em for Local Sizing.
    After setting the base font size at the root (html { font-size: 100%; }), set the font size for textual elements to em:
    Code:
    h2 {
      font-size: 2em;
    }
    
    p {
      font-size: 1em;
    }
    
    Then set the font-size for modules to rem:
    Code:
    article {
      font-size: 1.25rem;
    }
    
    aside .module {
      font-size: .9rem;
    }
    
    Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.

    ...use the :not() pseudo-class to only apply to the elements you want:
    Code:
    .nav li:not(:last-child) {
      border-right: 1px solid #666;
    }
    
    Sure, you can use .nav li + li or even .nav li:first-child ~ li, but with :not() the intent is very clear and the CSS selector defines the border the way a human would describe it.

    You don't need to add line-height to each <p>, <h*>, et al. separately. Instead, add it to body:
    Code:
    body {
      line-height: 1.5;
    }
    
    This way textual elements can inherit from body easily.

    No, it's not black magic, you really can center elements vertically:
    Code:
    html, body {
      height: 100%;
      margin: 0;
    }
    
    body {
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      display: -webkit-flex;
      display: flex;
    }
    
    Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has a nice write-up on doing all of that.

    Implement CSS-only sliders using max-height with overflow hidden:
    Code:
    .slider {
      max-height: 200px;
      overflow-y: hidden;
      width: 300px;
    }
    
    .slider:hover {
      max-height: 600px;
      overflow-y: scroll;
    }
    
    The element expands to the max-height value on hover and the slider displays as a result of the overflow.

    Display links when the <a> element has no text value but the href attribute has a link:
    Code:
    a[href]:empty:before {
      content: attr(href);
    }
    
    Add a style for "default" links:
    Code:
    a[href]:not([class]) {
      color: #008000;
      text-decoration: underline;
    }
    
    Code:
    img:after {
      content: "(url: " attr(src) ")";
      display: block;
      font-size: 12px;
    }
    
     
    TopSilver likes this.
  2. TopSilver

    TopSilver web designer Administrator

    Messages:
    202
    Likes Received:
    23
    Looking at this, I first wondered how the modules elements REM wouldn't override the text elements EM but then I took a close look and realized because their using REM and are set to be partial of the base html size and the text elements are using EM then it would work perfect because the text elements would scale to the module elements all while they were in themselves scaling to the base font size. Just to clear that up for anyone who was wondering. Since EM scales down from the higher tags hierarchy that are marked with a font-size. Interesting.
     
  3. Scheibe

    Scheibe wolfeschlegelsteinhausenbergerdorff Super Moderator

    Messages:
    182
    Likes Received:
    19
    Last edited: Oct 13, 2017
  4. Scheibe

    Scheibe wolfeschlegelsteinhausenbergerdorff Super Moderator

    Messages:
    182
    Likes Received:
    19
    LESS mixins:
    Code:
    .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {   
        text-shadow: @string;
    }
    
    .box-shadow (@string) {    
       -webkit-box-shadow: @string;    
       -moz-box-shadow: @string;    
       box-shadow: @string;
    }
    
    .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {     
       -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
       -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);   
      box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    }
    
     .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {     -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);     -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);     box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha); } .box-sizing (@type: border-box) {     -webkit-box-sizing: @type;     -moz-box-sizing:    @type;     box-sizing:         @type; } .border-radius (@radius: 5px) {     -webkit-border-radius: @radius;     -moz-border-radius:    @radius;     border-radius:         @radius;     -moz-background-clip:    padding;     -webkit-background-clip: padding-box;     background-clip:         padding-box; } .border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {     -webkit-border-top-right-radius:    @topright;     -webkit-border-bottom-right-radius: @bottomright;     -webkit-border-bottom-left-radius:  @bottomleft;     -webkit-border-top-left-radius:     @topleft;     -moz-border-radius-topright:        @topright;     -moz-border-radius-bottomright:     @bottomright;     -moz-border-radius-bottomleft:      @bottomleft;     -moz-border-radius-topleft:         @topleft;     border-top-right-radius:            @topright;     border-bottom-right-radius:         @bottomright;     border-bottom-left-radius:          @bottomleft;     border-top-left-radius:             @topleft;     -moz-background-clip:    padding;     -webkit-background-clip: padding-box;     background-clip:         padding-box; } .opacity (@opacity: 0.5) {     -webkit-opacity:     @opacity;     -moz-opacity:         @opacity;     opacity:         @opacity; } .gradient (@startColor: #eee, @endColor: white) {     background-color: @startColor;     background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));     background: -webkit-linear-gradient(top, @startColor, @endColor);     background: -moz-linear-gradient(top, @startColor, @endColor);     background: -ms-linear-gradient(top, @startColor, @endColor);     background: -o-linear-gradient(top, @startColor, @endColor); } .horizontal-gradient (@startColor: #eee, @endColor: white) {      background-color: @startColor;     background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));     background-image: -webkit-linear-gradient(left, @startColor, @endColor);     background-image: -moz-linear-gradient(left, @startColor, @endColor);     background-image: -ms-linear-gradient(left, @startColor, @endColor);     background-image: -o-linear-gradient(left, @startColor, @endColor); } .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {     -webkit-animation: @name @duration @delay @ease;     -moz-animation:    @name @duration @delay @ease;     -ms-animation:     @name @duration @delay @ease; } .transition (@transition) {     -webkit-transition: @transition;      -moz-transition:    @transition;     -ms-transition:     @transition;     -o-transition:      @transition;  } .transform(@string){     -webkit-transform: @string;     -moz-transform:      @string;     -ms-transform:          @string;     -o-transform:          @string; } .scale (@factor) {     -webkit-transform: scale(@factor);     -moz-transform:      scale(@factor);     -ms-transform:          scale(@factor);     -o-transform:          scale(@factor); } .rotate (@deg) {     -webkit-transform: rotate(@deg);     -moz-transform:      rotate(@deg);     -ms-transform:          rotate(@deg);     -o-transform:          rotate(@deg); } .skew (@deg, @deg2) {     -webkit-transform:       skew(@deg, @deg2);     -moz-transform:      skew(@deg, @deg2);     -ms-transform:          skew(@deg, @deg2);     -o-transform:          skew(@deg, @deg2); } .translate (@x, @y:0) {     -webkit-transform:       translate(@x, @y);     -moz-transform:      translate(@x, @y);     -ms-transform:          translate(@x, @y);     -o-transform:          translate(@x, @y); } .translate3d (@x, @y: 0, @z: 0) {     -webkit-transform:       translate3d(@x, @y, @z);     -moz-transform:      translate3d(@x, @y, @z);     -ms-transform:          translate3d(@x, @y, @z);     -o-transform:          translate3d(@x, @y, @z); } .perspective (@value: 1000) {     -webkit-perspective:     @value;     -moz-perspective:     @value;     -ms-perspective:     @value;     perspective:         @value; } .transform-origin (@x:center, @y:center) {     -webkit-transform-origin: @x @y;     -moz-transform-origin:    @x @y;     -ms-transform-origin:     @x @y;     -o-transform-origin:      @x @y; }
    
     
    Last edited: Oct 13, 2017
  5. Scheibe

    Scheibe wolfeschlegelsteinhausenbergerdorff Super Moderator

    Messages:
    182
    Likes Received:
    19
    Containers, grids, forms:
    Code:
    .container {
        &-1200 {
            max-width: 1200px;
            margin: 0 auto;
        }
    
        &-100 {
            max-width: 100%;
        }
    
        &-75 {
            max-width: 75%;
            margin: 0 auto;
        }
    
        &-50 {
            max-width: 50%;
            margin: 0 auto;
        }
    }
    
    /* Attribute selector */
    [class*='column-'] {
      float: left;
      min-height: 50px;
      padding: 10px;
    }
    
    /* Floats last ".column-" to the right */
    [class*='column-']:last-of-type {
      padding-right: 10px;
      float: right;
    }
    
    /* Clearfix */
    .row {
        &:after {
            content: "";
            display: table;
            clear: both;
        }
    }
    
    /* Main Widths */
    .column {
        &-1 {
            width: 8.33%;
        }
    
        &-2 {
            width: 16.66%;
        }
    
        &-3 {
            width: 25%;
        }
    
        &-4 {
            width: 33.33%;
        }
    
        &-5 {
            width: 41.66%;
        }
    
        &-6 {
            width: 50%;
        }
    
        &-7 {
            width: 58.33%;
        }
    
        &-8 {
            width: 66.66%;
        }
    
        &-9 {
            width: 75%;
        }
    
        &-10 {
            width: 83.33%;
        }
    
        &-11 {
            width: 91.66%;
        }
    
        &-12 {
            width: 100%;
        }
    }
    
    label {
        display: inline-block;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: capitalize;
    }
    
    input, select {
        height: 32px;
        width: 100%;
    }
    
    textarea {
        min-height: 100px;
        width: 100%;
    }
    
    input, select, textarea {
        font-size: 18px;
        padding: 5px;
    }
    
    
     

Share This Page