2012/09/06

デザイナーや開発者を用CSS


1 - 丸角

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px/* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

2 - ドロップシャドウ

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

3 - @メディアプロパティ

@media screen and (max-width: 480px) {

}

4 - グラデーションの塗りつぶしを追加

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

5 - バックグラウンドのサイズ

div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

6 - @フォントフェース

@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */

}

7 - clearfix

.clearfix {
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}  

8 - マージン:0自動;

.myDiv {
margin: 0 auto;
width:600px;

}

9 - オーバーフロー:隠された

div
{
overflow:hidden;
}

0 件のコメント:

コメントを投稿