sej20xx のすべての投稿

スマホ Google画像検索の スワイプインタラクション をまねてみるデモ

スマホブラウザで Google image search して画像をタップすると
こんなスワイプインタラクションがあらわれるよね、というデモ
 
 
demo : 『Swipe like Google image search on smartphone』 JSFiddle

 
このデモはpointerイベントには対応してないので
Touch PCでは動きません。

また、Android2系以下でスムースに動かないももあるかもですが、
その場合は動作のどれかをフォールダウンする必要がありますね。

Mac で Compass 1.x.x にうまくアップデートできないときに疑ってみる 「xcode-select」

Compassをインストールした後に
Mac OS を Mavericksにアップデートしたからか…

なぜそうなったのかは不明だが
自機において Compass が0.x.xから1.x.xにバージョンアップできなかったため
ググったら出てきたので以下にまとめた。
 
 
『Mavericks における Compass 0.1x.x → 1.x.x アップデート には 要 xcode-select –install』 Qiita
 
 
SASSの最新の機能が使えるようになった。

複数行にも3点リーダー(「…」)を表示する

-webkit-line-clamp によって
webkit系のブラウザにおいて
複数行のテキストにも三点リーダーが表示できるということで
demo をつくってみるテスト。
 
 
demo 『webkit-line-clamp』 CodePen

See the Pen webkit-line-clamp by sekiyaeiji (@sekiyaeiji) on CodePen.


 
 
以下の4つのプロパティで表現しています。

display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;

 
終端に設定したい行数を
この -webkit-line-clamp に値として設定するのですね。

-webkit ベンダープレフィックスが記述されていることからわかる通り
webkit系ブラウザのみで再現されます。

ただし、iOSやAndroidの旧バージョンのブラウザにおいて
すべて正しく動作する保証はありません。
 
 
1行のテキストにおける三点リーダーの場合は
以下のように

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

 
によって表現できたわけですが
webkit系ブラウザ以外でも徐々に複数行の3点リーダー表現が
可能になりそうです。