[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法 | コリス

2019/05/21 52 users sticky コリス position CSS レイアウト

CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。... 続きを読む

10分で分かる！Adobe XDの新機能や実践的な使い方が学べるAdobe公式チュートリアルファイル中級編 | コリス

2018/06/21 75 users コリス ブッダ 四則計算 固定ヘッダ Adobe XD

Adobe XDは毎月アップデートされ、6/19のアップデートでは待望の固定ヘッダ・フッタ、アートボードのオーバーレイ、数値フィールドの四則計算に対応しました。Webサイトやスホマアプリの制作に役立つ機能ばかりで、作業がどんどん便利になっています。 そんな新機能も含めた使い方が学べる「Adobe XDスターターキット中... 続きを読む

Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js | コリス

2017/10/10 66 users アクセシブル モーダルダイアログ モーダル コリス ライブラリ

ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドライン に準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モ... 続きを読む

商用利用無料、紙・キャンバス・布・水彩・電子基板など高解像度で高品質なテクスチャ素材のまとめ | コリス

2016/01/18 101 users クライアント 質感 ポスター コリス 用途

Webデザインに背景として使ったり、写真や文字にオーバーレイで重ねたり、同人誌やポスターの紙のデザインで質感を加えたり、高解像度・高品質なテクスチャ素材を紹介します。 紙やノート・キャンバス・布・水彩・木・モニター・電子基板など、さまざまな用途で利用できるものをまとめました。 ここで紹介しているテクスチャ素材はすべて、個人・商用利用ともに無料で、クライアントのプロジェクトや同人誌などの販売品に利用... 続きを読む

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2 | コリス

2015/03/19 161 users コリス jQuery Zepto スクリプト エフェクト

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、... 続きを読む

フルスクリーンでオーバーレイの検索ボックス - Weblog - Hail2u.net

2015/02/11 62 users Weblog hail2u.net トグル vmin CSS

増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 View Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検... 続きを読む

Webデザインで魅力的なビジュアルを作りだすパステルカラーの効果的な使い方 | コリス

2014/12/24 82 users パステル イエロー 淡いピンク デザイナー トレンド

Webデザインでパステルカラーを使うのは最近のトレンド、またはそれ以上といってもよいでしょう。魅力的なビジュアルを作るために、デザイナーがマスターしておきたいパステルカラーの効果的な使い方を紹介します。 「パステル」と聞くと、淡いピンクやイエローを思い浮かべる人が多いかもしれません。ここで紹介するパステルにはもっと多くのカラーがあります。 Solasie パステル調の写真やパステルをオーバーレイさ... 続きを読む

[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法） | コリス

2014/09/05 136 users video要素 レスポンシブ対応 コリス ブラウザ 自動再生

動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）か... 続きを読む

[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック | コリス

2014/06/13 109 users video要素 コリス パネル モダンブラウザ ブラウザ

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 Create Fullscreen HTML5 Page Background Video デモ 実装 デモ デモはvideo要素に対応したモダンブラウザでご覧ください、IEは9+で、IE8だと動画が画像に変更して表示されます。 デモページ コンテンツを配置した右のパネルは、動画が透けて... 続きを読む

[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay | コリス

2014/04/22 70 users jQuery コリス スクリプト アニメーション 実装

ページ全体、ページ上のさまざまな要素にオーバーレイをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。 実装は非常にシンプルで、オーバーレイのカラーや不透明度、アニメーションなどのカスタマイズも簡単です。 plainOverlay plainOverlay -GitHub plainOverlayのデモ plainOverlayの使い方 plainOverlayのデモ デモで... 続きを読む

スマートフォン用の広告（アフィリエイト）におすすめ！「nend-ネンド」の設定方法

2014/02/05 62 users nend スクロール アフィリエイト アフィリエイト広告 広告

スマートフォン用の広告（アフィリエイト）におすすめ！「nend-ネンド」の設定方法 大彗星ショッカー2さんのサイトでも大絶賛されていた スマートフォン用のアフィリエイト広告「nend」を試してみました。 個人的には追尾式のスマホ用広告は好きではないのですが、スクロールで上に上がったりしない点とサイズが小さめである点が悪くないなとも感じます。オーバーレイを選択するとスクロール毎に時間差で表示されるの... 続きを読む

Photoshop初心者もOK、写真画像に光と靄を加えて印象的に仕上げる素材とチュートリアル -Flare & Haze | コリス

2013/11/25 56 users Haze ベイス フレア Flare コリス

人物などの写真画像に鮮やかなフレアと柔らかなヘイズを加えて、より印象的にする素材とチュートリアルを紹介します。 Free Download: 6 Flare & Haze Overlays for Photos テクニックの作業工程は、非常に簡単です。 写真画像にダウンロードしたオーバーレイの素材を重ねます。 イメージに合うように、サイズやポジションを調整します。 レイヤーの描画モードはまずは「ス... 続きを読む

自分好みの布地のテクスチャ素材を簡単に作成できるPhotoshopのアクション -Fabric Maker Action | コリス

2013/08/25 65 users コリス テクスチャ 布地 レイヤー Photoshop

自分好みのカラーを使った布地のテクスチャ素材をほんの数秒で作成できるPhotoshopのアクションを紹介します。 Fabric Maker Action 布地のテクスチャはそのまま背景などに使用してもよし、また画像にオーバーレイさせて雰囲気のある写真を作成することもできます。 写真画像に布地のテクスチャ素材をオーバーレイ テクスチャのレイヤーを重ねて、ソフトライトモードにし、テクスチャの重なりがい... 続きを読む

さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG

2013/07/12 137 users jQuery 株式会社LIG コンテンツ 方法

PhotoshopCS5以上を使っているなら…髪の毛の切り抜きは「境界線を調整」がオススメ！ 6834571002 続きを読む

[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ | コリス

2013/06/13 134 users ナビゲーション アニメーション レスポンシブ対応 アイコン

ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 エフェクトは、こんな感じです。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの... 続きを読む

[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月 | コリス

2013/04/21 291 users jQuery lightbox コリス キャプション 補足説明

紹介済みから未紹介のものまで、最近リリースされたjQueryのプラグインをまとめました。 Intro.js ページのガイドを表示します。 Chardin.js オーバーレイでページの補足説明を表示します。 HCaptions 画像ホバーでさまざまなアニメーションでキャプションを表示。 SuperBox レスポンシブ対応で画像を拡大表示します、Lightboxの進化形。 tosrus タッチデバイス... 続きを読む

[JS]実装は簡単！ページの使い方の説明などをかっこよくオーバーレイで表示するシンプルなスクリプト -Chardin.js | コリス

2013/04/04 82 users コリス stylesheet スクリプト 実装 rel

デモページ：オーバーレイ非表示 Chardin.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="chardinjs.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>... 続きを読む

[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート | コリス

2012/06/27 79 users コリス パラグラフ slider CSS スライダー

CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <... 続きを読む

[CSS]パラパラ漫画のように画像を次々に表示させるCSS3アニメーションを使ったスライドショー | コリス

2012/05/11 84 users コリス Alt CSS パラパラ漫画 スライドショー

マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。 デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ！と思いましたｗ デモ：With titles 実装 HTML HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。 <div class="hs-wrapper"> <img src="images/1.jpg" alt... 続きを読む

[JS]普通のとはちょっと違う、オーバーレイのスライド方法が面白いホバーエフェクト | コリス

2012/04/25 79 users コリス class エフェクト div要素 img要素

画像を配置したパネルをホバーすると、各アイテムをまたいでオーバーレイのパネルがスライドするエフェクトを紹介します。 デモ：Inverse 反対の面からスライドするデモです。 実装 HTML 各パネルは画像のimg要素とオーバーレイのdiv要素が一組になっており、リスト要素で実装します。 <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http... 続きを読む

jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技 | Mach3.laBlog

2012/04/16 70 users dialog アニメーシ jQueryUI ダイアログ 要素

jQueryUIのdialogは結構お世話になっているのですが、 たまに欲しい機能がなかったり、あっても説明されてなかったりするので ここにDialogカスタマイズTipsをしたためておきます。 Modalしたダイアログをオーバーレイクリックで閉じる 任意の要素をクリックして閉じる アニメーションで閉じる・開く エフェクト中にオーバーレイの後ろに回りこんでしまうのを回避する 閉じる・開くアニメーシ... 続きを読む

[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル | コリス

2012/04/12 56 users コリス モーダルウインドウ ズームアウト ズームイン CSS

モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>He... 続きを読む

[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb | コリス

2012/04/12 368 users コリス クロップ キャプション リサイズ サムネイル

NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコ... 続きを読む

[JS]ブラウザでiPhoneのような滑らかスクロールを実現するスクリプト -Overscroll | コリス

2011/08/29 65 users iPhone Overscroll コリス Overlay

デスクトップのブラウザでもiPhoneのような滑らかなアニメーションでコンテンツをスクロールさせるjQueryのプラグインを紹介します。 デモページ Overscrollの実装 デモを例に実装方法を紹介します。 HTML スクロールするコンテンツに必要な箇所は「div id=screen」です。 デモでは初期状態ではオーバーレイ（div id=overlay）が表示され、フォーカスされるとスクリー... 続きを読む

[JS]画像の一部を拡大・カラー・くっきり表示するスクリプト -jQuery Loupe | コリス

2011/08/14 53 users コリス jQuery スクリプト カスタマイズ レンズ

拡大画像を表示するレンズの形状やオーバーレイの設定など、豊富なカスタマイズが用意された画像の一部を拡大表示したり、カラーやくっきり表示にするjQueryのプラグインを紹介します。 jQuery Loupe デモページ j [...] 続きを読む