2015年5月21日のブックマーク (7件)

  • 無料アイコンを探す時に必ずチェックしたいダウンロードサイトのまとめ

    Webページやプレゼンの資料やお店のフライヤーなど、法人でも個人でもWebサイト・ブログ・映像・アプリ・ゲーム・紙で無料利用できるフリーのアイコン素材を紹介します。 WebページにはアイコンフォントSVGアイコン、紙にはPNGアイコン、デザインもベーシックなものからちょっと変わった面白いものまで、見ているだけで楽しめるアイコンばかりです。 Fontello Font Awesome, Entypo, Typicons, Iconicなど、メジャーサイトのアイコンを自由に組み合わせて、自分用のアイコンセットを作成してダウンロードできます。 Webサイトで使うベーシックでシンプルなものなら、ここだけで足りるでしょう。 ライセンスは各アイコンごとに異なりますが、SIL, BSD, MITのオープンソースのものが主です。

    無料アイコンを探す時に必ずチェックしたいダウンロードサイトのまとめ
    kumi-fj
    kumi-fj 2015/05/21
    アイコン
  • 実装は超簡単!デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー

    スピナーの実装 実装は、簡単です。 「弾むボール」を例に、説明します。 Step 1: 外部ファイル 各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="http://css-spinners.com/css/spinner/ball.css" type="text/css"> </head> CSSは個別用と全部用があり、全部用は「spinners.css」です。 <head> ... <link rel="stylesheet" href="http://css-spinners.com/css/spinners.css" type="text/css"> </head> Step 2: HTML あとは、各スピナーに用意されているHTMLをコピペするだけ。 他のスピナーもclassを

    実装は超簡単!デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー
    kumi-fj
    kumi-fj 2015/05/21
    css
  • 水色のような薄い青空をPhotoshopで深みのある色に補正するやり方 – bl6.jp

    写真を撮った後にパソコンで見返した時なんかに「空の青さが薄いなぁ」と思う時が多々あります。そんな時にPhotoshopで手軽に深みのある青�に補正するやり方をご紹介します。単純に彩度を上げるだけでは解決できない時にオススメです。 特定色域の選択 例えばこのような水色の空があったとします。 これを深みのある色に補正するために、まず調整レイヤーから「特定色域の選択」をクリックします。レイヤーパネルの下にあるアイコンから選ぶことができます。他にも上部メニューから「レイヤー」→「新規調整レイヤー」→「特定色域の選択」でもOKです。 「絶対値」にチェックが入っていることを確認したら、カラー項目から「シアン系」選択します。 薄い青を深みのある青にするためには「シアン」と「マゼンダ」のスライダーを右に動かして値を強めていきます。 これで以下のような色にすることができました。 補正前と比べるとだいぶ青さが

    水色のような薄い青空をPhotoshopで深みのある色に補正するやり方 – bl6.jp
    kumi-fj
    kumi-fj 2015/05/21
    photoshop
  • 豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」 – bl6.jp

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。 以下のページからPogo Sliderの実際のデモを確認することができます。 デモ デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。 オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい�方にはピッタリですね。 自動再生やレスポンシブのオン/オフなどを指定することができます。 使い方はこんな感じでマークアップしていきます。 <div class="pogoSli

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」 – bl6.jp
    kumi-fj
    kumi-fj 2015/05/21
    スライダー
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
    kumi-fj
    kumi-fj 2015/05/21
    web
  • ゴーストボタンにマウスを乗せたときの動きいろいろ16個

    昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt

    ゴーストボタンにマウスを乗せたときの動きいろいろ16個
    kumi-fj
    kumi-fj 2015/05/21
    css
  • ゴーストボタンと相性が良さそうなホバーエフェクト 10+ - NxWorld

    メモしていたものが溜まってきて一覧化したのでシェアします。 以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。 もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使ってみてください :) 閲覧の際にChromeまたはFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

    ゴーストボタンと相性が良さそうなホバーエフェクト 10+ - NxWorld
    kumi-fj
    kumi-fj 2015/05/21
    css