月別アーカイブ: 2017年5月

CSS 画像にホバーすると文字が出てくるエフェクトを作る方法

今回は、画像にホバーすると文字情報が表示されるエフェクトを作る方法を紹介します。CSS3のアニメーションや変形と組み合わせると、かなり色々なエフェクトを作ることができますが、ここでは一番シンプルなエフェクトを紹介します。

画像にホバーすると文字が出てくるエフェクトの作り方

DEMO

ホバーで文字が出てくるエフェクトのデモ

まずはデモをご覧ください。ホバーすると画像が白っぽくなり、文字がふわっと浮き上がります。このような見た目のエフェクトを作る方法は色々ありますが、今回は以下のような構造にしています。

  • 画像をdiv要素の背景に指定
  • 文字はdivの子要素の p に入れる
  • オーバーレイ(画像の上に乗せる色)を div の疑似要素 ::before で作成

文字の p 要素とオーバーレイの ::before は、普段 opacity: 0; で透明にしておき、ホバー時に opacity: 1; で表示されるようCSSを書きます。

CSSを書くときは、ホバーの指定をするセレクタの書き方がポイントになってきます。上の構造では「divにホバーした時のp要素」と「divにホバーした時の::before疑似要素」を表すセレクタを使います。

  • divにホバーした時のp要素「div:hover p
  • divにホバーした時の::before疑似要素「div:hover::before

以下に、具体的なコードを載せます。

コードの例

HTML

<div>
 <p>当店のパンはすべて自家製。<br>焼きたてをご提供しています。</p>
</div>

CSS

div {
 position: relative;
 width: 640px;
 height: 426px;
 margin: 50px auto;
 border: 1px solid #dfdfdf;
 background: url(../images/bread.jpg); /*画像は背景で指定(divの中にimg要素を入れ子にしてもOK)*/
 }
 div::before { /*オーバーレイ(画像に色を被せる)のスタイル*/
 content: "";
 position: absolute; /*positionがないとheight:100%;が効かない*/
 width: 100%; /*div要素いっぱいに広がるようにする*/
 height: 100%; /*div要素いっぱいに広がるようにする*/
 background: rgba(255,255,255,0.70);
 }
 p {
 position: relative;
 top: 50%; /*p要素を垂直方向中央に表示*/
 color: #222;
 font-size: 160%;
 text-align: center;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%); /*p要素を垂直方向中央に表示*/
 }
 div::before,
 p {
 opacity: 0; /*普段は文字とオーバーレイを透明にしておく*/
 -webkit-transition: 1s;
 transition: 1s;
 }
 div:hover p,
 div:hover::before {
 /*「divにホバーした時のp」と「divにホバーした時のbefore疑似要素」に対してスタイル指定*/
 opacity: 1; /*ホバー時に文字とオーバーレイを表示*/
 }

オーバーレイの疑似要素や文字をアニメーションで動かすと、色々なバリエーションを作ることができます。ぜひ試してみてください。

Photohop 斜めに色分けされた文字の作り方2

斜めに色分けされたテキスト

前回の記事の続きで、Photoshopで斜めに色分けされたテキストを作る方法を紹介します。

手順

前回の記事で手順5まで解説しました。今回は手順6から解説します。「選択範囲を読み込む」の使い方がポイントです。

  1. テキストを入力する
  2. 長方形ツールでパスを作成する
  3. 長方形のパスのアンカーポイントを1つ削除し、三角形を作る
  4. 三角形のパスから選択範囲を作成する
  5. 三角形の選択範囲を保存する ←前回の記事でここまで紹介
  6. 文字の形の選択範囲を作成する
  7. 「選択範囲を読み込む」で「現在の選択範囲との共通範囲」を読み込む
  8. べた塗りレイヤーを作成する(レイヤーマスクがかかる)
  9. もう一度文字の形の選択範囲を作成する
  10. 「選択範囲を読み込む」で「現在の選択範囲から一部削除」して読み込む
  11. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

6. 文字の形の選択範囲を作成する

テキストレイヤーのサムネイル( T のマークが表示される部分)を Ctrl+クリック し、文字の形の選択範囲を作成します。

7. 「選択範囲を読み込む」で「現在の選択範囲との共通範囲」を読み込む

現在の選択範囲との共通範囲で読み込む

