デザイン:FontAwesomeアイコンでサイトにメリハリを 2

3D css :デザイン
3D_animation
記事内に広告が含まれています。

FontAwesomeアイコンで、視覚的なアクセントを持たせる(サイトデザイン)の2回目です。

Thank you for reading this post, don't forget to subscribe!

今回は、「文字と合わせて表示、Linkも!」、「アイコン重ね表示」、「文字とアイコン重ね表示」、「spinの違い」、「アイコンと”fa-spin”と”rotate3d”で、疑似3Dアニメーション 」などをお伝えしたいと思います。

前回の
「FontAwesomeアイコンデザイン 1」は、
 ここからどうぞ

PR広告

FontAwesomeアイコンでサイトデザイン

アイキャッチは.gif

アイキャッチ画像はアニメーション.gifだけど、実際のコードからの実行では、以下の様にもっと滑らかなアニメーションになる。

3D

アニメーション効果

拡大、重ね(アイコン・文字)、着色、アニメーション

HTMLなどのコードを表示させたいため、<で、>で置き換えています。

※. 文字と合わせて表示、 Linkも!
i class=”fas fa-swatchbook fa-5x” style=”color:rgb(255, 255, 255);” >< /i
a href=”https://xn--ecka7j.biz/category/site-operation/design/” target=”_blank”
span style=”color:wheat;font-weight:900;font-size:200%;”  Design /a

class=”fas fa-swatchbook fa-5x” (fa-5xは5倍表示)
.c_wi       {color:whitesmoke !important;} :Link白文字表示させるため


