縦方向に１件ずつスクロール表示するやつ
See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.
表示エリアの高さ＝リスト要素１件の高さ＝keyframeのスクロール量 にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。
タグ: Sass
[CSS] rem でフォントサイズを相対指定する
以前 「YUI Fonts CSS でフォントサイズを相対指定する」 という記事を2008年に書いたんだけど、
6年後(!!)の現在はremで指定しているのでそれについてメモっておく。
“[CSS] rem でフォントサイズを相対指定する” の続きを読む
[WP] Underscoresでカスタムテーマを作る：Bootstrap(Sass)導入編
Underscores で魔改造したメモその３。
Sass版のBootstrapをBowerでインストールして部分的にimportして使ってみる。
- Compass導入編
- ナビゲーションメニュー改造編
- Bootstrap(Sass)導入編 ←今ここ
Bootstrapはデザインが出来なくても眉目麗しいスタイルになる上に、
あるあるなUIのJavascriptまでついてくるのがいい所だと思う。
しかも以前はLessのしかなかったけど今はSassのもあるんだ。
“[WP] Underscoresでカスタムテーマを作る：Bootstrap(Sass)導入編” の続きを読む
[Sass] @extend の挙動
classとplaceholder selecterについてそれぞれ@extendを試みた以下のSCSSをコンパイルする。
%ext {
color:red;
&::before {
content: 'ext';
}
&[data-aaa="ext"] {
border:solid 1px red;
}
}
.klass {
@extend %ext;
&::after {
content: 'klass';
}
&[data-aaa="aaa"] {
background:pink;
}
&.amb {
color:yellow;
}
.child {
width:100px
}
}
.klass[data-bbb="bbb"] {
background:black
}
.klass .child2 {
height:100px;
}
.klass2 {
@extend .klass;
}
.klass3 {
@extend .klass2;
}
.klass4 {
@extend %ext;
box-shadow:0 0 5px #000;
}
結果こうなる
.klass, .klass2, .klass3, .klass4 {
color: red; }
.klass::before, .klass2::before, .klass3::before, .klass4::before {
content: 'ext'; }
[data-aaa="ext"].klass, [data-aaa="ext"].klass2, [data-aaa="ext"].klass3, [data-aaa="ext"].klass4 {
border: solid 1px red; }
.klass::after, .klass2::after, .klass3::after {
content: 'klass'; }
.klass[data-aaa="aaa"], [data-aaa="aaa"].klass2, [data-aaa="aaa"].klass3 {
background: pink; }
.klass.amb, .amb.klass2, .amb.klass3 {
color: yellow; }
.klass .child, .klass2 .child, .klass3 .child {
width: 100px; }
.klass[data-bbb="bbb"], [data-bbb="bbb"].klass2, [data-bbb="bbb"].klass3 {
background: black; }
.klass .child2, .klass2 .child2, .klass3 .child2 {
height: 100px; }
.klass4 {
box-shadow: 0 0 5px #000; }
classに対する@extendは対象範囲が広い。
.klassのスタイルを最初に設定しているこの部分だけを@extendする事に期待して
.klass {
@extend %ext;
&::after {
content: 'klass';
}
&[data-aaa="aaa"] {
background:pink;
}
&.amb {
color:yellow;
}
.child {
width:100px
}
}
@extendを書いていたとしても、
.klass2 {
@extend .klass;
}
フタを空けてみれば .klass がセレクタに含まれているスタイルの全てにextendされている。
本当にextendした部分だけピックアップしてplaceholder selecterに置き換え、
それをextendした方がまだ余計なセレクタを生まずに済むが、
&の置換に関してはまだ不具合（と思われる挙動）があるので注意が必要。
[Sass] Speech Bubble(tail) Mixin
CSSでふきだし作る時に最も面倒くさいしっぽを全方位カバーしたmixinが出来てしまいました。
Sassだけで動作します。
しっぽの向きはtriangle generatorと同じ。
枠線がある場合、しっぽの大きさを超える太さにすると背景色のしっぽが消えて線だけになります。
9日目:CSS Preprocessor Advent Calendar 2012
CSS Preprocessor Advent Calendar 2012の9日目です。
今年の8月にSassの神バージョンアップがあった勢いでレポートを書いたんです。
社内にSass使い増えるといいなーと思って書いてはみたものの、とにかく使い勝手が悪い。
長文過ぎて見づらかったのでカッとなってWebサイト化しました。
加筆し過ぎて序盤しか出来てないんですが、後は追々書いていくつもりです。
明日はTakatsudoさんです！
“9日目:CSS Preprocessor Advent Calendar 2012” の続きを読む
[Sass+Compass] Rubyで作るカスタム関数と設定
RubyでSassの@functionを作ると色々やれて便利です。
CompassのConfig使うとより便利です。
[Compass] 超訳 Configuration Reference
CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。
Compassの設定ファイルはRubyファイルです。
これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。
それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！
※この記事は完全な和訳ではありません。
[Sass] Sass 3.2で実装された新機能がヤバい
8/10に3.2、8/15にバグフィックスした3.2.1がリリースされて
ただでさえヤバイくらい高機能なSassがますますパワーアップした。
Sass信者のみなさんはすでにお使いでしょうか？
[Sass + Compass] dataURL background mixin
画像のdataURL化と50%縮小するbackground-sizeの書き出しを同時に行うmixin
@mixin data-background($image){
background-image:inline-image($image);
@include background-size(image-width($image)/2 image-height($image)/2);
};
[Sass] Compass CSS3-animations snipets & mixin
CompassのCSS3モジュールでは
transitionsのmixinがあるのにanimationsはないので
-mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。
@include experimental(animation-name, sample); //アニメーション名
@include experimental(animation-duration, 1s); //実行時間
@include experimental(animation-iteration-count, 1); //実行回数(number | infinite)
@include experimental(animation-direction, normal); //反復の有無(normal | alternate)
@include experimental(animation-delay, 0s); //実行までの待ち時間
@include experimental(animation-fill-mode, both);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
@include experimental(animation-timing-function, linear);//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
@include experimental(animation-play-state, running); //実行状態(running | paused) *削除検討中のプロパティ
transformを参考にまとめたmixin
//再生時間
$default-animation-duration : 0.5s !default;
//実行までの待ち時間
$default-animation-delay : 0 !default;
//実行回数(number | infinite)
$default-animation-iteration-count: 1 !default;
//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
$default-animation-timing-function: ease !default;
//反復の有無(normal | alternate)
$default-animation-direction: normal !default;
//実行前や実行後のスタイル指定(none | forwards | backwards | both)
$default-animation-fill-mode: both !default;
@mixin animation (
$name :false,
$duration :$default-animation-duration,
$delay :$default-animation-delay,
$count :$default-animation-count,
$function :$default-animation-timing-function,
$direction:$default-animation-direction,
$fillMode :$default-animation-fill-mode
){
@if $name {
@include experimental(animation-name, $name);
}
@include experimental(animation-duration, $duration);
@include experimental(animation-delay, $delay);
@include experimental(animation-iteration-count, $count); //実行回数(number | infinite)
@include experimental(animation-timing-function, $function);
@include experimental(animation-direction, $direction); //反復の有無(normal | alternate)
@include experimental(animation-fill-mode, $fillMode);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
}