選択範囲>選択範囲を読み込む で選択範囲を読み込みますが、このとき、「現在の選択範囲との共通範囲」にチェックを入れて読み込むことで、文字の選択範囲と三角形の選択範囲が重なっている部分のみ選択されます。

8. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

べた塗りレイヤーを作成

作成した選択範囲を塗りつぶしますが、ここではレイヤーパネル下部の「塗りつぶしまたは調整レイヤーを新規作成」ボタンから「べた塗りレイヤー」を作成します。選択範囲がある状態でべた塗りレイヤーを作成すると、自動でマスクがかかります。

9. もう一度文字の形の選択範囲を作成する

今度は文字の反対側を選択します。テキストレイヤーのサムネイルを Ctrl+クリック して、もう一度文字の形の選択範囲を作成します。

10. 「選択範囲を読み込む」で「現在の選択範囲から一部削除」して読み込む

現在の選択範囲から一部削除で読み込む

先ほどと同じように「選択範囲を読み込み」しますが、このとき「現在の選択範囲から一部削除」のチェックボックスにチェックを入れることで、文字の選択範囲から三角形の選択範囲と重なる部分を削除して選択されます。

11. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

先ほどとは違う色でべた塗りレイヤーを作成して完成です。テキストレイヤーは非表示にしてしまってかまいません。

Photohop 斜めに色分けされた文字の作り方1

斜めに色分けされたテキスト

今回の記事では、上の画像のような、斜めに色分けされたテキストの作り方を紹介します。Photoshopで作成しますが、「選択範囲を読み込む」の使い方がポイントです。手順が長くなりますので、2回の記事に分けて紹介します。

手順

以下のような手順で作成できます。

  1. テキストを入力する
  2. 長方形ツールでパスを作成する
  3. 長方形のパスのアンカーポイントを1つ削除し、三角形を作る
  4. 三角形のパスから選択範囲を作成する
  5. 三角形の選択範囲を保存する ←今回の記事でここまで紹介
  6. 文字の形の選択範囲を作成する
  7. 「選択範囲を読み込む」で「現在の選択範囲との共通範囲」を読み込む
  8. べた塗りレイヤーを作成する(レイヤーマスクがかかる)
  9. もう一度文字の形の選択範囲を作成する
  10. 「選択範囲を読み込む」で「現在の選択範囲から一部削除」して読み込む
  11. べた塗りレイヤーを作成する(レイヤーマスクがかかる)

1. テキストを入力する

文字を入力します。色の境目がはっきりわかるような、太めの文字が映えます。

2. 長方形ツールでパスを作成する

文字を囲むように四角形のパスを作成

長方形ツールで「パス」を描く設定にして、文字全体が納まる長方形を作成します。

3. 長方形のパスのアンカーポイントを1つ削除し、三角形を作る

三角形のパス

ペンツールを使って、長方形の角のアンカーポイントを1つ削除し、三角形のパスにします。

4. 三角形のパスから選択範囲を作成する

パスパネルで選択範囲を作成

パスパネル下部の「パスを選択範囲として読み込む」ボタンをクリックし、三角形のパスから選択範囲を作成します。

5. 三角形の選択範囲を保存する

チャンネルに保存された選択範囲

選択範囲>選択範囲を保存 で、三角形の選択範囲をアルファチャンネルで保存します。 続きは、次回の記事で紹介します。

CSS3 CSSだけでいろいろな形の吹き出しを作る方法4 ~出っ張った部分がカーブした吹き出し~

出っ張り部分がカーブした吹き出し

3回にわたってCSSだけで吹き出しを作る方法を紹介しました。今回は、上の画像のような出っ張った部分がカーブした吹き出しの作り方を紹介します。今回の記事でCSSの吹き出しについては最後です。

出っ張った部分がカーブした吹き出しの作り方

出っ張り部分がカーブした吹き出しの作り方

カーブを表現するために、疑似要素の ::before と ::after を両方使います。背面の疑似要素は吹き出しの色にし、前面の疑似要素は背景の色にします。疑似要素はどちらも、要素本体の背面に表示したいので、z-index: -1; を指定して重ね順を変えます。

出っ張った部分がカーブした吹き出しのコード例

HTML

<p>sample</p>

CSS

