Concrete5でサイトを作る

Concrete5は直感的なインターフェースで非常に優れたCMSです。

Posted on
コメントする

css3のtransform: rotateでジャギーがすごい

chromeでcss3のtransform: rotateを使うと、ジャギーが凄いんです。

-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);

境界線のジャギーが凄い。

背景色と同じborder :1pxを入れるとちょっと緩和するけど、この手はあんまり使いたくないなぁ…。

border: 1px solid #666;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);

境界線のジャギーが凄い。
Posted on
コメントする

疑似要素で種類の違うボーダーを引く

↑のh1見出しとか、サイドバーのh3に使ってるボーダーですが、今まで色の異なるボーダーの引き方がわからなくて、いつも背景画像を使っていました。

背景画像を使わずにCSSだけでなんとかしたかった。

で、天から聞こえて来た声が「:after使えばいいじゃない」。

#content article h1 {
    font-weight: bold;
    font-size: 150%;
    text-shadow: 0 0 2px rgba(6, 45, 124, 0.8);
    color: #fff;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #aec5e1;
    margin: 0 0 10px 0;
}

#content article h1:after {
    border-bottom: 1px solid #5e8ec5;
    content: "";
    display: block;
    height: 1px;
    margin: 0 0 -10px;
}

:afterの時に、「content=””」と「height:1px」を入れないとそもそもレンダリングされなかったので、仕方なく入れました。
「margin: 0 0 -10px」は位置の調整用です。

Posted on
コメントする