2chまとめサイトです。ニュースや気になる話題を中心にまとめています。
本日はフラットデザインに対応したドロップダウンメニューが作れるjQueryプラグイン「EasyDropDown」をご紹介。 ↑このようなドロップダウンメニューがjsを読み込むだけで使えるようになります。
フラットデザインは配色が重要といわれています。カラフルなものやレトロなものなどありますが、どれも独特の色使いです。 で、今回はそのサイトがどのような色を使っているのか確認する方法を紹介します。この方法で色んなサイトの配色を見ていくと非常に勉強になると思います。 CSS Prism by Ryan Berg 使い方は簡単。CSSのアドレスを入力するだけです。 CSSから色を抜き出すので画像に使われている色は出てきません。最近はWebフォントを使うなどして画像の数を抑えようとする傾向にありますので、CSSで使われている色を見ればサイトのイメージをつかむことができると思います。 わざわざCSSのアドレスを確認するのは面倒だという方のためにブックマークレットもあります。下の画像のように「CSS PRISM」と書かれた部分をドラッグして、ブックマーク(お気に入り)に保存します。 で、確認したいページ
TOP > Photoshop > コーヒーによる汚れや染みを表現できるPhotoshopブラシのまとめ「20 Sets Of Free Stain Brushes For Photoshop」 ベクターなどではなかなか表現できないリアルな質感を出したい時、Photoshopのブラシは重要なツール。日々新しいフリーブラシが公開され、数多くのライブラリが存在していますが、今日はそんな中からコーヒーによる汚れや染みを表現できるブラシまとめ「20 Sets Of Free Stain Brushes For Photoshop」を紹介したいと思います。 20 Sets Of Free Stain Brushes For Photoshop – Designbeep コーヒーをこぼした時の跳ねや水滴状の汚れ、またコースターについたようなカップの底についた汚れを表現したブラシが紹介されていま
爽やかな鳥のさえずりを聴かせてくれるシンプルなWebラジオ『Birdsong.fm』 『Birdsong.fm』は爽やかな鳥のさえずりを専門に流しているシンプルなWebラジオ。 サイトにアクセスするだけですぐに再生音が開始されます。 こちらのWeb版以外にもiPhoneアプリをはじめWindows Media PlayerやSHOUTcastなどにも対応しており、また、埋め込みプレーヤーも用意されているので下のようにサイト上に貼り付けることも可能です。 目を閉じればのどかな風景が広がる、そんな爽快な気分にさせてくれるちょっといいラジオ。 リラクゼーションにあるいは昼寝のお供にでもいかがでしょうか。
デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール(写真加工・イラスト作成) テキストエディタ(HTML・CSSのコーディング) 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス (編集部注:この記事は2013年08月29日に公開された記事を再編集したものです。) ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは? ワイヤー
Some inspiration for transition effects for off-canvas navigations. Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the side
twitter facebook hatena google pocket 一時SNSアプリPathで話題になったメニューの表示方法をあなたのサイトにも。 ということで、クリックなどでわさっと格納されているメニューが広げて表示できるjQueryプラグインjQuery Wheel Menuです。 sponsors 使用方法 jQuery Wheel Menuからファイル一式をダウンロード。 <link href="wheelmenu.css" media="all" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="jquery.wheelmenu.js"></script> <script type="text
2021年10月21日 便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう! ↑私が10年以上利用している会計ソフト! ダミーテキスト(英文) Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ&ドロップでカスタマイズできます。類
Nivo Lightbox - Dev7studios フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 次のようにシンプルなフラットデザインを採用したLightBoxが実装できます。 こういうところまでフラット化の波が押し寄せています。ざっぱ〜ん。 フラットなようで若干シャドウを使って立体的に見せているあたりもカッコいい。 iFrameやSWF,Youtube,Vimeoなどにも対応していてかなり使い勝手がよさそうです。 関連エントリ 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 LightBoxはここまで進化したよ「VisualLightBox」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」
ColorScope.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。 インターネットの裾野が広がるのに合わせてWebページのアクセシビリティは大事な要件になってきました。今回は色覚異常を再現するブックマークレットColorScope.jsを紹介します。 ブックマークレットを実行すると、様々な色覚異常の条件が表示されます。 一つ実行しました。暖色系の色がぐっと弱まったのが分かるかと思います。 また別なブックマークレット。背景色が変わりました。 こちらは全体的に色味がなくなり、茶系になっています。 さらに別なものはグレー系の色合いになっています。 ColorScope.jsを使うとテキストはもちろんのこと、画像も色が変わっています。これはCanvasを使って画像を変換しているとのことです。ただし外部ドメインの画像に対しては適用されないとのことなのでご
TOP > Design > ビジネスシーンのデザイン表現に利用したいフリーベクター素材「25 Free Business and Finance Vectors」 硬めで堅実なイメージを表現することが多いビジネス系のデザインですが、内容を分かりやすく伝えるために、イラスト等のビジュアル素材を使うこともあるのではないでしょうか?今回はそんな時に参考にしたいフリーベクター素材「25 Free Business and Finance Vectors」を紹介したいと思います。 (Businessmen Graphics) 仕事をするシーンをイメージさせる素材から、金融関連の素材など、ビジネスシーンで目にすることが多いビジュアルのベクター素材がまとめられています。 詳しくは以下 ■Business Presentation – Vecteezy! – Download Free Vect
プロダクト写真制作のためのモックアップ用テンプレート配布サイト『PSDCovers』 『PSDCovers』はさまざまなプロダクト写真のモックアップ用テンプレートを無料配布しているサイト。 それぞれのテンプレートはPhotoshopのアクションファイル(ATN)の形で配布されており、半自動でオリジナルの製品プロダクト写真が作成でき、プロモーションやその他で利用することができます。 使い方はPhotoshopユーザーなら簡単で、基本的に面倒な処理はすべてアクションとしてスクリプト化されているので、やることは必要最小限の作業だけです。 先ずは作成したいアクションをダウンロード・解凍した後Photoshopで開きます。 大まかな流れとしては「STEP 1...」のアクションを実行しベースとなる2D画像を出力します。 そこに自分が載せようとしているプロジェクトの画像を挿入します。 (デフォルトで含
Googleのスプレッドシートをデータベースのように利用出来るようにするスクリプト・Sheetsee.jsのご紹介。シートを元にグラフや地図などを作成出来るみたいです。 スプレッドシートをDB化する、というライブラリです。利用するには他のいくつかのライブラリを併用して実装するようですね。 利用するにはいろいろと前準備が必要です。 シートの書き方もルールに沿う必要があります。 スプレッドシートは公開設定にし、Tabletop.jsでデータを取得します。 長くなるので詳細は本サイトをご確認ください。Sheetsee.jsを使った動作サンプルもあるので合わせてご覧頂ければと思います。 ライセンスはBSDとの事です。触る暇があれば触って見たいです。 Sheetsee.js
クロスブラウザを意識した「transitionend 」 CSS Niteビギナーズ:HTML5+CSS3でwebKitTransitionEnd を紹介したところ、「クロスブラウザでどうするの?」と質問をいただいたので補足しておきます。 次のようなtransitionアニメーションがあったとして、 div{ background: #FF0000; border: 1px solid black; width:100px; height: 100px; margin:20px; position: relative; -webkit-transition:all 400ms linear; -moz-transition:all 400ms linear; -ms-transition:all 400ms linear; -o-transition:all 400ms linear; t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く