職場でWebSiteを修正したり、新しいページ作成したりの作業がよくあって、ボタンとか、シンボルがあるところ全部　画像でそのまま貼ったって、レイアウトが変更がある時は画像なので、やりつらいなあと思ってときある。

CSSで何かできないかなあと、いろいろやってみて、CSSの楽しいトリックを学びことができました。

三角

三角の形、簡単そうですけど、CSSのオブジェクトだと基本は四角ですね。マルにするには簡単ですけど、三角はどうしたらいいだろう…。

と一杯考えたあと、このやりかた見つかった。

普通の四角で、ボーダーの値を幅の半分して、各面のボーダーの色を、違う色にすると

こんな感じの四角になります。

width: 180px;

height: 180px;

box-sizing: border-box;

border-bottom: solid rgba(0, 255, 255, 1) 90px;

border-right: solid rgba(0, 255, 0, 1) 90px;

border-left: solid rgba(0, 0, 255, 1) 90px;

border-top: solid rgba(255, 0, 0, 1) 90px;

三角が四つあるように見えましたね！

それから！

いらない面の色を透明の色にしたら！

width: 180px;

height: 180px;

box-sizing: border-box;

border-bottom: solid rgba(0, 0, 0, 0) 90px;

border-right: solid rgba(0, 0, 0, 0) 90px;

border-left: solid rgba(0, 0, 0, 0) 90px;

border-top: solid rgba(255, 0, 0, 1) 90px;

お！三角に見えました！

1つのHTMLエレメントで複数オブジェクトがあるシンボル(before:after:)

色んなサイトで矢印のようなオブジェクトをCSSで作成しているサイトがよく見えます。　

:before :after と言うCSSのイベントを使ったら作れるらしい。

最初は：before :after　の意味？コンセプト？どういうものなのかあまり理解できなくて、使わないように避けてたんですが、何とか色んな　:before　:after　を使っているサイトをみて、やっと理解できました。

意味を検索してみると　、

”「HTMLには書かれていない要素もどきをCSSで作ることができる」”　

と書いてあるけど、ま、私の理解している意味で説明しよ

たとえ一つの　HTMLエレメントがあって、

beforeは　このエレメントのちょっと過去

afterはこのエレメントのちょっと将来

past > now > future 同時に１つのエレメント３つの時代表示できる！

すご～いじゃん！タイムマシンがあるみたい

これで簡単なシンボルができる

さっそく　超簡単な×ボタン作ってみた。

#closeBtn {

height: 100px;

width: 100px;

background-color: grey;

border-radius: 50%;

transform: rotate(45deg);

box-shadow: 1px 2px 2px 1px rgba(0,0,0,0.8);

}

#closeBtn::before,　#closeBtn::after {

　content: " ";

　position: absolute;

background-color: #000;

　top:50%;

　left:50%;

}

#closeBtn::before {

　width: 60px;

　height: 12px;

　margin-top: -6px;

　margin-left: -30px;

}

#closeBtn::after {

　width: 12px;

　height: 60px;

　margin-top: -30px;

　margin-left: -6px;

}

1つのHTMLエレメントで同じ形のオブジェクトを複数で作成

さっきのbefore after で一つのHTML　DOMで最大3つのオブジェクトのシンボルしかできないでしょうね。

もっとふくすうがあるシンボルをすくりたいならどうすればいいだろ…

っておもったら、面白い方法がみつかった！

width: 80px;

height: 80px;

border-radius: 50%;

background-color: rgba(0,0,0,1);

box-shadow: 120px 0px rgba(0,0,0,0.9),

　　　　　　240px 0px rgba(0,0,0,0.8),

　　　　　　240px 120px rgba(0,0,0,0.7),

　　　　　　120px 120px rgba(0,0,0,0.6),

　　　　　　0px 120px rgba(0,0,0,0.5),

　　　　　　0px 240px rgba(0,0,0,0.4),

　　　　　　120px 240px rgba(0,0,0,0.3),

　　　　　　240px 240px rgba(0,0,0,0.2);

box-shadowを使うと、忍者みたいに無限数の同じオブジェクトをDuplicateできる！

もうちょっと影の詳細をいじってみたら、色や、サイズもそれそれ違うものできるんだ！

box-shadow: 120px 0px 0 -4px rgba(0,20,20,0.9),

240px 0px 0 -8px rgba(0,40,40,0.8),

240px 120px 0 -12px rgba(0,60,60,0.7),

120px 120px 0 -16px rgba(0,80,80,0.6),

0px 120px 0 -20px rgba(0,100,100,0.5),

0px 240px 0 -24px rgba(0,120,120,0.4),

120px 240px 0 -28px rgba(0,140,140,0.3),

240px 240px 0 -32px rgba(0,160,160,0.2);

まとめ？

最後に、↑に紹介したCSSのトリックで、　ピカチュウをつくってみた…

HTML:

CSS：

#pikachuu {

left:56px;

top: 200px;

position: absolute;

height: 16px;

width: 16px;

background-color: rgba(255,255,255,1);

border-radius: 50%;

box-shadow: 8px 8px 0 12px rgba(0,0,0,1),

80px 0px 0 0px rgba(255,255,255,1),

88px 8px 0 12px rgba(0,0,0,1),

48px 36px 0 -2px rgba(0,0,0,1),

-12px 56px 0 12px rgba(255,0,0,1),

108px 56px 0 12px rgba(255,0,0,1),

48px 32px 0 88px rgba(255,255,55,1);

}

#pikachuu::before, #pikachuu::after {

content: " ";

background-color: rgba(255,255,55,1);

position: absolute;

top:16px;

left:56px;

z-index:-1;

box-shadow: 60px 0px 0 -30px rgba(0,0,0,1) inset;

}

#pikachuu::before {

width: 152px;

height: 56px;

border-radius: 100%;

margin-top: -100px;

margin-left: -136px;

transform: rotate(70deg);

}

#pikachuu::after {

width: 152px;

height: 56px;

border-radius: 100%;

margin-top: -100px;

margin-left: -20px;

transform: rotate(95deg);

}

#pikachuu + label {

position: relative;

bottom: -220px;

left: 80px;

width: 48px;

height: 64px;

box-sizing: border-box;

border: solid rgba(0, 0, 0, 0) 24px;

border-top: solid rgba(255, 0, 0, 1) 32px;

border-radius: 16px;

}

これくらいのコードで、ピカチュウができました！　じゃ～ん！！

簡単なシンボル、レイアウトをCSSで作ると、WEB-PAGEでは画像の数が少なくなり、データ使用量もつくなくなるので、ロード時間も短くなるですね。

でも、複雑さがあるイメージなら、CSSで頑張ってどんなシンボルでも作成できると思いますけど、コード量も多くなって、壊れやすいし、管理し辛くなります。

適切に使いましょう！

でも練習として色んなものを作ってみたら、CSSは楽しいな！って思うようになるかも！