パララックス効果を使ったウェブデザイン | | DesignWalker
パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac
美しいフリーセリフフォント「20+ Beautiful Free Serif Fonts」
セリフとはタイポグラフィにおいて文字のストロークの端にある小さな飾りを意味します。今日紹介するのはセリフがある美しいフリーフォントを集めたエントリー「Font Resources – 20+ Beautiful Free Serif Fonts」です。 Information/Download タイトル通り、20を超えるセリフフォントが紹介されていますが、今日はその中から気になったセリフフォントをピックアップして紹介したいと思います。 詳しくは以下 ■MUSEO Information/Download ■Bienetresocial Information/Download ■Kontrapunkt Information/Download WIN/Download MAC 上記のように全てのバージョンで、すべての文字を表示したプレビューが制作されていますので非常に見やすく選びやすくなっ
立体的で光沢感のあるボタンを制作するチュートリアル「Creating A Glossy 3D Button」
TOP > Design , Photoshop > 立体的で光沢感のあるボタンを制作するチュートリアル「Creating A Glossy 3D Button」 photoshopを使った立体的で光沢感のあるボタンのチュートリアル「Creating A Glossy 3D Button」を紹介したいと思います。 ただ単に少し立体にしたと言う程度ではなく、光沢という質感もしっかりと表現されていて、クオリティの高いボタンになっています。 詳しくは以下 海外のサイトのチュートリアルは英語で書かれていますが、丁寧に手順を追ってスクリーンショットを見せながら開設されていますし、対象は複雑なものではなくシンプルなボタン一つなので、わかりやすいかと思います。 質感がある分、どんなサイトにでも合うと言うわけではなく、なかなか使いどころはなかなか難しいボタンだと思いますが、チュートリアルで紹介して
雪の結晶を色々集めたベクターデータ集「Snow Flakes Vector Set」 | DesignDevelop
もうそろそろ寒くなり始めてきて、冬の足跡が聞こえてきていますが、広告・デザイン業界ではもうすっかり冬モードだとおもいます。そこで今回紹介するのは冬を演出してくれるデザイン素材、雪の結晶を集めたベクターデータ集「Snow Flakes Vector Set」です。 ベーシックな物から少し変わったものまで全部で、24個のベクターデータが紹介されています。配布されているファイルの形式はeps,pdf.svgとなっていて300dpi (4167×4167)のpngデータも同封されています。 詳しくは以下 ベクターデータで配布されていますので、クリスマスカードからポスターまで様々なデザイン制作物で使うことができるかと思います。そのまま使うのも良いですが、photoshopで加工して、質感や光を与えて使っても良さそうですね。 ライセンスは「Creative Commons Attribution-No
採用情報｜住友電工
2024年4月4日26卒向け・マイページ登録はこちらからお願いします 2024年3月1日25卒向けの本エントリーを開始しました！ 2024年3月1日25卒向けの募集要項を公開しました。
WebデベロッパーのためのFirefoxアドオン50選 – creamu
Firefoxをもっと便利に使いたい。 そんなあなたにおすすめなのが、『The Best 50 Firefox add-ons for Web-developers!』。WebデベロッパーのためのFirefoxアドオン50選だ。 以下にいくつかご紹介。 » JavaScript Debugger 強力なJavascriptデバッガ » IE View 右クリックの拡張からIEの見え方でロードできる » Dummy Lipsum ”Lorem Ipsum”のダミーテキストを自動で生成 » Tab Scope タブにマウスオーバするとプレビューできる » Window Resizer 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200にWindowをリサイズしてくれる その他のリストは以下から。 » The Best 50 Fi
ブラウザのスタイルをリセットするスタイルシート集 | コリス
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:
flabaka.com
AstroでPandaCSSを使ってみるAstroを触ってみようかな？ と思い、まずは公式のチュートリアルを一通り終わらせてみました。以前から気になっていたPandaCSSの勉強も…と思ったので、AstroでPandaCSSを使ってみることに。PandaCSSのインストールマニュアルを見ながら各種設定を終え、npm run devしてみても、CSSが反映されず。原因は単純なミスでした。 LaravelでjQueryを使ってみるデータベースに登録、更新、削除を行なった際に、簡単なflashメッセージを表示させてみようかと。一定時間が経過 or ボタンクリックでメッセージが消えるアニメーションを、jQueryで実装してみたいと思います。npmを使ってインストールしたjQueryを使うと、javascriptの実行順が意図しないものになってしまい、jQueryが実行されなくなってしまいました。色
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]スムーズに開閉する多段型のドロップダウンのナビゲーション | コリス