cssの検索結果

CSS3 変形処理を行う transform プロパティ

CSS3 変形処理を行う transform プロパティ

transform は文字や画像を拡大・縮小、移動、回転などを指定出来るプロパティです。

単独でも使いがっては色々あるのですが、前回の記事「CSS3 アニメーション(Transitions)の使用方法」と併用して使ったらさらに面白い動きも出来ちゃったりします。

という事で今回は transform の基礎や使い方やなどを紹介したいと思います。

Download

CSS3 アニメーション(Transitions)の使用方法

CSS3 アニメーション(Transitions)の使用方法

CSS3 になる事で今までと画期的に変わる部分の一つが、このアニメーション機能です。

自分もまだ勉強中ですが、使い方によってはけっこう面白い動きとかも出来ちゃうので、使いこなせればけっこう楽しめると思いますよ。
なので今回は基礎的な事を書いていきたいと思います。

Domo Page

CSS3 グラデーション(gradient)の指定方法

CSS3 グラデーション(gradient)の指定方法

CSS3 でグラデーションの指定が出来る -moz-linear-gradient -webkit-gradient の使用方法などを紹介、解説したいと思います。

Domo Page

CSS3 でのレイアウトで使える box 系プロパティのまとめ

CSS3 でのレイアウトで使える box 要素系のまとめ

今は 3カラムのレイアウトをする際 float を使い clearfix や clear を使ったりと覚えたての頃は頭を悩まされた人も少なくはないかと思います。

でも今後普及するであろう CSS3 で 3カラムのレイアウトする際も display: box; を使うだけで簡単に出来ちゃうんですよね。って事でbox 要素系のプロパティについての紹介をしておきます。

demo page

CSS3 text-shadow box-shadow の使い方

テキストやボックス要素に影をつける box-shadow text-shadow の使い方

テキストに影をつける text-shadow ボックス要素に影をつける box-shadow は今後必須のプロパティになりそうな気がするので使い方などをまとめておきたいと思います。

CSS3 角丸を表現する border-radius

CSS3 角丸を表現する「border-radius」

今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来ちゃうプロパティです。

正確にはCSS3の草案「CSS3 Backgrounds and borders Module」中なんですが、これが普通に使えればどれだけ楽になるか...って感じなので、使い方を紹介しておきたいと思います。

コーディングするのが楽になるかも?と思うCSSテクニックのまとめ

コーディングするのが楽になるかも?と思うCSSテクニックのまとめ

今まで使ってコーディングが楽になったと思われるCSSテクニック(一部CSSではない部分もありますが...)などをまとめておきたいと思います。

コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単な事も多いので是非使ってみて下さい。

demo page

こういう所で使ったら便利なネガティブマージン

こういう所で使ったら便利なネガティブマージン

以前ネガティブマージンを使ってレイアウトしてみるでネガティブマージンの使い方については紹介したのですが、実際にどういう所に使うのか分からない...って事も聞きましたので、実際にこういう所で使ったら便利だと思う所をいくつか紹介したいと思います。

仕事でよく使う「詳細はこちらへ」の組み方について

仕事でよく使う「詳細はこちらへ」の組み方について

久しぶりの更新です。お盆前はくそ忙しく、お盆は遊びほうけ、お盆明けはやる気なしですっかり更新出来ないでいました...
そろそろお盆ボケを戻していかないとまずいので更新していたきたい思います!

ここからが本題ですが、上記画像の様にイメージ画像があり、その中に「詳細はこちら」って感じのパターンって最近仕事でよく使うんですが、こういう時の組み方って大きく分けて背景画像にする方法と position を使う方法があると思うでその方法を紹介したいと思います。

blockquote(引用部分)をCSSでデザインするサンプル集

blockquote(引用部分)をCSSでデザインするサンプル集

ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。

そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。

demo page

display:inlineで横並びにした際に出来る余白を消す方法

display:inlineで横並びにした際に出来る余白を消す方法

li要素をdisplay:inlineを使って横並びにさせる事ってけっこう使うと思うですが、この時にソース上で改行していたり、スペースを開けているとちょっとした余白が出来ると思います。

その余白を消す方法を THE HAM MEDIAさんの「リストを横並びにした時の空白をなくす方法」でいくつか紹介されていた中でほぼ全てのブラウザで対応が出来る方法のみを紹介したいと思います。

知っておくと便利なCSSテクニック

CSS

CSSにはちょっとした小技的っていろいろあると思うですが今回はちょっと記述しただけで解決が出来るような小技をいくつか紹介したいと思います。

CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法

CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法

PDF、Excel、Word、ZIPや外部リンクなどにアイコンが付けるが付いてるサイトって見かけると思うですがこれを自動でつくようにCSSで指定する事が出来るので紹介しておきます。

Coding Architectureさんの「外部リンクだけにアイコンをつける」を参考にさせて貰いました。

demo page

検索フォームをCSSでデザインするサンプル集

検索フォームをCSSでデザインするサンプル集

Webサイトに「サイト内検索」ってよく見かけると思うですが、今回はその検索フォームをCSSでデザインする際のサンプルをいくつか作ってみましたので簡単な解説付きで紹介したいと思います。

demo page

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法

海外のサイトとかでよく見られるんですが、背景画像がドーンと大きく置いてあり、その上にコンテンツがあるようなサイトがあるかと思います。

代表的なサイトと言えばWeb Designer Wallさんが有名だと思いますが、この用なサイトも背景画像さえ出来ればけっこう簡単に出来ちゃうんで、その組み方を解説したいと思います。

demo page