「css3」の記事一覧

このブログでテーマを作成していく様子を書いていくつもりだったけど、記事にしながらだとすごく時間がかかりそうだったので、とりあえず記事にはせずテーマを作りました。 今後徐々にテーマの作成の記事を増やしていきます。 目標としていた ・固定ヘッダーを使う ・CSS3を使う という2点は達成できてよかっ... 続きを読む

linear-gradient()は線形グラデーションの効果をつけられます。(firefox) safariやGoogle Chromeなどのwebkitの場合、gradient()になります。 それぞれ書式が違います。 linear-gradient() （safariで見てください） ... 続きを読む

このブログでWordPressのテーマを作成する前段階として CSS3を実際に使って勉強してみているけど、実際に使ってみると結構簡単。 何でもっと早く手を出さなかったんだろうと正直少し後悔＾＾； よくよく思い出すと、google chromeに乗り換えたのがちょうど1年くらい前で、 それまでIE8... 続きを読む

rgba() 色の指定に透明度が加わった物がrgba()です。 [css]background-color:rgba(100,100,100,0.5);[/css] 1個目が赤色の指定 2個目が緑色の指定 3個目が青色の指定 4個目が透明度（alpha）の指定 透明度は0が透明で1が不透明... 続きを読む

transition transitionは時間的変化を付けます。 基本的にはhoverで使うことが多いようです。 （ベンダープレフィックスはgoogle chrome用しか使っていないので、 google chromeで見てください。） [css] div.trans{ width:... 続きを読む

text-shadow box-shadowに使い方が似ているtext-shadowです。 text-shadowは文字に影をつけるプロパティです。 [css]text-shadow:3px 3px 3px black;[/css] 1番目が横への長さ 2番目が縦の長さ 3番目はぼかしの距離... 続きを読む

box-shadow border-radiusと共に使用頻度の高くなりそうなbox-shadowです。 box-shadowは影をつけるプロパティです。 いくつか使用例を書いていきます。 どれも縦横100pxのサイズに適用しています。 （google chromeで見てください。） [... 続きを読む

border-radius まずは使用頻度が高くなりそうなborder-radiusです。 border-radiusは角丸を指定するプロパティです。 いくつか使用例を書いていきます。 どれも縦横100pxのサイズに適用しています。 （google chromeで見てください。） [cs... 続きを読む

WordPressのデザインを作成する前にまずCSS3を身につけたいと思います。 （テーマ作成のカテゴリに入れていいのか迷いましたが、 テーマを作成するための一連の流れなので「テーマ作成」カテゴリに入れました。） CSS3を使ったことがないとはいえ、時々CSS3のソースを見かけることはあります... 続きを読む