/* 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.
海外記事からコピペで使える実用的なCSSスニペットをいくつかご紹介します。
Useful CSS Snippets for Your Coding Arsenal
http://www.noupe.com/css/useful-css-snippets-for-your-coding-arsenal.htmlCSS3の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 « 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 */
[あわせて読みたい]CSSのみで画像を円形や三角形に切り抜く方法まとめ3つ - W3Q
http://w3q.jp/t/1216関連するトピックス