タグ

2016年10月6日のブックマーク (11件)

  • CSS スタイルシート制作を楽にする!知っておきたい便利ツール25選まとめ

    海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ

    CSS スタイルシート制作を楽にする!知っておきたい便利ツール25選まとめ
  • 最新トレンドにも対応!コピペで使える実用性重視なCSSボタン9選

    Web制作をする際に必ずと言っていいほど必要になるのが「ボタン」です。 今はCSSのみで作られているボタンが主流で、たくさんのライブラリやスニペットが出回っていますが、作っているサイトによってはアニメーションが過剰すぎたり、トーンが合わない場合も出てきます。 そこで今回は派手でかっこいいアニメーションというより、実用性や汎用性を重視したボタンに厳選して、コピペでお手軽に使用することができるCSSのボタンをいくつかご紹介します。少しお洒落にスタイリング・アニメーションしたいけど、そこそこでいい…と思っている方向けの厳選セレクションです。 コピペですぐ使える実用性の高いCSSボタン サイト上でカスタマイズするものより、もう少し高度なデザインをお求めの方は以下のサイトをご参考下さい。こちらは既に出来上がっているデザインのソースをダウンロードするタイプになりますので、カスタマイズには少々スキルが必

    最新トレンドにも対応!コピペで使える実用性重視なCSSボタン9選
  • CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選

    コンテンツに注目を集めたいときに便利な、HTML/CSSを中心にデザインした最新ボタンエフェクト用スニペットをまとめてご紹介します。 すこし前までは実現が難しかったエフェクトも、CSS3をつかったテクニックを利用することでより手軽に実現できるようになっています。世界中のデザイナーが作成したボタンデザインを確認しながら、マイクロインタラクションなど最先端のデザイントレンドを、プロジェクトに取り入れてみてはいかがでしょう。 詳細は以下から。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックし、別ウィンドウを開きま

    CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選
  • CSS3の新体験!コピペできるテキストエフェクト用HTMLスニペット30個まとめ

    すこし前まで文字テキストをデザインするには、Photoshop や Illustratorといったデザインツールを利用していましたが、CSS3の進化によってこれまでは実現がむずかしかったデザインも、コードのみで作成、スタイリングできるようになってきています。 今回は、コピペで利用できるテキストエフェクト用HTMLコードスニペットをまとめてご紹介します。CSS3など新しいテクニックで実現する手軽なテクニックから、ユーザーの注目を集める面白エフェクトまでが揃います。今後のデザインプロジェクトに活用してみてはいかがでしょう。 詳細は以下から。 CSS3の新体験!コピペできるテキストエフェクト用HTMLスニペットまとめ 「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できま

    CSS3の新体験!コピペできるテキストエフェクト用HTMLスニペット30個まとめ
    labduck
    labduck 2016/10/06
  • 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ

    CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

    背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
    labduck
    labduck 2016/10/06
  • かっこいいロゴデザイン作成のための参考サイト10選+α | UX MILK

    ロゴデザインはプロダクトやサービスのアイデンティティともなる大事なデザイン要素です。 一度制作すると様々なものに繰り返し利用されることが多く、載せる媒体によってサイズや色の制限などが発生し、シンプルに見えるものでも作るとなると難易度は高いものです。 そんな製作者の頭を悩ませる機会の多いロゴデザインですが、制作するにしろ、誰かに制作してもらうにしろ、たくさんのロゴを見るところから始めると良いでしょう。今回はロゴデザインの参考になるサイトを厳選してご紹介します。 ロゴデザインの参考になるサイトまとめ Logaster [PR] Logasterはロゴを自動で作成してくれるWebサービスです。サインインして、任意の文字列と条件を入力するだけでたくさんのロゴを瞬時に作成してくれます(スモールサイズなら無料で利用可能です)。 また、他のユーザーによって作成されたロゴもギャラリーとして閲覧することがで

    かっこいいロゴデザイン作成のための参考サイト10選+α | UX MILK
    labduck
    labduck 2016/10/06
  • コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ

    ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を2分割し、スク

    コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
    labduck
    labduck 2016/10/06
  • デザインの現場ですぐ使える、おしゃれな無料パターン素材38枚まとめ

    Photoshop の便利なデザインツールの中で、デザインをガラリと変えることができる機能のひとつが、パターン素材です。選択した範囲を、手軽に継ぎ目なく塗りつぶすことができ、ウェブデザインや広告バナー、プレゼン資料など、さまざまなデザインの背景にも利用されています。 今回は、デザインですぐに使えるパターンテクスチャ素材をまとめてご紹介します。どんなデザインにも合わせやすいシンプルな素材から、人気の和柄パターン、水彩ペイントや手描きなナチュラル系アイテムなどかわいい素材が豊富に揃います。どれも無料ダウンロード可能となっているので、今後のデザイン制作に活用してみましょう。 詳細は以下から。 デザインの現場ですぐ使える、おしゃれな無料パターン素材まとめ Free Photoshop Halftone Patterns 用意したアートワークや写真にパターン素材を重ねるだけで、質感をグッとアップでき

    デザインの現場ですぐ使える、おしゃれな無料パターン素材38枚まとめ
  • 無料で商用利用できる便利なアイコンフォント10選 | UX MILK

    Webサイトやアプリでは欠かせない要素であるアプリですが、アイコンフォントを使うことで手軽に数多くのアイコンに対応することができます。 アイコンフォントは画像と異なり、CSSのみでサイズやカラーが変更できます。また、読み込みが画像に比べて計量であり拡大しても綺麗に表示することが可能です。 今回は、無料で商用可能なアイコンフォントを紹介します。また、CDNに対応しているものも多く、ローカルにダウンロード不要で手軽に使うことができます。ぜひ活用してみてください! Font Awesome Font Awesomeは全634種類のアイコンフォントを提供しています。Webサイトやアプリなどで利用するフォントが数多く取り揃えられています。 ・ダウンロード先:http://fontawesome.io/ ・CDN提供先:https://www.bootstrapcdn.com/fontawesome/

    無料で商用利用できる便利なアイコンフォント10選 | UX MILK
  • Open Color

    Optimized for UI like font, background, border, etc.

    Open Color
    labduck
    labduck 2016/10/06
    色覚異常でも識別できるカラーパレット
  • 20160930 フロントエンド高速化 業務編 (社内勉強会)

    This document discusses messaging queues and platforms. It begins with an introduction to messaging queues and their core components. It then provides a table comparing 8 popular open source messaging platforms: Apache Kafka, ActiveMQ, RabbitMQ, NATS, NSQ, Redis, ZeroMQ, and Nanomsg. The document discusses using Apache Kafka for streaming and integration with Google Pub/Sub, Dataflow, and BigQuery

    20160930 フロントエンド高速化 業務編 (社内勉強会)