【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集 - PhotoshopVIP

2022/07/15 551 users Twitter PhotoshopVIP NIKE テスラ

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサ... 続きを読む

UIの細かい動きについて | ゲームUI演出

2020/03/08 571 users ゲームUI演出 細かい動 イージング 緩急 アニメーション

細かい動きの調整をしていく中でイージングというものがあります。 イージングは動きに緩急をつけ、目立たせたい動きや自然な動きを作り出すことができます。 このイージングはUIアニメーション以外にもキャラクターモーション、エフェクトなどでも適用されており、アニメーションを等速にさせたい意図がない限りは必ず... 続きを読む

コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット40個まとめ - PhotoshopVIP

2016/04/13 632 users CodePen PhotoshopVIP ウェブデザイン

ますます加速するウェブデザインの最先端を体感できる、最新 Web テクニックを実装した、HTML/CSSコードスニペットをまとめています。 デザインと同時にまとめてコードを確認できるので、 コピペで手軽に試してみることも可能 です。コード共有コミュニティーサイト CodePen で話題となっている作品を中心に、ウェブデザインにスパイスを加えてくれる、ユニークなエフェクトが揃っています。 詳細は以下... 続きを読む

[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ | コリス

2015/07/23 584 users コリス jQuery jQueryTween スクリプト 機能

最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 画像: Girly Drop jQueryTween...記事の続きを読む 続きを読む

デザインのこつが分かる！確実に身につけておきたいプロ直伝の50のデザインテクニック -Pro Design Tips | コリス

2015/07/12 703 users タイポグラフィ コリス コツ スキルアップ グラフィック

グラフィック、タイポグラフィ、カラー、エフェクト、要素の構造、配置など、デザインのスキルアップに役立つ50のデザインテクニックを紹介します。 50 Tips to Make You a Better Designer 下...記事の続きを読む 続きを読む

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld

2015/06/19 525 users NxWorld クローズボタン CSS 矢印 サンプル

自分用に一覧化したのでシェアします。ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開している時などのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変... 続きを読む

デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック | コリス

2015/06/15 628 users コリス カーニング デザインテクニック デザイン フォント

文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間の... 続きを読む

【無料・商用可】偶然見つけた素材サイトの写真やエフェクトが凄すぎて誰かに教えたくなった | ビットエーブログ - 株式会社BITA

2015/01/20 589 users やなぎさわ Photoshop モックアップ画像 ブラシ 質感

どうも、やなぎさわです。やたらクオリティが高い素材サイトを偶然見つけました。質感のある写真素材〜iPhoneなどのモックアップ画像、Photoshopのエフェクト、ブラシ、さらには、Illustratorデータのロゴやテンプレートなどの素材が詰まっているサイトです。 そのサイトの名は「Dealjumbo.com」といいます。有料素材もありますが、無料で配布している素材も多く、デザイナーさんやそうで... 続きを読む

100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも利用簡単。

2015/01/11 517 users WordPressカスタマイズ カーソル CSSライブラリ

100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも利用簡単。 2015/1/11 Wordpressカスタマイズ 先日、「Hover.css」というボタンをホバー時のCSSエフェクト集があるのを知りました。 このHover.cssを、ちょっと使ってみたところ、WEBで利用するボタンなどの上にカーソルが来たときに、手軽にエフェクト... 続きを読む

無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2014/12/01 613 users レスポンシブ対応 コリス 勉強 デザイン 面白いもの

ページのデザインだけでなく、使用されているエフェクトも面白いものが揃っているレスポンシブ対応のHTML5/CSS3のテンプレートを紹介します。 単に使うだけでなく、HTML5/CSS3の勉強、デザインの勉強にもいいですね...記事の続きを読む 続きを読む

[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ | コリス

2014/09/29 502 users コリス jQuery ヘッダ スクリプト デモ

最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカ... 続きを読む

Unity向け3D都市モデルデータ「Japanese Otaku City」｜ゼンリン

2014/08/27 530 users ライセン ゼンリン Unity 街並み 秋葉原

Japanese Otaku Cityは、Unityでのゲーム開発に利用可能な3D都市モデルアセットです。 秋葉原の実際の街並みを基にデータ化しているので、ゲームの中にリアルな秋葉原の街を仮想空間として再現できます。実用的な様々なエフェクトと自動車やキャラクター等のモデルデータが同梱されています。また、幅広く二次創作活動でご利用いただくために「クリエイティブ・コモンズ 表示 4.0 国際 ライセン... 続きを読む

知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック | コムテブログ

2014/07/14 553 users CSSテクニック コムテブログ Web制作時 マルチカラム

少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 もくじ 画像 １．ブレンドモード ２．表示範囲 ３．透過＋合成 ４．半透明 エフェクト ５．マウスオーバーアイデア一覧 ６．CSSのみでメニューアイコン 段組み ７．マルチカラム ８．段の表示順 ９．コンテンツ流し込... 続きを読む

俺が今までに見つけた面白い・便利なサイトを晒していく: モモンガ速報

2014/06/25 736 users モモンガ速報 フォトファニア VIP メモ帳 http

2014年06月25日09:01 カテゴリvip生活 俺が今までに見つけた面白い・便利なサイトを晒していく 1: 以下、＼(^o^)／でVIPがお送りします 2014/06/25(水) 00:01:52.72 ID:vLx4UB2i0.net 忘れっぽいのでメモ帳代わりに フォトファニア http://photofunia.com/ エフェクトを選んで手軽に合成写真を作れるサイト 2: 以下、＼(... 続きを読む

動くCSSのためのメモ。

2014/06/05 1383 users CSS メモ JavaScript コンテンツ

なんだかCSSでできる事がどんどん増えてきました。以前はJavaScriptを使って実装していた動くコンテンツも、CSSだけで表現できるようになりました。そんなわけで、CSSで動かすエフェクトについてのまとめです:)。なんだかCSSでできる事がどんどん増えてきましたね。以前はJavaScriptを使って実装していた動くコンテンツも、CSSだけで表現されてるのをよく見ます。そんなわけで、ここいらで、... 続きを読む

デザインのガイドラインや指示書の作成が驚くほど捗るPhotoshopの機能拡張 -Ink | コリス

2014/02/19 519 users ink コリス psd Photoshop レイヤー

PSDのレイヤーに配置した要素のサイズやエフェクトやフォントなどの情報を1クリックでドキュメント化するPhotoshopのプラグインを紹介します。 機能拡張は無料で利用でき、Photoshop CC/CS6に対応しています。 サイズやフォントの情報など、1クリックで作成してくれます。 Inkの特長 Inkのインストール Inkの使い方 Inkの特長 ウェブページなどのレイアウトやさまざまな要素のサ... 続きを読む

[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ | コリス

2013/10/01 760 users コリス jQuery スクリプト 水平 スライド

最近よく見かけるかっこいいコンテンツやエフェクトを実装できるjQueryのプラグインを紹介します。 fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォ... 続きを読む

Appleが事実上公認した、iPhoneの革命的アプリ、Audiobus。 - B-CHANの日記（iPhone活用やたくさんの趣味やできごとなどなど）

2013/03/27 771 users iPhone Audiobus B-CHAN できごと アンプ

iPhone, 音楽音楽制作をする人ならわかると思いますが、音楽の入口から出口の流れとしては、まず音を鳴らし、それにエフェクトを掛け、それを最終的にアンプからスピーカーで鳴らす、こんな順序です。 音源→エフェクタ→アンプ→スピーカー・ヘッドフォン iPhoneやiPadなどのiOS機器は基本的には一度に1つのアプリしか使えません。2つの音楽アプリで同時に音楽を再生することはできません。また、ある音... 続きを読む

コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

2013/01/29 539 users コピペ 目次 Webクリエイターボックス マウス 装飾

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景... 続きを読む

ウェブデザインの引き出しを増やすPSD素材がダウンロードできる -ByPeople、質も量もものすごいです！ | コリス

2012/11/21 812 users コリス psd ウェブデザイン スライダー ウェブページ

ウェブページのメニュー、ボタンなどをはじめ、ボックス、スライダー、アイコン、背景パターン、リボン、バッジ、エフェクト、テンプレートなど、トータル2,000くらい？のPSD素材がダウンロードできるByPeopleを紹介します。 そんなに数多くダウンロードできないよ、って人も大丈夫！ 全素材まとめてダウンロードできます。 ByPeople ダウンロードできる素材はほとんどがPSDで、モノによってはAI... 続きを読む

CSS3を使った実用的なスタイルシートのテクニックのまとめ | コリス

2012/08/28 516 users UIエレメント タブ ホバー時 コリス レイアウト

パネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。 ※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。7対応もあります。 続きを読む

ブラウザ上で本格的なDJプレイが楽しめる『PartyCloud』がかなり楽しいですね | IDEA*IDEA

2012/06/01 507 users Soundcloud PartyCloud millio

こういうのを探していた・・・。K’confさんで教えてもらいました。 ↑ かなり本格的です。 BPMの同期もやってくれるのでつなぎもばっちりですね。ちょっとしたエフェクトかけつつ次々に回してみてはいかがでしょう。 曲は基本的にSoundCloudから引っ張ってきているようですな。作業用BGMやらイベントDJプレイなんかにかなり使えそうです。 » PartyCloud – Mix 20 millio... 続きを読む

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス

2012/02/27 735 users コリス box-shadow Effec CSS 実装

デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effec... 続きを読む

CSS3を使ってできる画像まわりのエフェクトやスタイリング17 | Webロケッツマガジン

2012/02/24 933 users シャドウ CSS Webロケッツマガジン スタイリング 目次

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 目次 1. シャドウ   2. トイカメラ風トンネル効果   3. カラー調整   4. 回転   5. 角丸   6. 楕円のフレーム   7. 円のフレーム   8. 三角形フレーム   9. 重な... 続きを読む

[JS]jQueryのプラグイン100選 -2011年総集編 | コリス

2011/12/11 1383 users jQuery コリス アニメーション CSS3 影響

2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テ [...] 続きを読む