Snippet CSS

With snippet CSS, you can free your mind

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

Search This Blog

Code Tips

Snippet CSS

Adding Rounded Corners:

Change Styles of First/Last Elements:

CSS Box Shadow:

Targeting Firefox With CSS:

Background Gradient:

Alternating Table Color Rows:

Reset Browser Default Styles:

Center Website Content:

Removing Arrows From <SELECT> Tag:

Animated Tooltip with CSS new:

Prevent Long URLs From Breaking Out new:

Comments

Post a Comment

Popular posts from this blog

Snippet PHP

Setup Jenkins Git Clone with ssh-agent on Windows

jQuery Validation Wait Ajax Complete Before Submitting Form