【HTML CSS 独学7】 基礎を固めて高く積み上げ！ 「CSSで浮き出るボックスを作ろう！」　投資家のFIREへの旅路 第237回

CSSの text-shadow と、 box-shadowを使って浮き出るボタンを作ります♪

ただ浮き出るだけでは、オシャレ感がないので、
色々つけてみましょう！

でも、めちゃ簡単に、シンプルにです。

HTML

<div class="blog-category"> 

    <a href="#">　Movie Review　</a>
    
</div>
       

CSS (SCSS)

.blog-category {
   display: block;
   transition-duration: 0.8s;
   font-size: 1.4rem;
   font-weight: bold;
 }
 
     
 .blog-category a {
    display: block;
    width: 90%;
    height: 80px;
    padding: 20px;
    text-decoration: none;
    background-color: #928080;
    color: #ffffff;
    transition: 0.5s;
    opacity: .8;
       
       
   &:hover{
      transform: translate(-10px , -10px);
      text-shadow: rgb(138, 161, 180) 20px 10px .5px;
      box-shadow: 8px 8px 1px 0px rgba(54, 59, 59, 0.8);
      background-color: #ffffff;
      color: #928080;
      transition: 0.5s;
    }
  }
     

【解説】　HTML

まずは、HTMLで、箱を作ります。

<div class="blog-category">
        <a href="#">　Movie Review　</a>
</div>

class名は自由につけてください。
「Movie Review」というテキストの入ったボックスを作りました。

画像では、３つのボックスを配置していますが、
コードは左端の「Movie Review」のボックスのものです！

【解説】　CSS(SCSS)

続いては、CSSです。
画像のように、

マウスを置くと、
ボックスの位置が左上にずれる
ボックスの右下にシャドウがつく
テキストの右下にシャドウがつく
テキストカラーと、バックグラウンドカラーを入れ替える

これがそのまま、SCSSのコードになります。

 &:hover{
      transform: translate(-10px , -10px);
      text-shadow: rgb(138, 161, 180) 20px 10px .5px;
      box-shadow: 8px 8px 1px 0px rgba(54, 59, 59, 0.8);
      background-color: #ffffff;
      color: #928080;
      transition: 0.5s;
    }

hover　→
マウスを置いたら

transform: translate(-10px , -10px);　→
左上（-10px , -10pxの位置）に移動、( )内の数字を色々変えるとずれる位置が変わるので、触ってみましょう！

box-shadow: 8px 8px 1px 0px rgba(54, 59, 59, 0.8);　　→
影をつける：水平方向　垂直方向　ぼかし距離　広がり距離　rgba=色と透け具合
このような数値です。これもいじってみて、好みのポイントを見つけましょう！

 background-color: #ffffff;
      color: #928080;
これは、色の変更です。

マウスオーバーする前のカラーは
background-color: #928080;
    color: #ffffff;
これなので、色を反転させています。
この設定も、自由にいじりましょう！

transition: 0.5s;　　→
変化のスピードです。1sで1秒です。これもいじってみましょう！

このような処理をしています。
どのような動きになるのかは、実際にコードを書いて試してみてください！
きっと、うまくいかないと思います！プログラミングってそんなものです。
どこかがの何かが違うだけで思い通りにならないので、いろいろ試して自分のものにしてください。

【ポイント】

ポイントは、マウスオーバー前と後の違いを整理することです。

特に、色の変え方として、
バックグラウンドカラーとテキストカラーが、入れ替わるように処理をしているのところがポイントです！

色は何種も使えばいいというものでもありませんし、シンプルすぎても楽しくないですからね。

使用する色の数は同じでも、
バックグラウンドとテキストの入れ替わると変化は効果的だと思います！

いろいろ試してみてね！

【まとめ】

今回は、
CSSの text-shadow と、 box-shadowを使って浮き出るボタンを作りました。

数値の設定がいろいろなポイントで出てきましたが、ここを自分なりにいじって、応用しましょう！

そうして、使いまわしているうちに
コードが自分のものになると思います。

コードは覚えてはいけませんよ〜！
使い倒して、身に染み込ませるイメージ。忘れたら検索でオッケーなんですから！