W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

これは便利!コピペで使える実用的なCSSテクニックいろいろ

Useful CSS Snippets for ... / How to Create Multiple B... / Gene Locklin他...全9件

海外記事からコピペで使える実用的な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);   
}   
...詳細はリンク先を参照

ブラウザ下部に張り付いたフッター。

New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer

http://www.cssstickyfooter.com/
    /*  
    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]-->  
      
    */  

テキストをボックスの中央に配置。

10 Random CSS Tricks You Might Want to Know About

http://sixrevisions.com/css/10-random-css-tricks-you-might-want-to-know-about/
div { width:100px; height:100px; }   
div p { line-height:100px; } 

text-shadowを使ってテキストを立体化。

How to Create 3D Text With CSS3 » SitePoint

http://www.sitepoint.com/css3-3d-text/
    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)   
            ;   
    }  

画像の裏返し。

Flip an Image | CSS-Tricks

http://css-tricks.com/snippets/css/flip-an-image/
    img {   
            -moz-transform: scaleX(-1);   
            -o-transform: scaleX(-1);   
            -webkit-transform: scaleX(-1);   
            transform: scaleX(-1);   
            filter: FlipH;   
            -ms-filter: "FlipH";   
    }  

ブラウザー毎のCSSハック。

Browser CSS hacks &laquo; Paul Irish

http://paulirish.com/2009/browser-specific-css-hacks/
    /***** 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 */  
最終更新日:2012-01-30 (40,481 views)

関連するトピックス

ページ上部に戻る