CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mizoue

HTML5とは切っても切れない関係のCSS3。
そのCSS3で新しく追加された角丸を実現するプロパティ、border-radiusを使って丸を作ってみました。

以下、このサンプルが作られることになった経緯です。

デザイナー(以下デ)「なんかCSS3でサンプル作るにあたってなんか変わった使い方したいね」
コーダー(以下俺)「CSS3ですか。角丸とかグラデ当たりが無難だと思いますけど」
デ「それじゃ面白くないじゃん」
俺「なるほど。じゃぁ全部つけましょう」
デ「ついでに完全な丸にしようか」
俺「?!」

と、まぁこんな茶番がありました。

そんなわけで全部載せたサンプルがこんな感じです。

CSSサンプル

#main .entry .entryContents .test p {
    font-size:100%;
}
#main .entry .entryContents .test .cir {
    position:relative;
    width:300px;
    height:300px;
    border-radius:150px;
    -webkit-border-radius:150px;
    -moz-border-radius:150px;
    background-color:#FFF;
    background: -moz-radial-gradient(center center, circle contain, #FFF, #FBF9ED, #F2E5BB);
    background: -webkit-gradient(radial, center center, 0, center center, 300, from(#FFF), color-stop(20%, #FBF9ED), to(#F2E5BB));
    text-align:center;
}
#main .entry .entryContents .test .cir .cir_in {
    position:absolute;
    top:39px;
    left:25px;
    width:250px;
}
#main .entry .entryContents .test .cir .date {
    margin:0 0 12px;
    font-size:18px;
    font-weight:bold;
    color:#E5649A;
}
#main .entry .entryContents .test .cir h1 {
    margin:0 0 5px;
    font-size:20px;
    color:#4E4E46;
}
#main .entry .entryContents .test .cir .text {
    margin:0 0 12px;
    line-height:1.3;
    color:#53524D;
}
#main .entry .entryContents .test .cir .bottom {
    width:230px;
    padding:0;
    margin:0 auto;
}

※HTMLのサンプルは右クリックの「ソースを見る」などから見てくださいね!
記事に直接書いてるよ!

HTMLサンプル

2010/09/20

タイトルが入ります。

テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。

テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。テキストがはいります。

いかがでしょうか。
中々いい感じだと自負しております。
・・・実際には円形グラデーションの効き方がFirefoxとChrome,Safariで違っていたり、
円形を維持するために色々無茶してたりするんですが、それはまぁご愛嬌ということで!

実際に使う場合なんかは要素の大きさに併せて
自動的に円形を調整するJavaScriptなんか用意しとくと
とっても素敵ですね。

CSS3いいですね。
夢が広がります。

Subscribe:
pagetop