Asairo Design

デザイン制作チーム 浅色デザインオフィシャルサイト。web関連やメモの置き場所。熊本県出身のweb制作者。たまに小説。

WEB CSS

グラデーションのボーダーをCSSでつくる

投稿日:

備忘録Tips

3区切りのボーダー

【表示例】

【CSS】

  /* 3区切りのボーダー */
.greenLine {
    background: #008000; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #FF0000 0%, #FF0000 33.3%,  #0000FF 33.3%, #0000FF 66.6%, #008000 66.6%,  #008000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#FF0000), color-stop(33.3%,#FF0000), color-stop(33.3%,#0000FF), color-stop(66.6%,#0000FF), color-stop(66.1%,#008000), color-stop(100%,#008000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* IE10+ */
    background: linear-gradient(90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#008000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:3px;
    margin-bottom: 2%; 
}

グラデーションのボーダー

【表示例】

【CSS】

  /* グラデーションのボーダー */
 .blueLine {
    background: #dedede; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3296c8), color-stop(10%,#0075be), color-stop(50%,#1e9cd7), color-stop(70%,#cce0f4), color-stop(90%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* IE10+ */
    background: linear-gradient(90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dad45', endColorstr='#dedede',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:5px;
    margin-bottom: 2%; 
}

-WEB, CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

エクセルで方向キーを押すとセルじゃなくて画面が動いちゃうヨーっていう話。

エクセルで困ったときの備忘録

VIDEO・音楽編集の決定版

本業はWEB制作なはずなのですが、何でも屋的なことをしています。 フリーソフトですごく便利な編集ソフトに出会ったのでシェア!シェア!

毛モッサーな切り抜き方

切り抜きという作業は初歩の初歩。 とはいえ、(偉くなったとしても)現場では必ず使う、基礎的な作業です。 直線や流麗な線が多いもの、例えば車や建物ならスイスイーって切り抜けるかもしれませんね。 ところが …

制作環境を構築する

自宅、会社、持ち運び用ノート。。。 複数パソコンがある場合に「家にはアレあるけど会社になかった!」とかよくあります。 年々使うソフトは増えてるものの、だいたい決まってきてる感じなので、 自分で使うメジ …

no image

IEテスターなんていらない!

今までブラウザチェックのツールを色々探したりしておりました。 だってテスターってjavascriptうごかないんだもん。 このjQuery全盛期の時代に。 スクリーンショットを回数限定で見れるものとか …

名古屋AC

※虐待防止講演会2017 記事一覧

おススメ書籍(AD)

(AD)