bata's log

フロントエンド系のTipsとかメモ

CSS3

nodebrewでバージョン管理してる場合にSublimeText3でCSScombが動かない問題

SublimeTextにCSScombというめちゃくちゃ便利なパッケージがあります。CSScombはNode.jsで動いているので、使うときはNode.jsをインストールする必要があります。 CSScomb JS を Sublime Text 3 で使ってみる | Web Design Leaves ※記事では「CSScomb js」と…

CSS3で立体を作る

CSS3のtransformをひと通りやりたかったので作ってみた。 表示例 文章でかなり説明しづらいので、最初に動いているものを… 止まっているとよくわからないので回してみました。 立体を表示する画面に設定するプロパティ perspective 奥行きを設定するプロパテ…

CSS3でパラパラアニメ

スプライト画像を利用したCSS3を使ったパラパラアニメの作り方。 HTML <div class="anime"><img src="[画像のURL]" alt=""></div> SCSS .anime{ width: 160px; height: 300px; overflow: hidden; margin: 100px; img{ margin-top: 0; -webkit-animation-name: anime; -webkit-animation-duration: 1.0s; -webkit-anim…

CSS3 アニメーションで要素を表示・非表示

iOS用のWEBアプリ制作のためのメモ。 iOS専用でCSS3アニメーションが使用できるので、アニメーション部分をCSS3で作ってJavaScriptでトリガーを制御します。 HTML .onが使いたいのでjQueryを読み込んでおく。 <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="description" content="" /> <meta name="keywords" content="" /> </meta></meta></meta></head></html>

画像を使わずに矢印を作る

スマートフォンサイトでよくある、右側に矢印があるリストを画像を使わずに作った。 HTML <ul class="list"> <li><a href="">リスト01</a></li> <li><a href="">リスト02</a></li> <li><a href="">リスト03</a></li> <li><a href="">リスト04</a></li> <li><a href="">リスト05</a></li> </ul> SCSS .list{ li{ list-style: none; font-size: 12px; a{ position: relative; display…