2015年9月8日のブックマーク (2件)

  • CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge

    セレクトボックス(select要素)のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。 つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を整えることができるようなので機会があれば試してみてはいかがでしょうか。 <div class="select-box01"> <select> <option value="">セレクトボックス01</option> <option value="">選択肢01</option> <option value="">選択肢02</option> <option value="">選択肢03</option> <option value="">選択肢04</option> <option value="">選択肢05</option>

    CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge
    h-a-t-e-h-a-t-e-h-a-t-e-n-a
    h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/09/08
     CSSでセレクトボックスを装飾
  • 要素を変化させる、CSS3「transform」のおさらい

    今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。 また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。 rorate 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); transform: rotate();(角度の変更) #img01 img { animation: animat

    要素を変化させる、CSS3「transform」のおさらい
    h-a-t-e-h-a-t-e-h-a-t-e-n-a
    h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/09/08
     トランスフォームに関して