コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
スライダーなどで使用される、バレットナビゲーションのスタイル・エフェクトサンプル - NxWorld
スライダーを切り替えたり現在何枚目なのか把握しやすいように配置されているのを見かけることが多いバレットナビゲーションを、CSSを使って見た目を整えたり動きを付けてみたサンプルです。 スライダー以外にも例えば長いシングルページでウィンドウの右側によく配置されているようなナビゲーションなどにも利用できますし、全てCSSなのでサイズやカラーなども容易に変更できます。 いずれもシンプルで凝ったものではありませんが、むしろシンプルなのでほとんどのテイストでそのまま使えたり、これをベースにオリジナルな見栄えにしていくことができると思います。 共通のHTML・CSS 以下で紹介しているサンプルでは共通のHTML・CSSとして下記がそれぞれ指定されており、CSSの場合はこの共通スタイルに各サンプルで紹介しているCSSを追記・変更などをすることで見栄えの確認ができると思います。 一部場合によっては必要ない記
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。 今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。 また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。 サイトによっては
ワンクリックで画像編集が完了！Photoshopアクションファイル52選
2015年8月27日の記事を更新しています。 優れた画像編集ソフトとして知られるPhotoshopですが、アクションを活用すればより効果的にデザイン作業を行うことができます。 アクションとは、登録した操作をワンクリックで再生することができる機能のことで、繰り返し処理が必要な時に便利なツールです。 利用すれば大幅な時間短縮に繋がり、短時間でもデザインを作り込むことができるようになります。 今回は、無料で使える便利なPhotoshopアクションを52個まとめてご紹介します。 画像処理の機会が多いという方には特にオススメですので、気になるものがあればぜひ活用してみてください。 手軽に写真加工が出来る、無料のPhotoshopアクション52選 1.Black And White http://jean31.deviantart.com/art/Black-And-White-57962641 味わ
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
他と差がついた！最近のトレンドをおさえた一歩進んだエフェクトまとめ
作成：2015/04/27 更新：2016/06/29 Webデザイン > 今回は光の屈折や歪み・パーティクルなエフェクトをブラウザ上で表現可能にするチュートリアルをまとめました。ありきたりな見せ方をやめて、表現の幅を広げたいと感じたときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 透過や光に関する効果 １．プリズムエフェクト ２．パーティクルエフェクト ３．ジニーエフェクト ４．ブラーエフェクト（ドラッグ可能） ５．スクロールで背景がフェードする ニューメリック ６．ニューメリック スライダー ７．テキストフィールドを数値のみに限定する マテリアル アニメーション ８．波紋状に広がる効果 ９．タブ選択後、オーバーレイさせる １０．デイトピッカー その他 １１．フリック カルーセル １２．画像クリックで全幅スライダー表示 １３．様々な幾何学模様の作り方
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
このUIエフェクトすごい！ふわふわと紙が風に舞うような新感覚の操作性 -Windy Effect | コリス
カード型レイアウトの各カードを紙が風に舞うように操作できる美しくて楽しいプロトタイプのエフェクトを紹介します。 こんなエフェクトが実装される日もそう遠くはなさそうですね！
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置Hover.cssを呼び出すHover.css用のタグを記入する利用するファイルも、hover.css（縮小版はhover-min.css）の1つの
小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo
[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック
divで実装したパネルに紙がふわりとするようなエフェクトを与えるスタイルシートのテクニックを紹介します。 デモではパネル底の左右がふわりとなります。 Pure CSS Paper Lift Effect 実装は非常にシンプルです。 HTML HTMLは、div一つだけです。 <div class="box"></div> CSS スタイルシートはベンダプレフィックスも含めてあるのでちょっと長いですが、コピペで利用できます。 body { margin: 0; padding: 0; background: #efefef; } .box { position: relative; margin: 40px auto; width: 400px; height: 350px; background: #fff; border-radius: 2px; } .box::before, .box
![[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcb821b40e6224665d6d8c37a61bec6e8d65084e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102305.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ - NxWorld
http://11neko.com/menu-style-inspiration/