body { background: #EEE; }
p{
 position: relative;
 width: 200px;
 height: 50px;
 margin: 30px;
 font-size: 18px;
 color: #fff;
 line-height: 50px;
 text-align: center;
 background-color: #009D78;
 border-radius: 10px;
}
p::before,
p::after {
 content: "";
 position: absolute;
 z-index: -1;
 width: 35px;
 height: 35px;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 bottom: -12px;
 left: 36%;
 background-color: #009D78;
}
p::after{
 bottom: -16px;
 left: 30%;
 background-color: #EEE; /*背景の色を指定*/
}

DEMO

出っ張り部分がカーブしている吹き出しデモ

CSS3 CSSだけでいろいろな形の吹き出しを作る方法3 ~考えているときの吹き出し~

前々回の記事前回の記事と、CSSだけで吹き出しを作る方法を紹介してきました。今回の記事では、漫画などで「考えていること」を表すときに使われる吹き出しのCSSを紹介します。

考えているときの吹き出しの作り方

考えているときの吹き出しの作り方

普通の吹き出しでは三角形になる部分が、この形の吹き出しでは円形になります。この部分は疑似要素の ::before と ::after を両方使って表現します。円形を作るには、widthとheightを指定したうえで、border-radiusの値を50%に指定します。

疑似要素の円の位置は、bottom や left で様子を見ながら調整してください。

考えているときの吹き出しのコード例

HTML

<p>sample</p>

CSS

p{
 position: relative;
 width: 200px;
 height: 80px;
 margin: 30px;
 font-size: 18px;
 color: #FFF;
 line-height: 80px;
 text-align: center;
 background-color: #009D78;
 border-radius: 50%;
}
p::before,
p::after {
 content: "";
 position: absolute;
 background-color: #009D78;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 width: 22px;
 height: 22px;
 bottom: -12px;
 left: 42%;
}
p::after{
 width: 14px;
 height: 14px;
 bottom: -26px;
 left: 35%;
}

DEMO

考えているときの吹き出し

次回記事では、普通の吹き出しで三角形の部分が、カーブした形になっている吹き出しの作り方を紹介します。次回の記事でCSSの吹き出しについては最後です。

CSS3 CSSだけでいろいろな形の吹き出しを作る方法2 ~ふち付きの吹き出し~

前回の記事で、CSSだけで作る基本の吹き出しを紹介しました。今回は、基本の吹き出しに少し手を加えた、ふち付きの吹き出しの作り方を紹介します。

ふち付きの吹き出しの作り方

ふち付きの吹き出しは、前回の記事で紹介した基本の吹き出しに少し手を加えれば作ることができます。基本の吹き出しと違うのは、要素本体にボーダーを付けることと、擬似要素で作る三角の部分に ::before と ::after を両方使うところです。

ふち付き吹き出しの作り方

吹き出しの三角形の部分は、擬似要素で作った2つの三角形を少しずらして重ね、ふちを表現します。背面の三角形はふちの色、前面の三角形は吹き出しの中の色にし、前面の三角形を上にずらします。どの程度ずらすかは、ブラウザで表示して様子を見ながら調整してください。正確にふちの幅を出したい場合、三角関数の計算になると思います。

また、縁の色をした三角形が吹き出しの上に表示されないように(三角形の縁が食い込まないように)、z-index: -1; を指定して要素本体より背面に表示させます。

ふち付きの吹き出しのコード例

具体的には以下のようなコードになります。

HTML

<p>sample</p>

CSS

p{
 position: relative;
 width: 200px;
 height: 50px;
 border: 1px solid #009D78; /*ボーダーを設定する*/
 margin: 30px;
 font-size: 18px;
 color: #009D78;
 line-height: 50px;
 text-align: center;
 background-color: #FFF; /*吹き出しの内側の色を指定する*/
 border-radius: 10px;
}
p::before{
 content: "";
 position: absolute;
 z-index: -1; /*要素本体より背面に表示*/
 bottom: -12px; /*::afterより下に表示*/
 left: 50%;
 margin-left: -10px;
 border-style: solid;
 border-color: #009D78 transparent transparent transparent; /*ふちの色の三角形を作る*/
 border-width: 15px 10px 0 10px;
}
p::after{
 content: "";
 position: absolute;
 bottom: -10px; /*::beforeより上に表示*/
 left: 50%;
 margin-left: -10px;
 border-style: solid;
 border-color: #FFF transparent transparent transparent; /*吹き出しの内側の色の三角形を作る*/
 border-width: 15px 10px 0 10px;
}

 DEMO

ふち付きの吹き出しデモ

次回記事では、「考えているときの吹き出し」を紹介します

CSS3 CSSだけでいろいろな形の吹き出しを作る方法1 ~基本の吹き出し~

以前「CSSだけで吹き出しを作る方法」という記事で疑似要素とボーダーを使ってCSSだけで吹き出しを作る方法を紹介しました。そのとき紹介したのは一番シンプルな見た目の吹き出しでしたが、違う形の吹き出しも作れますので、数回の記事に分けて紹介していきたいと思います。今回は、以前も紹介していますが、基本の吹き出しの作り方をもう一度紹介します。

基本の吹き出しの作り方

基本の吹き出しの作り方です。「CSSだけで吹き出しを作る方法」でも紹介していますが、今回はもう少し分かりやすく図解します。

基本の吹き出しの作り方

三角形の作り方

吹き出しの三角形はボーダーで作ることができます。これは、上下左右のボーダーが接するとき、角の部分が斜めになるのを利用しています。

たとえば、以下のようなCSSを書いたとき、

div {
  width: 0;
  height: 0;
  border-top: 50px solid cyan;  /*上のボーダーはシアン*/
  border-left: 50px solid magenta;  /*左のボーダーはマゼンタ*/
  border-right: 50px solid yellow;   /*右のボーダーはイエロー*/
  border-bottom: 50px solid black;  /*下のボーダーはブラック*/
}

ブラウザで表示すると下のようになります。

 

上下左右のボーダーのうち、1つに色をつけて、他を透明(transparent)にすれば三角形の出来上がりです。

div {
  width: 0;
  height: 0;
  border: 50px solid transparent;  /*上のボーダー以外は透明*/
  border-top: 50px solid cyan;  /*上のボーダーはシアン*/
}

 

これを利用して作った疑似要素の三角を、positionで要素の任意の位置に持っていきます。具体的には以下のようなコードになります。

吹き出しのコードの例

HTML

<p>sample</p>

CSS

p{
  position: relative;
  width: 200px;
  height: 50px;
  margin: 30px;
  font-size: 18px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background-color: #009D78;
  border-radius: 10px;
}
p::after{
  content: "";
  position: absolute;
  bottom: -12px;  /*マイナス値を指定して三角形を下にはみ出させる*/
  left: 50%;
  margin-left: -10px;  /*左右のボーダーの線幅ぶん右にずれるので調整*/
  border-style: solid;
  border-color: #009D78 transparent transparent transparent;  /*上のボーダー以外透明*/
  border-width: 15px 10px 0 10px;  /*下のボーダーは不要なので0*/
}

DEMO

基本の吹き出しデモファイル

次回記事では、ふち付きの吹き出しを作る方法を紹介します。

イラストレーターで手書き風の線を描く方法いろいろ3 ~線幅ツールとアピアランスを合わせて使う~

線幅ツールとアピアランスで手書き風の線を作る

完成

前々回の記事前回の記事と手書き風の線を描く方法を紹介してきました。この記事で最後です。今回は、少し手間がかかりますが、線幅ツールで一つ一つのパスに強弱をつけ、効果「ラフ」や「パスのオフセット」を使って手書き感を出す方法を紹介します。

線幅ツールで強弱をつける

元画像

元画像

線幅ツールで強弱をつけていきます。線幅ツールでは、普通にドラッグするとパスに対して均等に線幅が変わりますが、Altキーを押しながらドラッグするとパスの片側だけ幅を変えることができます。

通常のドラッグaltキー+ドラッグ

線幅ツールで強弱をつけた状態が下の画像です。

線幅ツールで強弱を付けた状態

線幅ツールで強弱を付けた状態

アピアランスを使って質感を表現する

いくつかアピアランスを使って質感を表現します。手順は以下です。

  1. 線をグループ化する
  2. 効果>パスファインダー>追加 ※パスファインダーパネルの機能とは別物
  3. 効果>パスの変形>ラフ
手順3の状態

手順3の状態

  1. 効果>パス>パスのオフセット「0.2mm(例)、ラウンド」
    ※オブジェクト>パス>パスのオフセットとは別物
  2. 効果>パス>パスのオフセット「-0.3mm(例)、ラウンド」
完成

完成

手順4、5のパスのオフセットでは、一度太くしてから元の太さよりも細くすることで、自然なかすれを表現しています。パスのオフセットを適用する前に、「効果」のパスファインダーの「追加」を適用しておくのがポイントです。最後に、アピアランスパネルの様子を載せておきます。

アピアランスパネルの様子

 

イラストレーターで手書き風の線を描く方法いろいろ2 ~ブラシを使う~

ブラシを使って手書き風にする

前回の記事で、効果「ラフ」を使って手書き風の線を描く方法を紹介しました。今回はブラシを使う方法を紹介します。元々Illustratorに入っているブラシを適用するだけでも、だいぶ見た目を変えることができます。

元画像

元画像

たとえば、前回も使ったこの画像が、元々入っているブラシを適用するだけで下の画像のようになります。

ブラシ「木炭(鉛筆)」を適用

ブラシライブラリ「アート_木炭・鉛筆」内の「木炭(鉛筆)」を適用

ブラシ「鉛筆(太)」を適用

ブラシライブラリ「アート_木炭・鉛筆」内の「鉛筆(太)」を適用

ブラシの線幅を変更する方法

ブラシの線幅は、「線」パネルの「線幅」で変更する以外にも、ブラシパネルでブラシをダブルクリックしてブラシオプションを開いたり、ブラシパネル下部の「選択中のオブジェクトのオプション」ボタン(「新規ブラシ」ボタンのとなり)で変更することができます。

オリジナルのブラシを作って強弱をつける

強弱ブラシ使用例1

オリジナルのブラシを作って線に強弱をつけることもできます。ブラシは「アートブラシ」で登録しますが、この種類のブラシはパスの長さに合わせて引き伸ばされてしまうので、いろいろな長さの線に対応できるよう、複数の長さのブラシを用意しておくのがポイントです。

簡単な強弱つきブラシの作り方

強弱のついたブラシを簡単に作るには「線幅ツール」を使います(CS5以降)。まず、ペンツールなどで直線を描き、それを「線幅ツール」で強弱のついた線に変形します。

線幅ツール

強弱をつけた線は、そのまま「ブラシ」パネルにドラッグして「アートブラシ」として登録できます。このとき、線に任意の色を付けたいなら、アートブラシオプションの「彩色」を「淡彩」などに設定しておきます。

アートブラシの設定

前回紹介した効果「ラフ」を適用して質感を出したブラシにすることもできます。ブラシのもとになる線に「ラフ」を適用して、そのままブラシに登録すればOKです。の画像が「ラフ」を組み合わせたブラシを使ったイラストです。

強弱ブラシ使用例2

 

ブラシで自然な強弱をつけるポイント

パスの様子

ブラシで強弱をつける際は、きりのいい部分でパスを切ると自然な仕上がりになります。また、塗りと線は別のオブジェクトで作り、塗りの上に線を重ねるように作るのが、Illustratorでイラストを作成する際の一般的な方法です。

イラストレーターで手書き風の線を描く方法いろいろ1 ~「ラフ」を使う~

Illustratorはベクターデータで画像作成ができるため、どんな大きさで使うかわからないイラストなどを作成するのに向いていますが、反面、手書き風のぬくもりのあるイラストを作りづらいです。

手書き感を重視するならPhotoshopの方が作りやすいですが、Illustratorでも手書き風の線を描く方法はありますので、今回から数回に分け、Illustratorで手書き風の線を描く方法を紹介していきます。

効果「ラフ」を使って手書き風にする

手書き風の線を作る方法の中でも早くて簡単なのが、効果「ラフ」を使う方法です。例えば以下のようなイラストに適用してみます。効果>パスの変形>ラフ で適用できます。

元画像

「ラフ」にはいくつかの設定がありますが、その値が変わると色々な見た目になります。

たとえば、「サイズ」と「詳細」を小さく設定すると少し震えたような線になり、「サイズ」は小さく「詳細」を大きく設定すると、クレヨンで描いたようなガサガサした線になります。下の画像で比較してみてください。

「サイズ」も「詳細」も小さくした例

「サイズ」は小さく「詳細」は大きく設定した例

なお、サイズの設定をするときは、「パーセント」より「入力値」にしておいた方がいいです。「パーセント」にしていると、パスの長さによって効果のかかり方が変わってしまうからです。

サイズ「パーセント」サイズ「入力値」

また、手書き風にするときは「ポイント」を「丸く」に設定しておきます。「ギザギザ」に設定すると、直線で描いたような見た目になります。

「丸く」に設定「ギザギザ」に設定

以上、効果「ラフ」を使って手書き風の線にする方法でした。次回記事でほかの方法も紹介していきたいと思います。