これは便利!コピペで使える実用的なCSSテクニックいろいろ Useful CSS Snippets for ... / How to Create Multiple B... / Gene Locklin他...全9件

登録日:2012-01-28 · カテゴリー:HTML・CSS

海外記事からコピペで使える実用的なCSSスニペットをいくつかご紹介します。

Useful CSS Snippets for Your Coding Arsenal

http://www.noupe.com/css/useful-css-snippets-for-your-coding-arsenal.html
-

CSS3のborder-radiusを使った多段ボーダーテクニック。

How to Create Multiple Borders in CSS3 » SitePoint

http://www.sitepoint.com/css3-multiple-borders/
    box-shadow:   
        0 0 0 2px #000,   
        0 0 0 3px #999,   
        0 0 0 9px #fa0,   
        0 0 0 10px #666,   
        0 0 0 16px #fd0,   
        0 0 0 18px #000;  
-

紙の切れ目に差し込んだような表現をCSS3で実現。

Gene Locklin

http://genelocklin.com/gravatar-style-tucked-corners/
div.tucked-corners {   
    background: #f6f6f6;   
    height: 380px;   
    margin: 50px auto;   
    padding: 10px;   
    position: relative;   
    width: 580px;   
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);   
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);   
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);   
}   
...詳細はリンク先を参照
-
    /*  
    Sticky Footer Solution  
    by Steve Hatcher   
      
    http://stever.ca  
      
    http://www.cssstickyfooter.com  
      
    */   
       
    * {margin:0;padding:0;}    
       
    /* must declare 0 margins on everything, also for main layout components use padding, not  
    vertical margins (top and bottom) to add spacing, else those margins get added to total height  
    and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */   
       
    html, body {height: 100%;}   
       
    #wrap {min-height: 100%;}   
       
    #main {overflow:auto;   
        padding-bottom: 150px;}  /* must be same height as the footer */   
       
    #footer {position: relative;   
        margin-top: -150px; /* negative value of footer height */   
        height: 150px;   
        clear:both;}    
       
    /*Opera Fix*/   
    body:before {/* thanks to Maleika (Kohoutec)*/   
    content:"";   
    height:100%;   
    float:left;   
    width:0;   
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/   
    }   
       
    /* IMPORTANT  
      
    You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.  
      
    <!--[if !IE 7]>  
    <style type="text/css">  
            #wrap {display:table;height:100%}  
        </style>  
      
    < ![endif]-->  
      
    */  
-
div { width:100px; height:100px; }   
div p { line-height:100px; } 
-
    p.threeD   
    {   
        text-shadow:   
            -1px 1px 0 #ddd,   
            -2px 2px 0 #c8c8c8,   
            -3px 3px 0 #ccc,   
            -4px 4px 0 #b8b8b8,   
            -4px 4px 0 #bbb,   
            0px 1px 1px rgba(0,0,0,.4),   
            0px 2px 2px rgba(0,0,0,.3),   
            -1px 3px 3px rgba(0,0,0,.2),   
            -1px 5px 5px rgba(0,0,0,.1),   
            -2px 8px 8px rgba(0,0,0,.1),   
            -2px 13px 13px rgba(0,0,0,.1)   
            ;   
    }  
-
    img {   
            -moz-transform: scaleX(-1);   
            -o-transform: scaleX(-1);   
            -webkit-transform: scaleX(-1);   
            transform: scaleX(-1);   
            filter: FlipH;   
            -ms-filter: "FlipH";   
    }  
-
    /***** Selector Hacks ******/   
       
    /* IE6 and below */   
    * html #uno  { color: red }   
       
    /* IE7 */   
    *:first-child+html #dos { color: red }    
       
    /* IE7, FF, Saf, Opera  */   
    html>body #tres { color: red }   
       
    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */   
    html>/**/body #cuatro { color: red }   
       
    /* Opera 9.27 and below, safari 2 */   
    html:first-child #cinco { color: red }   
       
    /* Safari 2-3 */   
    html[xmlns*=""] body:last-child #seis { color: red }   
       
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */   
    body:nth-of-type(1) #siete { color: red }   
       
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */   
    body:first-of-type #ocho {  color: red }   
       
    /* saf3+, chrome1+ */   
    @media screen and (-webkit-min-device-pixel-ratio:0) {   
     #diez  { color: red  }   
    }   
       
    /* iPhone / mobile webkit */   
    @media screen and (max-device-width: 480px) {   
     #veintiseis { color: red  }   
    }   
       
    /* Safari 2 - 3.1 */   
    html[xmlns*=""]:root #trece  { color: red  }   
       
    /* Safari 2 - 3.1, Opera 9.25 */   
    *|html[xmlns*=""] #catorce { color: red  }   
       
    /* Everything but IE6-8 */   
    :root *> #quince { color: red  }   
       
    /* IE7 */   
    *+html #dieciocho {  color: red }   
       
    /* Firefox only. 1+ */   
    #veinticuatro,  x:-moz-any-link  { color: red }   
       
    /* Firefox 3.0+ */   
    #veinticinco,  x:-moz-any-link, x:default  { color: red  }   
       
    /* FF 3.5+ */   
    body:not(:-moz-handler-blocked) #cuarenta { color: red; }   
       
    /***** Attribute Hacks ******/   
       
    /* IE6 */   
    #once { _color: blue }   
       
    /* IE6, IE7 */   
    #doce { *color: blue; /* or #color: blue */ }   
       
    /* Everything but IE6 */   
    #diecisiete { color/**/: blue }   
       
    /* IE6, IE7, IE8 */   
    #diecinueve { color: blue\9; }   
       
    /* IE7, IE8 */   
    #veinte { color/*\**/: blue\9; }   
       
    /* IE6, IE7 -- acts as an !important */   
    #veintesiete { color: blue !ie; } /* string after ! can be anything */   
       
    /* IE8, IE9 */   
    #anotherone  {color: blue\0/;} /* must go at the END of all rules */  
-

この記事をシェア