ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ
多くのブラウザがCSS3に対応したことで、これまでPhotoshopやIllustratorなどのデザインソフトでしか表現できなかったテキストエフェクトが、CSSスタイリングのみでも実現できるようになりました。 海外デザインブログDesign Your Wayで、CSSでデザインされたクリエイティブなテキストエフェクトをまとめたエントリー「Yes, You Can Actually Make These Text Effects in CSS」が公開されていたので、今回はご紹介します。 詳細は以下から。 CSSでスタイリングした、すごいテキストエフェクトまとめ Elastic Stroke CSS + SVG SVGファイルを利用することで、テキストラインをアニメーション付きでカラフルに表現します。 See the Pen Elastic stroke CSS + SVG by yokse
EC-CUBEテンプレートファイルを作って分かった事 - ENZO.NET（えんぞーどっとねっと）
photo credit: Caden Crawford via photopin cc こんにちは、えんぞーです。 今回はオープンソースのカートプログラムである「EC-CUBE」について少し書こうと思います。 仕事の関係でEC-CUBEのテンプレートを作成する事になったので色々と試行錯誤しながら作っていたわけですが、作成後配布する段階になった際に困った事に気づきました。 テンプレートファイル構造がよく分からない 普段から作っている人からすれば「おいおい、そんなの調べりゃすぐ出てくるだろう？」って事なのかも知れませんが調べ方が悪いのか軽くハマりました。 EC-CUBEのテンプレートは大きく分けて二カ所にファイルが分散する形になっています。 つまり、「/data/Smarty/templates」に置かれる部分と「/html/user_data/packages」に置かれる部分です。 これは
RGBとカラーコードの変換ツール : 数値が何色か調べることもできます
ツールの使い方 WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツールです。 カラーコードをRGB値に変換したい場合は上の欄にカラーコードを入力してください。 RGB値をカラーコードに変換したい場合は下の欄にRGB値を入力してください。 このツールはカラーコード・RGB値どちらか一方のパラメータを編集すると、その内容にあわせて反対側のパラメータが自動的に書き換えられる仕組みとなっておりますので、即座に変換結果を求めることができます。 上側の入力欄がカラーコード。6桁もしくは3桁の16進数を入力します。 下側の入力欄はRGB値の入力欄です。0から255まで10進数の数字が入ります。 Rが赤色、Gが緑色、Bが青色を表しています。 RGB値は、入力欄の横にあるスクロールバーで調整することもできます。 そして、一番下にあるボックスに現
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Circle Hover Effects with CSS Transitions
CSS transforms are not supported in your browser CSS transitions are not supported in your browser Sorry, only modern browsers.
Animsition
Overlay Mode InstallationStep 1: Link required files<!-- animsition.css --> <link rel="stylesheet" href="../dist/css/animsition.min.css"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- animsition.js --> <script src="../dist/js/animsition.min.js"></script> Step 2: HTML markup<body> <div class="animsition"> <a href="./page1" class="anim
jQueryを使いマウスオーバーで画像を変える基本 | ニトなび
マウスオーバーのアクションで画像を変化させるという方法はたくさんのサイトで用いられていますが、 今まではCSSで割り当てたりHTMLで直接書いてみたりというのが一般的だったと思います。 ここ近年、jQueryというJavaScriptとHTMLの相互作用を強化する軽量なライブラリが登場したことに よりjQueryが普及してきましたが、jQueryは難しいとか思われがちです。しかし、基本さえ覚えてしまえばCSSを書くよりも簡単な感覚で覚えられますので、一番初歩的な画像のマウスオーバーアクションをjQueryを使って動かす方法を記事にしてみたいと思います。 jQueryでマウスオーバー？画像を変える？ つまり、こういう事です。 demo おそらく誰でも目にしたことがあるかと思います。何故、わざわざjQueryで動かすのが良いのか？って思うでしょうが、ズバリ管理が超楽なことと、jQueryという
マテリアルデザイン風タッチフィードバックが入ったボタンを作ってみた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ٩( ᐛ )و ここ最近「日本昔話をギャル語で吹き替えたらバイブスが上がった」という動画にハマってしまい。 口調を真似するようになってしまいました。 「ショッキングピーポーマックス」※ が自分的にブームです( ˇωˇ ) ※「予想外なことが起こり動揺を隠せない様子のこと」をこう言うらしい そんなことはどうでもいいですね( ˇωˇ ) 今回はマテリアルデザインの中でもタッチした時に波紋が広がるタッチフィードバックボタンの実装方法を紹介いたします。 実装方法 マークアップはaタグで用意しております。 aタグを押した時に中にspanを追加してアニメーションを表現します。 <a href="#" class="button button-black js-effect">Touch</a> cssの設定 アニメーションの動きはcssのanimateで設定をします。 ボタン
CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、 現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！ カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLにリンクを入れる その他のカスタマイズ 色を変える グローバルメニューの横幅を変えたい グローバルメニューとトグルメニューの変えるタイミングを変えたい まとめ 実装図 完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、 ブラウザサイズが狭くなると
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで高度な3D表現ができると話題の「Sprite3D.js」で作った凄いデモ
https://www.xml.vc/kiso/!important.html
overflow―スタイルシートリファレンス