タグ

ブックマーク / commte.net (4)

  • CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ

    TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション12の基原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの12の基原則(12 basic principles of animation - Wikipedia)デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS

    CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
  • WP-CLIコマンドの使い方 - コムテブログ

    TL;DR 知っておくと WordPress 構築が早くなる、ちょっと便利な WP-CLI コマンドをメモしておきます。 WP-CLI について WP-CLI とは、ターミナル上で WordPress に関する色々なことを操作できるツール。 WordPressの更新やバージョンアップ・テーマ・プラグインをコマンドから管理 スターターテーマがあるのでオリジナルテーマ開発に便利 管理画面で行う設定等がコマンド一発 固定・投稿ページ・コメント作成 インポート、エクスポート などなど色々なことが短いコマンドで可能。 A more RESTful WP-CLI | WP-CLI ローカルに wp-cli をインストール ローカルの場合 curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

    WP-CLIコマンドの使い方 - コムテブログ
  • Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ

    TL;DR 実務で意外と使う基的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 1.画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 2.画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css 3.float を使わ

    Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
  • 見栄えがよくなった!Web制作するなら知っておきたいjQueryプラグインまとめ

    作成:2014/05/7 更新:2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ?」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー 1.フィーチャーリスト 2.スティッキーヘッダー 画像エフェクト 3.マウスオーバーで画像にキャプション 4.イメージビューア 5.ズームインエフェクト 6.ブラーエフェクト スクロール 7.Infinite Scroll(無限スクロール) 8.画像シーケンス 9.横スクロール 10.フリック機能 レイアウト 11.画面全

    見栄えがよくなった!Web制作するなら知っておきたいjQueryプラグインまとめ
  • 1