タグ

2015年6月26日のブックマーク (6件)

  • 代替CSS必要無し!jQueryフォントサイズ切り替えプラグイン公開!【JavaScript】 | blog.ks-product.com

    最近はフォントサイズ切り替え機能を導入しているサイトがめっきり減りましたが、未だ「フォントサイズ CSS 切り替え」などといった…2013年11月10日 代替CSS必要無し!jQueryフォントサイズ切り替えプラグイン公開!【JavaScriptWeb制作テクニック ソースファイル配布 JavaScript (JS)jQueryjQuery プラグインサンプルソースコードプログラミングライブラリ作業効率アップ ツイート 最近はフォントサイズ切り替え機能を導入しているサイトがめっきり減りましたが、未だ「フォントサイズ CSS 切り替え」などといったキーワードで訪問される方がいるのでプラグインを作ってみました。 以前はstyleswitcher.jsというフォントサイズ切り替えライブラリが定番でしたが、代替CSSを用意したり、スクリプトが動くようにHTMLを書き換える必要があったりと初心者

  • HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO

    そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け(※自分含む)のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス(parallax)を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript(jQuery)でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu

  • CSSのtext-overflowではみ出したテキストを「…」表示

    CSStext-overflowでellipsisを指定すると はみ出したテキストを、javascriptや、jsp、phpなどを使わなくても省略表示できます。 意外とIEでも6から対応しているので、仕事でも心置きなく使えます。 2014/05/10 制作日誌更新!ある日のランチ風景をレポート! 2014/05/08 movieに予告編xx版を追加しました 2014/05/05 制作日誌更新!主演のxxxxさんを直撃! text-overflowを有効にする4つの条件 text-overflowは、表示領域からテキストがはみ出した場合 末尾に省略記号の「…」を表示するかどうか指定するCSSプロパティです。 そのため、text-overflowが表示領域とはみ出しを認識できるよう 幅指定で「表示領域」をつくって 改行禁止やはみ出し禁止で「はみ出す」概念を準備しないと効果がありません。 幅指

    CSSのtext-overflowではみ出したテキストを「…」表示
  • 色の彩度(濃度)を調整する4つの方法

    色を変更/調整する方法は色々ありますが、その中で彩度を調整する機能を4つほど。 『彩度調整の方法なんてもう知ってる』という方も意外と見落としてるポイントがあるかもしれないので、ぜひザッと確認してみて下さい。 (自分は長いことカラーガイドのステップ数が変更できることに気づきませんでした。) ①カラーパネルで彩度を調整する カラーパネルのカラースライダーを(どれでも一つ)『Shift』を押しながらスライドさせると、各要素が連動してスライドして彩度を変更できます。 (ちなみにアドビのサイトにも『Shift』とだけあるんですが、自分のmacだと『command』を押しながらでも連動します。なんでだろ…。) また、カラーパネルはショートカット(『F6』)の他に、コントロールパネルのスウォッチを『Shift』を押しながらクリックしても開きます。 ②カラーガイドの『ビビッド・ソフトを表示』 カラーガイド

    色の彩度(濃度)を調整する4つの方法
  • Photoshopの使い方: 作業パフォーマンスを向上させる最適な環境設定のまとめ -CC2015対応 | コリス

    Photoshopでの作業がもたついたり、もっときびきび動作させたい、とパフォーマンスを向上させたい時に、見直したいPhotoshopの環境設定の項目を紹介します。 How To Optimize Photoshop For Better Performance 下記は、以前紹介した記事をCC2015対応に編集したものです。 ※翻訳・編集にあたり、元サイト様に許可を頂いています。 ヒストリーとキャッシュ グラフィックプロセッサー 仮想記憶ディスク メモリの使用状況 64ビットモード レイヤーパネル フォントプレビュー UIのアニメーション動作 作業時にパフォーマンスをさげない方法 ヒストリーとキャッシュ Photoshopで作業する際に最初にチェックしておきたい項目は、キャッシュです。キャッシュを必要最小限にすることで、パフォーマンスが向上します。 設定方法 [環境設定] - [パフォーマ

    Photoshopの使い方: 作業パフォーマンスを向上させる最適な環境設定のまとめ -CC2015対応 | コリス
  • インスピレーションを得よう!ロゴデザインの参考に出来るギャラリーサイトまとめ

    最近ではスマホアプリ、Webサービスの増加でロゴ作成の機会も増えてきています。 ニーズも高く重要な要素であるロゴですが、アイデアが浮かばない、どんな手順で作ったらいいかわからないという方も多くいらっしゃいます。 また、実際に作ってみるとどうしてもありがちなロゴになってしまうことも少なくありません。 今回は、ロゴデザインの際に参考にしたいホームページをギャラリー系、参考記事の2つのジャンルから19個ご紹介します。ロゴ作成で悩んでいる、という方は是非デザインのヒントにしてみてください。 ロゴデザインのアイデアにつながるギャラリーサイト 1.logofaves http://logofaves.com/ 大きめのサムネイルがとても見やすいギャラリーサイトです。 1つ1つのロゴが5段階で評価されており、最新、人気順、ランダム、最近お気に入り登録された順で並び替えることができます。 また、ロゴの下に

    インスピレーションを得よう!ロゴデザインの参考に出来るギャラリーサイトまとめ