Snippet CSS

With snippet CSS, you can free your mind

  1. Adding Rounded Corners:

    Rounded corners can be added to your CSS3-based elements, like borders and buttons.

    <style type="text/css">
      .round1 {
        border:1px solid #c1c13a;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; /* future proofing */
        -khtml-border-radius: 10px; /* for old Konqueror browsers */
      }
      .round2 {
        border:1px solid #c1c13a;
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0; /* future proofing */
        -khtml-border-radius: 10px 10px 0 0; /* for old Konqueror browsers */
      }
    </style>
    
  2. Change Styles of First/Last Elements:

    This is used to change the styles of the first and/or last elements of a container in CSS.

    <style type="text/css">
      p.first { margin-top: 0 !important; margin-left: 0 !important; }
      p.last { margin-bottom: 0 !important; margin-right: 0 !important; }
      /* or */
      p#articles p:first-child { border:1px solid #c1c13a; }
      p#articles p:last-child { border:1px solid #3ac13a; }
      /* or */
      p#articles > :first-child { text-align:left; }
      p#articles > :last-child { text-align:right; }
    </style>
    
    <p id="articles">
      <p class="first">1st article: lorem ipsum dolor sit amet...</p>
      <p>2st article: lorem ipsum dolor sit amet...</p>
      <p>3st article: lorem ipsum dolor sit amet...</p>
      <p>4st article: lorem ipsum dolor sit amet...</p>
      <p class="last">5st article: lorem ipsum dolor sit amet...</p>
    </p>
    
  3. CSS Box Shadow:

    Use this snippet to add shadows to tables, ps etc.

    <style type="text/css">
      .shadow {
        -moz-box-shadow: 4px 5px 5px 1px #777;
        -webkit-box-shadow: 4px 5px 5px 1px #777;
        box-shadow: 4px 5px 5px 1px #777;
      }
      .shadowIE {
        background-color:#f5f5f5; /* need for IE*/
        -moz-box-shadow: 4px 5px 5px 1px #777;
        -webkit-box-shadow: 4px 5px 5px 1px #777;
        box-shadow: 4px 5px 5px 1px #777;
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
        -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
        zoom: 1;
      }
      .shadowIE .content {
        position:relative;
        background-color:#f5f5f5;
      }
    </style>
    
    <p class="shadow">
      This is a Box-shadowed element.
    </p>
    <p class="shadowIE">
      <p class="content">
        This is a Box-shadowed element.
      </p>
    </p>
    
  4. Targeting Firefox With CSS:

    This snippet applies only to the Firefox extension for CSS.

    <style type="text/css">
      @-moz-document url-prefix() {
        H5 { color:red; }
        P { margin-left:20px; }
        /* other special styles for FireFox here */
      }
    </style>
    
  5. Background Gradient:

    With CSS3, you don't need to add images to the background of elements. You can directly add gradients.

    <style>
      .grad {
        background: -webkit-gradient(linear, left top, left bottom, from(#84c8d7), to(#327fbd));
        background: -moz-linear-gradient(top, #84c8d7, #327fbd);
        filter:
          progid:DXImageTransform.Microsoft.gradient(startColorstr="#84c8d7", endColorstr="#327fbd");
      }
    </style>
    
    <p class="grad">This is a p with gradient background.</p>
    
  6. Alternating Table Color Rows:

    This is pretty self explanatory. If you have a table, you can use this to give it alternating row colours.

    <style type="text/css">
      /* technique 1 */
      tbody tr:nth-child(odd){ background-color:#ccc; }
      /* technique 2 */
      TBODY TR.odd { background-color:#78a5d1; }
    </style>
    
    <table>
    <tbody>
    <tr>
    <td>Row1</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr>
    <td>Row2</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr>
    <td>Row3</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr>
    <td>Row4</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr>
    <td>Row5</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr class="odd">
    <td>Row1</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr>
    <td>Row2</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr class="odd">
    <td>Row3</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr>
    <td>Row4</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    <tr class="odd">
    <td>Row5</td>
    <td>Lorem ipsum dolor sit amet.</td></tr>
    </tbody>
    </table>
    
  7. Reset Browser Default Styles:

    The same code can display different styles for different browsers. This is how to avoid the same.

    <style type="text/css">
      html, body, p, span, applet, object, iframe, h1, h2, h2, h4, h5, h2, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
      { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none; }
      html
      { height:101%; } /* always show scrollbars */
      body
      { font-size:62.5%; line-height:1; font-family:Arial, Tahoma, Verdana, sans-serif; }
      article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
      { display:block; }
      img
      { border:0; max-width:100%; }
      a
      { text-decoration:none; }
      a:hover
      { text-decoration:underline; }
      ol, ul
      { list-style:none; }
      blockquote, q
      { quotes:none; }
      blockquote:before, blockquote:after, q:before, q:after
      { content:""; content:none; }
      strong
      { font-weight:bold; } 
      input
      { outline:none; }
      table
      { border-collapse:collapse; border-spacing:0; }
    </style>
    
  8. Center Website Content:

    Every one of your users will have different displays. So, you need to center your website's content so as to fit every display properly.

    <style type="text/css">
      /* Center your website horizontally */
      .wrapper{
        width: 960px;
        display: table;
        margin: auto;
      }
      /* Center certain content vertically */
      .container{
        min-height: 10em;
        display: table-cell;
        vertical-align: middle;
    }
    </style>
    
    <p class="wrapper">
      <p class="container">
        <p>Content goes here</p>
      </p>
    </p>
    
  9. Removing Arrows From <SELECT> Tag:

    In HTML, Select comes with drop down arrows. These can be removed using CSS.

    <style type="text/css">
      SELECT.no_arrows {
        width:90px; padding-top:0px; margin:-5px 0 0 5px; border:0px;
        background:transparent; -webkit-appearance:none;
        text-indent:0.01px; text-overflow:""; color:#444;
      }
      SELECT.no_arrows:focus {
        box-shadow:none;
      }
      SELECT.no_arrows::-ms-expand {
        /* for IE 10+ */
        display:none;
      }
      @-moz-document url-prefix() {
        /* for FF */
        SELECT.no_arrows {
          width:auto; padding-top:2px; margin:0 0 0 5px;
          -webkit-appearance: none; -moz-appearance: none;
        }
      }
    </style>
    
  10. Animated Tooltip with CSS new:

    This snippet uses the transform feature from CSS3 to create custom tool tips in pure CSS.

    <style type="text/css">
      .tooltip-container {
        /* Forces tooltip to be relative to the element, not the page */
        position:relative;
        cursor:help;
      }
      .tooltip {
        display:block;
        position:absolute;
        width:150px;
        padding:5px 15px;
        left:50%;
        bottom:25px;
        margin-left:-95px;
        /* Tooltip Style */
        color:#fff;
        border:2px solid rgba(34,34,34,0.9);
        background:rgba(51,51,51,0.9);
        text-align:center;
        border-radius:3px;
        /* Tooltip Style */
        opacity:0;
        box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
        -webkit-transition:all 0.2s ease-in-out;
        -moz-transition:all 0.2s ease-in-out;
        -0-transition:all 0.2s ease-in-out;
        -ms-transition:all 0.2s ease-in-out;
        transition:all 0.2s ease-in-out;
        -webkit-transform:scale(0);
        -moz-transform:scale(0);
        -o-transform:scale(0);
        -ms-transform:scale(0);
        transform:scale(0);
        /* Reset tooltip, to not use container styling */
        font-size:14px;
        font-weight:normal;
        font-style:normal;
      }
      .tooltip:before, .tooltip:after{
        content:"";
        position:absolute;
        bottom:-13px;
        left:50%;
        margin-left:-9px;
        width:0;
        height:0;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-top:10px solid rgba(0,0,0,0.1);
      }
      .tooltip:after{
        bottom:-12px;
        margin-left:-10px;
        border-top:10px solid rgba(34,34,34,0.9);
      }
      .tooltip-container:hover .tooltip, a:hover .tooltip {
        /* Makes the Tooltip slightly transparent, Lets the barely see though it */
        opacity:0.9;
        /* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
      }
      /* Custom Classes */
      .tooltip-style1 {
        color:#000;
        border:2px solid #fff;
        background:rgba(246,246,246,0.9);
        font-style:italic;
      }
      .tooltip-style1:after{
        border-top:10px solid #fff;
      }
    </style>
    
    <i class="tooltip-container"><b>Lorem ipsum dolor sit amet</b><span class="tooltip">Hello! This is a first tooltip!</span></i>
    <em class="tooltip-container"><b>Pellentesque id auctor sem</b><span class="tooltip tooltip-style1">This is a second tooltip!</span></em>
    
  11. Prevent Long URLs From Breaking Out new:

    Long URLs often break out from the container, causing issues to users. This is how to avoid them from doing so.

    <style type="text/css">
      .break {
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
      }
      .ellipsis {
        width: 250px;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis; /* Required for IE8 */
        -o-text-overflow: ellipsis; /* Required for Opera */
        text-overflow: ellipsis;
      }
    </style>
    

Comments

Popular posts from this blog

Reduce TIME_WAIT Socket Connections