CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ ↑私が10年以上利用している会計ソフト！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本 まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3の animation プロパティでは、キーフレームを設定して細かい動き
背景をCanvasにする - Qiita
背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ) 少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。 <body> <canvas id="canvas"></canvas> <section id="body> /* 実際のbodyはここに書く */ </section> </body> #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; }
背景にCanvasを動かす
2. 大まかな構造 • いい感じのビュジュアルスクリプトライブラリを探す(paper.js etc) • 最初にスクリプト呼び出し又は記述 • bodyの上にすぐcanvasを作りその上にsection置き、この中に上 物の内容を書く • cssにcanvasと上物の奥行き(z-index)の関係を記述 3. スクリプト記述例 <script type="text/javascript" src="js/paper.js"> < /script> <script type="text/paperscript" canvas="canvas"> // Please note: dragging and dropping images only works for // certain browsers when serving this script online: var values =
おすすめプラグイン - Sublime Text2 Wiki*
とりあえず入れておきたいパッケージ。 Package Controlを使うので、導入方法は基本的な使い方を参照。 Install Packageを開き、入れたいプラグインの名前をフォームに入力すればよい。あとは選択してクリック（エンター）すればインストールされる。 手動で入れる場合は、ダウンロードしたパッケージをフォルダごと「Package」フォルダに格納すること。 ショートカットキーなどの設定を変えたい場合は、基本設定→Package Settingsからそのプラグイン名を選択し、「Key Bindings - User」等をクリックすれば設定ファイルが開く。 汎用 IME Support 日本語インライン入力に対応する。導入のページに記載。 ConvertToUTF8 UTF-8以外の文字コードへの対応。Shift_JISやEUC－JPで書かれたコードも文字化けせずに扱えるようになる。
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）
初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？ 私が
Bootstrap ならこんなに簡単にレスポンシブ対応のWordPressオリジナルテーマが作れますよ
数か月前にライブドアからWordPressに返り咲いたこのブログ、元の無料テーマを利用せずに完全オリジナルテーマで仕切り直ししました。とはいっても、Bootstrap というスマホ重視のレスポンシブテーマを作れるCSSフレームワークを活用しました。ど素人の私でもそれを可能にしてくれた参考ブログやサイトを手順ごとにご紹介します。ブログやサイトの訪問者の半分近くはスマホを利用しています。我がブログの訪問者も例外ではありません。そこでGoogleはレスポンシブテーマを利用して、HTML構造は共通化してCSS（スタイルシート）でモバイル表示やPC表示を切り替えることを勧めています。メンテナンス性に優れているからです。参考 スマートフォン向けウェブサイトの構築 – Webmasters — Google Developersでもレスポンシブ化はかなり勉強と骨が折れる作業が必定です。そこで役立つの B
Webサイトの作り方のまとめ！コーディングまで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめました。 ここで言うコーディングとは、「HTMLで文書を書いて（マークアップして）、CSSで見栄えを整える（CSSコーディングする）」ことを指します。主に「Webデザイナー」と呼ばれる人たちが担う範囲のコーディングについて書いてます。 以下は目次です。クリックするとその項目へ移動します。 コーディングの下準備 ディレクトリの構造を考える ディレクトリの設置 Web開発環境について CotEditorというテキストエディタ Zen-Codingという便利なプラグイン その他のWeb開発環境 コーディング！まずはマークアップ（HTML） index.htmlの基本設定 トップページの内容をマークアップ コーディング！レイアウトを整える（CSS） style.cssの基本設定 トップページのレイアウトを整える <heade
CSS3 の Transition を JavaScript と連携させるときのメモ - 8th713 Log
はじめに今回は Google Chrome と Safari に限った話。他のブラウザはしりません。検証に使ったバージョンは win 版の Google Chrome 6.0.495.0(Official Build 56152) devSafari 5.0.1(7533.17.8)です。また CSS のプロパティに関してはベンダープレフィックスは記事上では省いていますが実際のCSSではちゃんとプレフィックス付きで書いています。 サンプルTransition and webkitTransitionEnd Event - jsdo.it - share JavaScript, HTML5 and CSS hover 擬似要素や JavaScript からのインラインスタイル変化などが起きたときその変化をアニメーションで表現する仕組みです。 サンプルコードではクリックしたときクラスを付けたり
JavaScriptによるCSSの操作 | 暴満館 ～The House of full Violence～
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する {#deleteRule} function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらな
in te redi: はてなブックマークのCSSのぞき見ブックマークレット
posted by nano on February 27, 2006 19:45 tohatenacssbookmarklet はてなブックマークの、デザイン編集ページで編集できるCSSを覗き見したい人のためのブックマークレットです。 ?B CSSをのぞく （Firefox1.5でのみ動作確認しました。） 誰かのはてなブックマークのページで押せば、CSSのファイルが新しいウィンドウで開きます。ファイルの下のぶぶんにそのユーザーが追加したスタイルが載ってるはずです。（はてなが用意したデザインテーマとかだったら表示されません） カッコイイデザインに出会ったら、このブックマークレットで覗いてみてパク参考にできるかもしれません。 (03.01.2006) ブックマークレットの中身は以下のような感じです javascript:url=location.href;urn=url.match(/ht
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
