CSS3について少し学んだ

CSS3について少し学んだ先日のCSSについて少し学んだに続いて、今日はCSS3について少し学んでみようと思います。今日もドットインストールです!お世話になってます!またしても気になったところのみメモを取っていきます。

全体を通してベンダープレフィックスを除いていますが、書かないと動かないこともあると思います。

対応状況

どのブラウザが対応しているかを確認できる。

角丸

border-radius: 50%;
background-image:url(image-url);

これで、イメージを丸く切り抜ける。手軽でかっこよく見えそう。

透明度

opacityで設定できる。

opacity:0.3;

変形

- transform:scale
- transform-origin : 起点を指定する
- transform:translate
- transform:rotate
- transform:skew

アニメーション

これは簡単に使えて良さそう。a:hoverなどと組み合わせて使うのかな。

transition-property:all;
transition-duration:1s;
transition-timing-function:ease;  /* linear, easein, ease-out, ease-in-out */
transition-delay:2s;
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid orangered;
    
    animation-name:animationTest;
    animation-duration:5s;
    animation-timing-function:ease;
    animation-delay:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@-keyframes animationTest {
    0% { width: 50px; background: orange }
    50% { width: 100px; background: blue }
    100% { width: 150px; background: yellow }
}

セレクタ

この概念は知らなかったなぁ。a要素でhrefがhttp://dotinstall.comのものに対してcssをあてることができる。

a[href="http://dotinstall.com"] {
            color:yellow;
}

divの子要素の2番目がpだった場合にcssを適用

div p:nth-child(2) {
            color:red;
}

他に、odd,3n,3n+1,first-child,last-childなどで指定することもできる。他に、子要素が1津だけだった場合などいろいろな指定ができる。

要素の状態で指定する

input[type="text"]:disabled {
    font-weight:bold;
}

ジェネレータ幾つか

後記

結構色々できそう。ただ、この辺りってjQueryとかで何とかできそうでもある。ほんとに見た目よりのグラデーションや角丸などは使っていけるかな。

参考

Pocket
LINEで送る

You may also like...