Design Resource Box

Friday, April 19, 2013

I don’t know the way you work, but every time I have a new project I am enthusiastic about it and eager to design and code it with no problems. If creativity can be poked a little bit with inspirational articles, coding sometimes makes you really angry due to certain issues that you come across.

If you think you’ve learned everything that is possible about coding, you are naive. Reading books about CSS won’t help much, because they will only teach you the basics, the principles of how CSS works and mostly the basic things that you need to create a website. This sounds good and encourages you after finishing one of these books, but when dealing with clients, things tend to get complicated and the basics aren’t enough anymore.

I noticed that it helps a lot to know that there are snippets to solve certain problems that you may encounter while coding a layout. Even if you don’t use the snippets in that specific moment, at least you know they exist and the next time you come across a problem, you’ll find the solution pretty fast by using the snippet that you previously came across.

Alternating Table Color Rows in CSS


<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, consectetur adipiscing elit.</td></tr>
<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
</table>
 
<table>
<tbody>
<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
</table>

Setting cellpading and cellspacing in CSS


table { 
  border-spacing:0;
  border-collapse:collapse;
}

Disable text selection highlighting


-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Fullscreen background image with CSS


html { 
        background: url(../img/your-background-image.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Source

Center certain content vertically


.container {
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

Source

Cross-Browser Inline-Block


li {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 250px;
}

Source

Less mixin inline-block cross browser


.inline-me(){
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

Clearfix hack


.clearfix {
  overflow: auto;
}
 
/* with IE6 support */
.clearfix {
  overflow: auto;
  zoom: 1;
}

Change Styles of First/Last Elements in CSS


p.first { margin-top: 0 !important; margin-left: 0 !important; }
p.last { margin-bottom: 0 !important; margin-right: 0 !important; }
/* or */
div#articles p:first-child { border:1px solid #c1c13a; }
div#articles p:last-child { border:1px solid #3ac13a; }
/* or */
div#articles > :first-child { text-align:left; }
div#articles > :last-child { text-align:right; }


<div 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>
</div>

Source

Target IE6, IE7, and IE8 hack ( with only 4 characters )


body {  
color: red;      /* all browsers, of course */  
color : green\9; /* IE8 */  
*color : yellow; /* IE7 and below */  
_color : orange; /* IE6 */  
}

Chrome font smoothing


-webkit-font-smoothing: antialiased;

CSS word break


/* force word break */
div {
  -ms-word-break: break-all;
  word-break: break-all;
    
  /* Non standard for webkit */
  word-break: break-word;
    
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

Using hyphenation


body {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;
    }

Prevent Text Breakout


.prevent-text-breakouts {
  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

CSS parent selector


li! > a.active { /* styles to apply to the li tag */ }

Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/eETvJOrgbCg/

Pages

Web Design