※. 2つのアイコン重ね表示
重ねたい2つのアイコンの 親要素span要素)に fa-stackクラスを追加。
span class=”c_wi” .main_wrapper_s2  /span >{
土台となるアイコンにfa-stack-2xクラスを追加。 合わせて、土台となるアイコンの色(style=”color:#ffc0cb”)を追加。
その上に
重ねるアイコンにfa-stack-1x fa-inverse クラスを追加。
fa-stack-1x クラスが、土台のアイコンのfa-stack-2xクラスの半分であることが大事。
合わせて、色(style=”color:#ff0000″)を追加。
 ※.後から記述されたアイコンが前面に表示されます。( fa-inverseクラスで色の反転(反転色は追加した#ff0000))
knock-out looking effect
最後の /i の後から、アイコンと一緒に表示させる文字の表示の為の修飾をします。
br>< span style=”font-weight:900;font-size:50%;text-align:center;” Dental_Office /span

span class=”fa-stack fa-2x><i class=”fas fa-home fa-stack-2x” style=”color:#00ffff;”></i><i class=”fas fa-tooth fa-stack-1x fa-inverse></i></span

※. 文字とアイコン重ね表示
  span class=”fa-stack fa-2x”
  i class=”fas fa-home fa-stack-1x” style=”color:rgb(0, 145, 255);” >< /i
  i class=”fa-stack-1x” >< b /b >< /i >< /span
など、

# 表示 定義
f5c3 Design 文字と合わせて表示、Linkも!
<i class=”fas fa-swatchbook fa-5x” style=”color:rgb(255, 255, 255);”></i>
<a href=”https://xn--ecka7j.biz/category/site-operation/design/” target=”_blank”>
<span style=”color:wheat;font-weight:900;font-size:200%;”> Design</a>
f47e class=”fas fa-hospital-symbol fa-2x”:2倍表示
f015   class=”fas fa-home”
class=”fas fa-home fa-3x”:3倍
f0fe   class=”fas fa-plus-square”
class=”fas fa-plus-square fa-2x”
f015
&
f0fe

Dental_Office
2つのアイコン重ね表示:重ねたい2つのアイコンの 親要素(span要素)にfa-stackクラスを追加。
土台となるアイコンにfa-stack-2xクラスを追加。(style=”color:#ffc0cb”)
その上に重ねるアイコンに fa-stack-1x fa-inverseクラスを追加。(style=”color:#ff0000″)
後から記述されたアイコンが前面に表示されます。
fa-inverseクラスで色の反転(knock-out looking effect)
最後の</i>の後から <br><span style=”font-weight:900;font-size:50%;text-align:center;”>Dental_Office</span>
f015
&
f5c9
2つのアイコン重ね表示
span class=”fa-stack fa-2x”
class=”fas fa-home fa-stack-2x” style=”color:#00ffff;”
class=”fas fa-tooth fa-stack-1x fa-inverse
f015
&
f5c9
文字とアイコン重ね表示
<span class=”fa-stack fa-2x”>
<i class=”fas fa-home fa-stack-1x” style=”color:rgb(0, 145, 255);”></i>
<i class=”fa-stack-1x”><b>歯</b></i></span>
f5c9 <td class=”w55″ style=”background-color:#0000ff”>
<i class=”fas fa-tooth fa-inverse fa-3x”></i></td>
f248   class=”fas fa-object-ungroup”
class=”fas fa-object-ungroup fa-2x”
  class=”far fa-object-ungroup”
class=”far fa-object-ungroup fa-2x”
f247   class=”fas fa-object-group”
class=”fas fa-object-group fa-2x”
  class=”far fa-object-group”
class=”far fa-object-group fa-2x”
f2bb class=”fas fa-address-card”
class=”fas fa-address-card fa-2x”
class=”far fa-address-card fa-2x”
f100 class=”fas fa-angle-double-left fa-2x”
f104 class=”fas fa-angle-left fa-2x”
f053 class=”fas fa-chevron-left fa-2x”
f101 class=”fas fa-angle-double-right fa-2x”
f105 class=”fas fa-angle-right fa-2x”
f054 class=”fas fa-chevron-right fa-2x”

 目次に戻る


f197 : class=”fas fa-space-shuttle” スペースシャトル色々
 class=”fa-flip-horizontal
 class=”fa-flip-vertical
 class=”fa-rotate-270“ :::スペースシャトルの場合、270度回転で、直立
 class=”faa-passing animated
 class=”faa-passing-reverse animated“ :::-reverse:が逆向き

# 表示 定義
f197   class=”fas fa-space-shuttle fa-flip-horizontal“: 水平方向に反転
class=”fas fa-space-shuttle fa-flip-horizontal fa-3x” style=”color:rgb(0, 98, 255)”
  class=”fas fa-space-shuttle fa-flip-vertical“: 垂直方向に反転
class=”fas fa-space-shuttle fa-flip-vertical fa-3x” style=”color:color:#0062ff”
  class=”fas fa-space-shuttle fa-rotate-270
class=”fas fa-space-shuttle fa-rotate-270 fa-2x” style=”color:rgb(0, 198, 255)”
   class=”fas fa-space-shuttle faa-passing animated fa-2x” style=”color:lime;”
追加のアニメーションClass
   class=”fas fa-space-shuttle faa-passing-reverse animated fa-2x” style=”color:#00ffff”
追加のアニメーションClass

 目次に戻る


spin回転の違い

※.FontAwesome5標準のclass
fa-spin” と
追加のアニメーションclass
faa-spin animated“の回転スピードの違い
尚、追加のアニメーションClassを使用する為には、
アニメーション用のcssを、CDN 経由で読み込む必要があります。
https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css
合わせて、(animated)を指定する必要があります。
尚、追加のアニメーションの種類は、
  FontAwesomeアイコンでDesign 1
を参照ください。


# 表示 定義
f013

fa-spin:回転

class=”fas fa-cog fa-spin fa-3x”

faa-spin animated:より早く回転

class=”fas fa-cog faa-spin animated fa-3x”
追加のアニメーションClass

 目次に戻る


  ➡➡➡➡➡➡➡➡➡

3Dアニメーション

※.rotate3d
transform-style:preserve-3d;
transform-styleプロパティは、
要素の子要素を 3D 空間に配置(preserve-3d)するか、平面化して要素の平面に配置(flat)するのかを設定。
preserve-3dは 要素の子要素を 3D 空間に配置する
アイコンと”fa-spin”と”rotate3d“で、疑似3Dアニメーション
.main_wrapper_s2  {
 display:flex;position:relative;transform-style:preserve-3d;
 perspective:300px;left:0;top:0;bottom:0;right:0;
 align-items:center;justify-content: center; }
.sphere_wrapper_s2 {
 transform-style:preserve-3d;width:300px;height:300px;position:relative;
 animation:rotate3d_s32 32s linear infinite; }
@keyframes rotate3d_s32 {
 0% {transform: rotateX(0) rotateY(0); }
100% {transform: rotateX(-360deg) rotateY(-720deg); } }

# 表示
f013

アイコンと”fa-spin”と”rotate3d”で3D回転

アニメーション効果:虹色変化


class=”Background_Text32 fas fa-cog animation_Rainbow32″

 目次に戻る


回転の角度(Class)

※.以下の表にあるようなクラスを指定することで、アイコンを回転や反転することができます。

クラス 回転の角度
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°
fa-flip-horizontal 水平方向に反転
fa-flip-vertical 垂直方向に反転

 目次に戻る


回転の角度(実例)

rotateと、
fa-flip-horizontal」:水平方向に反転。
fa-flip-vertical」::垂直方向に反転。

# 表示 回転の角度
f52e class=”fas fa-frog” 指定なし
f52e class=”fas fa-frog fa-rotate-90″
f52e class=”fas fa-frog fa-rotate-180″
f52e class=”fas fa-frog fa-rotate-270″
f52e class=”fas fa-frog fa-flip-horizontal”
f52e class=”fas fa-frog fa-flip-vertical”

 目次に戻る


サイズ適用(Class)

※.アイコンサイズのClassでの指定方法
以下のclassが標準で用意されています。

表示Classサイズ備考
fa-xs .75em 「Extra Small」
fa-sm .875em スモール
無指定 1em 通常サイズ
fa-lg 1.33em ラージ
fa-2x 2em 2倍
fa-3x 3em 3倍
fa-4x 4em 4倍
fa-5x 5em 5倍
fa-6x 6em 6倍
fa-7x 7em 7倍
fa-8x 8em >8倍
fa-9x 9em 9倍
fa-10x 10em 10倍

 目次に戻る


サイズ適用(Scaling)

※.拡大・縮小(Scaling)
アイコンを拡大・縮小するには、data-fa-transform 属性に
「grow-#(拡大)」、「shrink-#(縮小)」を指定します。

#には任意の数値(小数可能)を指定し、単位は「1/16em」です。
アイコンのみが拡大・縮小され、そのコンテナの大きさは変わりません。

#表示<i></i>
f0d0 class=”fas fa-magic fa-xs”:クラスxs指定
f0d0 class=”fas fa-magic”:指定なし(本来のサイズ)
f0d0 class=”fas fa-magic fa-2x”:クラス2x指定(2倍)
f0d0 class=”fas fa-magic” data-fa-transform=”shrink-8″
:8/16em:0.5emに縮小
f0d0 class=”fas fa-magic” data-fa-transform=”grow-6″
:6/16em:0.375em拡大 ➡ 1.375em
f0d0 class=”fas fa-magic fa-lg” ➡ 1.33em:ラージ

 目次に戻る


コメント

タイトルとURLをコピーしました