ラベル webdesign の投稿を表示しています。 すべての投稿を表示
ラベル webdesign の投稿を表示しています。 すべての投稿を表示

木曜日, 10月 13, 2016

Google、カラーピッカー機能を搭載

Googleウェブ検索がカラーピッカー機能を搭載。

16進およびRGBで検索、CMYKなども確認可能

 

 





なんでも検索エンジンGoogleが、カラーピッカー機能を搭載しました。

カラーピッカーというと、画像処理ソフトならほぼ確実に搭載している16進カラーコードと色の相関を確認するための機能。

たとえば #66cdaa というワードでGoogle検索すれば、、カラーマップとともにパステル系の緑色が画面に表示されます。

表示されたカラーマップ上のドットをドラッグすれば、その場所に対応する色を目で確認できるとともに、その16進カラーコードとRGBコードを知ることができます。

また「Show Color Values」をクリックすれば、その色を16進、RGB、HSV、HSL、CMYKといった各種カラーコードでも確認できます。
たとえば、先ほどの #66cdaa は cmyk(50%, 0%, 17%, 20%) に対応していることがわかります。

なお、このカラー検索機能は16進コードのほかRGBでも検索が可能。
rgb(102, 205, 170)で検索すれば #66cdaa を検索したのと同じ結果が得られます。ただ、16進とRGB以外のカラーコードや、HTMLで色指定するときに使える色名称(#66cdaa の場合は mediumaquamarine)での検索はできません。






カラーピッカーはデザイン系の仕事をする人にとっては日常的なツールであり、古くからその機能を提供しているウェブサイトもごまんとあったため、いまこのタイミングでGoogleが搭載したことはけっこう意外です。




ただ、Googleは理念として「あらゆるものを検索可能にする」という野望を掲げているので、カラー検索を搭載していないという事実に中の人が気づいたとき、もう無視することはできなかったのかもしれません。



ちなみに、Googleのカラー検索機能はスマートフォンでも利用可能。画面のドットを指先で動かしてその位置の色を確認することもできます。








source: Reddit




その他のおすすめ記事

「Spector」フォントの名前がフォントにわかるツール

水曜日, 9月 03, 2014

Web制作で使える使えた!jQueryプラグインまとめ

Web制作で使える使えた!jQueryプラグインまとめ

jquery_plugin_gallery
今回は「Web制作で使いたい使える」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。


もくじ

動画

WP管理画面

テキストエフェクト

エフェクト

メニュー

スライド


動画

1.動画をブラウザの背景全体に再生させる

background-video-browser_jquery
最近ではサイズ大きめの通信が可能になりつつあり、動画を使いインパクトを出すページが増えてきました。こちらはYouTubeにアップロードされた動画を背景全体に表示させるtubularというプラグイン。動画を背景にするならこれがイチオシです。

2.動画を綺麗に表示させる

nicely-video_jquery
YouTubeをページにそのまま埋め込むと、上下に黒のバーがつき、YouTube感が出るので見栄えが今ひとつです。こちらは動画をシンプルに表示させるためのPrettyEmbedというプラグイン。もう一つは動画をポップアップさせるプラグイン。


WP管理画面

WordPressの管理画面をカスタマイズするときにフロントページの配色(カラーピッカーでの)の変更やファイルをアップロードしたりする機能を付けたい。そんな一歩進んだカスタマイズをしたいときに知っておくと便利なものをメモしておきます。

3.カラーピッカー

color-picker_jquery
管理画面にて背景色やメインカラーをユーザーに選択してもらいたい場合、カラーコードを入力させるより、カラーピッカーでの選択をさせたい。そんな時はこちらのFarbtastic Color Pickerを使います。

4.ドラッグ&ドロップでファイルをアップロード

upload-file-drag-and-drop_jquery
管理画面からロゴ画像やファビコンなどを直接アップロードさせられるようにカスタマイズしたい。そんなときはこちらのPluploadというファイルアップローダが便利。

5.並べ替え+DBに保存

sorting_jQuery_jquery
ドラッグ&ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。


テキストエフェクト

6.文字を動かしならがテキスト表示

move-text_jquery
国産のコーポレートサイトを見ているとたまにみかける、文字を動かしながら表示するエフェクト。

7.フォントサイズを変更

change-font-size_jquery
スクリーンサイズに応じてフォントサイズを変更させるレスポンシブなプラグインfontFlex。ブラウザのサイズに応じて自動でサイズを調整してくれます。

8.文字の拡大・縮小

scaling-character_jquery
来訪者に文字のサイズ調整を選択させるには、Text Resizerを使うと実現できます。スタイルが古めなのでCSSで今風に調整しましょう。

9.数字のカウントアップ

count-up-number_jquery
指定した数字までエフェクトをかけながらカウントしてくれるライブラリcountUp。WP有料テーマなどでよく見かけます。

10.読み込み時に文字を動かす

move-character_jquery
FlashのようにJavaScriptでアニメーションを実現する書き方でsetTimeoutを使っています。jQueryでフェードインなどを○秒後に実行する場合はsetTimeoutopacityを使います。


エフェクト

11.波紋

moire_jquery
マテリアルデザインで採用されている波紋エフェクトを実装できるtwinkle

12.ドラッグで画像を回転

image-dragging_jquery
画像を掴むと動かした方向へ回転させることが可能になるThreeSixtyRotate

13.ボタンを3Dで回転

rotate-3d_jquery
クリックすることで上下左右と立体的に回転させることができるTURNBOX。縦横幅、回転軸、アニメーションの時間、回転方向などを指定可能です。

14.要素が見えたタイミングでイベントを発生

スクロールされた箇所でイベントを発生させるinviewを使い、ブラウザ上で見えたときに処理を実行させます。


メニュー

15.メニュー以外を暗くするメガドロップダウン

megadrop-dark_jquery
ナビゲーションメニューの大カテゴリをマウスホバーしたときに、サブメニューをamazonメガドロップのように見せたい。こちらはメニュー以外を暗くするオーバーレイエフェクトつき。

16.簡単にナビゲーションメニューをレスポンシブへ

responsive-navigation-easily_jquery
筆者が使った中で一番簡単に実装可能だったのでオススメ。

17.タブからアコーディオンに切り替え

switch-accordion-tab_jquery
スマホ表示の際、タブのままだと使いにくそうだと感じたら、ブレークポイントでタブをアコーディオンに変更させるResponsive-Tabsを使います。

18.クリックすると上部に拡大画像/フォトギャラリー

enlarge-image_jquery
写真をクリックすると上部に拡大画像を表示します。開閉時のエフェクトが気持ちよいですよ。


スライド

19.4分割表示

split-display_jquery
4つのタイル型スライドのチュートリアル。こういった見せ方もあるんだなということでメモしておきます。

20.マウス操作でスライドを移動させる

move-mouse_jquery
画像をマウス操作で移動させるチュートリアル。以下で使われているDragdealer.js – drag provider, the good stuffではドラッグで要素を移動させることが可能です。


21.IE8以下でもCSS3のbackground-sizeを使えるように

background-size-ie8_jquery
横幅ピッタリなページが増えてきましたが、IE8以下でもbackground-sizeプロパティを使えるようにしたい。そんな時はこちら。

22.要素を上下左右中央にフィットさせる

vertical-horizontal_jquery
画像などを上下、左右、中央にフィットさせるJSライブラリ。





  Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法