方法をみつけたのでメモ。
http://www.webstuffshare.com/2012/05/creating-android-dock-using-jquery-css3/
どこで使うのかピンと来ないけどこれはすごい。
【CSS】bootstrap3のアイコンを白くする方法。
めも。
bootstrapのアイコンはver.3からフォント扱いなので、cssでcolorを指定すれば何色にでも変更可能。
.white {
color: #ffffff;
}
とでもしておけばOK。
【CSS】bootstrap3のレスポンシブを無効にする。
めも。
下記URLより、「non-responsive.css」をダウンロードし読みこめばOK。
http://bootstrap.s1.adexd.net/#disable-responsive
注意点は下記の通り。
<meta name="viewport" content="width=device-width, initial-scale=1.0">を削除する。 <link rel="stylesheet" href="css/bootstrap.min.css" media="screen"> の下に、 <link rel="stylesheet" href="css/non-responsive.css" media="screen"> を追加する。 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>を削除する。 グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*にする。
【CSS3】CSSでウィンドウズモバイルのローディングアニメーションを再現する。
ローディングアニメーション第2弾。
マークアップは下記の通り。
■HTML
<div class="stage-2"> <span>Loading...</span> <span class="l-1"></span> <span class="l-2"></span> <span class="l-3"></span> <span class="l-4"></span> <span class="l-5"></span> <span class="l-6"></span> </div>
■CSS
.stage-2 {
font-family: meiryo;
background: #fff;
width: 200px;
height: 100px;
margin: 0 auto;
padding: 100px 0 0 100px;
}
span {
display: block;
margin: 0 auto;
}
span[class*="l-"] {
height: 4px; width: 4px;
background: #000;
display: inline-block;
margin: 12px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-ms-animation: loader 4s infinite;
-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-ms-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;
}
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-ms-keyframes loader {
0% {-ms-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-ms-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
【CSS3】CSSでwindows8のローディングアニメーションを再現する。
かっこいいのを見つけたのでメモ。
マークアップは下記の通り。
■HTML
<div class="stage"> <div class='loader'> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> </div> </div>
■CSS
.stage {
background: #111;
width: 300px;
height: 250px;
margin: 0 auto;
}
.loader {
position: relative;
padding-top: 100px;
width: 40px;
margin: auto;
}
.loader .circle {
position: absolute;
width: 38px;
height: 38px;
opacity: 0;
-webkit-transform: rotate(225deg);
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: orbit;
-webkit-animation-duration: 5.5s;
}
.loader .circle:after {
content: '';
position: absolute;
width: 5px;
height: 5px;
border-radius: 5px;
background: #fff;
/* Pick a color */
}
.loader .circle:nth-child(2) {
-webkit-animation-delay: 240ms;
}
.loader .circle:nth-child(3) {
-webkit-animation-delay: 480ms;
}
.loader .circle:nth-child(4) {
-webkit-animation-delay: 720ms;
}
.loader .circle:nth-child(5) {
-webkit-animation-delay: 960ms;
}
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotate(225deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
7% {
-webkit-transform: rotate(345deg);
-webkit-animation-timing-function: linear;
}
30% {
-webkit-transform: rotate(455deg);
-webkit-animation-timing-function: ease-in-out;
}
39% {
-webkit-transform: rotate(690deg);
-webkit-animation-timing-function: linear;
}
70% {
-webkit-transform: rotate(815deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
75% {
-webkit-transform: rotate(945deg);
-webkit-animation-timing-function: ease-out;
}
76% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
100% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
}
■デモ
【CSS】テキストの縁取り表現を実装する。
CSSにて文字列を縁取りする方法は2種類存在しており、一つはCSS3の「text-stroke」を用いるパターン、もう一つは「text-shadow」を用いるパターンである。
■text-stroke
.outline {
-webkit-text-stroke-color: #777;
-webkit-text-stroke-width: 1px;
}
※省略系で書くと下記の通り。
.outline {
-webkit-text-stroke: 1px #777;
}
■text-shadow
.outline {
text-shadow:
-1px -1px #777,
1px -1px #777,
-1px 1px #777,
1px 1px #777;
}
「text-stroke」は内側に縁取りされ、「text-shadow」は外側に縁取りされる。
また、「text-stroke」を用いると、今現在はwebkit系のブラウザでしか解釈してくれないので注意。
「text-shadow」であればほとんどのブラウザに対応している一方、セリフ体のフォントだと縁と縁の合間に隙間が生まれるため、若干美しさに欠ける。といっても気にならない人であれば全く問題ない。
【CSS】FireFoxのみで有効なCSSハック。
めも。
まさかこんな特殊なことをすることになるとはおもわなんだけども、必要だったので調べた。
@-moz-document url-prefix() {
#selector {
property: value;
}
}
という形で書けば良い。