Help us understand the problem. What is going on with this article?

CSS3のすごさ

フロントエンドの楽しさについてわかってきた部分がありまして、書いていきたいと思います。

CSSのメディアクエリーとか、:hoverなどの疑似要素やアニメーションのtransitionなどを使うと、javascriptを極限書くことなくそれっぽいものができちゃいますよって話です。

/*850px以下だとnav表示しない*/
@media screen and (max-width:865px) {
      #head>nav {
      display: none;
      }
}

こういうのがメディアクエリです。
max-widthの部分をmin-widthに書き換えると、850px以上だとnav表示しない、みたいになるかと思います。

なぜかbootstrapの、hidden-mdクラスなどが効かなかった時に、どうしたもんかなと、思ってた時に見つけました。(これはのちのち解決できました。)

jsとかjQueryだとresizeとか関数でいちいち計算しないといけないしめんどくさいと思う場合これを使ってみると便利です。

:hoverについて

/*ポップアップ*/
\#head>nav>a:hover .popup {
      display: block;
      padding:3px;
      color:#ffffff;
}

これって、疑似要素っていうらしいんですが

上のコードでは、マウスオーバーした際にポップアップ(小さい説明みたいなもの)が出るように実装している中の一部を載せている感じです。

javascriptとかjQueryでもいいんですが、mouseoverやらmouseoutやらめんどくせえよ、って人、:hoverめちゃめちゃ便利なので使ってみるといいかと思います。僕はこれでなるべく書いていこうと思っています。

/*アニメーション*/
\#welcome .textbound1 {
     -webkit-animation: bound .4s ease-in-out;
}
\#welcome .textbound2 {
     -webkit-animation: bound .9s ease-in-out;
}
\#welcome .textbound3 {
     -webkit-animation: bound .5s ease-in-out;
}
\#welcome .textbound4 {
     -webkit-animation: bound .8s ease-in-out;
}
\#welcome .textbound5 {
     -webkit-animation: bound .6s ease-in-out;
}
\#welcome .textbound6 {
     -webkit-animation: bound .4s ease-in-out;
}
\#welcome .textbound7 {
  -webkit-animation: bound 1.1s ease-in-out;
}
@-webkit-keyframes bound {
  0% {
    transform: scale(0) translate(0, -500px);
  }
  50% {
    transform: scaleX(2) translate(0, 200px);
  }
  70% {
    transform: scaleY(.5) translate(0, -100px);
  }
  90% {
    transform: scaleX(1.5) translate(0, 50px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

参考サイトを載せておきます。
http://commte.net/blog/archives/5082

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away