イラストやデザインの質感アップに使える!鉛筆や木炭やペンキ、ふわっとした女子服、ぼけ・光・煙・霧などを描くPhotoshopのブラシのまとめ

チャコールやインクやペンキやペンなどのストローク系をはじめ、レースとかファーとか女子服のふわっとした質感、光やぼけの美しいエフェクト、他にも炎や煙や雪や水など、そのクオリティがすごいPhotoshoopのブラシ素材を紹介します。

お絵描きにもよし、デザインのアクセントや質感を加えたりとPhotoshopをパワーアップするものばかりが揃っています。

素材のキャプチャ

Realistic Charcoal Brush
個人・商用利用無料。

素材のキャプチャ

62 Ink Brushes
個人・商用利用無料。

続きを読む

[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック

ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。

ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。

デモのアニメーション

続きを読む

[CSS]Flexboxで実装されたグリッドをはじめ、基本となるコンポーネントやページレイアウトのまとめ

ベースとなる12カラムのグリッド、コンテンツとサイドバー、左寄せ・中央配置・右寄せ、ネストしたコンテンツ、天地揃え、ヘッダ・フッタ付きの3カラムのページレイアウトなど、それぞれをFlexboxを使って実装したレスポンシブ対応のスタイルシートを紹介します。

サイトのキャプチャ

Responsive Grid with Flexbox

続きを読む

スキャンした下絵や線画から1クリックで主線を抽出するPhotoshopのアクション -Lineart Separate

個人でも商用でも無料で利用できる、下絵や線画から1クリックで主線を抽出するPhotoshopのアクションを紹介します。

数手間かかるのが、1クリックでできちゃうと楽ちんですね。

サイトのキャプチャ

Photoshop Action: Separate Lineart or Sketch from White Background

続きを読む

[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro

デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。
今必要とされるさまざまな機能を備えています。

「Pro」がついてるから有料?って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。

サイトのキャプチャ

Slider Pro
Slider Pro -GitHub

続きを読む

しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則

レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。

レスポンシブWebデザインをより深く理解するための基本原則を紹介します。

サイトのキャプチャ

9 basic principles of responsive web design

続きを読む

スタイルシートの検証に便利!ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig

表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。

マージンが期待通りにならない、カラーの指定がおかしくないかなど、CSSのチェックに大活躍する機能拡張です。

サイトのキャプチャ

CSS Dig
CSS Dig -GitHub

続きを読む

[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ

最近のWeb制作に役立つ、Sassのmixinのまとめを紹介します。

サイトのキャプチャ

15 essential Sass mixins

続きを読む

 1 2 3 4 5 ... 590 591 Next

top of page

©2014 coliss