cssコピペでオシャレな囲み線や枠をメイクキング!

線_枠

本文の細かなデザインで
さりげなくサイトをオシャレに!

システムエンジニア(SE)かっきーです。

今回は、オシャレな囲み線や枠のデザインをご紹介します。
色も変えることができるので、ぜひ試してみてください。

cssでオシャレな枠と線(1)シンプルなボックス

シンプルなボックス背景です!
.box-1 {
    background-color: #ffcece;
    color: #1c66fe;
    margin: 2em 0;
    padding: 2em;
}

cssでオシャレな枠と線(2)2重線の囲み線

2重線の囲み線です
.box-2 {
    border: 4px double #f70c8B;
    margin: 2em 0;
    padding: 2em;
}

cssでオシャレな枠と線(3)アクセントをつけた囲み線

左は時にアクセントをつけた囲み線です
.box-3 {
    background-color: #ffbdd8;
    border-left: 8px solid #c92ad2;
    color: #c92ad2;
    margin: 2em 0;
    padding: 2em;
}

cssでオシャレな枠と線(4)枠線が少し離れているデザイン

枠線が少し離れているのでおしゃれに見えます
.box-4 {
    background-color: #cafbce;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #cafbce;
    color: #0a8915;
    margin: 2em 0;
    padding: 2em;
}

cssでオシャレな枠と線(5)縫い目のあるかわいいボックス

縫い目のあるかわいいボックス背景です
.box-5 {
    background-color: #8d1e47;
    border: 2px dashed #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 4px #8d1e47;
    color: #fff;
    margin: 2em 0;
    padding: 2em;
}

cssでオシャレな枠と線(6)右下の折り返しがアクセント

右下の折り返しがちょっとしたアクセントです
.box-6 {
    background-color: #c85d05;
    color: #fff;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.box-6::after {
    content: "";
    border-color: #853e04 #fff #fff #853e04;
    border-style: solid;
    border-width: 0 0 24px 24px;
    bottom: 0;
    position: absolute;
    right: 0;
}

cssでオシャレな枠と線(7)背景のズレがかわいい

背景がズレていてかわいいですよね
.box-7 {
    background-color: #fff;
    margin: 2em 0;
    padding: 2em;
    position: relative;
    z-index: 1;
}

.box-7::before,
.box-7::after {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.box-7::before {
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    top: 0;
    z-index: -1;
}
.box-7::after {
    background-color: #a4f5c8;
    top: 5px;
    left: 5px;
    z-index: -2;
}

cssでオシャレな枠と線(8)文字が目立つ

POINT は、お好みで変更してください
.box-8 {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.box-8::before {
    background-color: #fff;
    color: #da4033;
    content: "POINT";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

cssでオシャレな枠と線(9)ストライプ

簡単にストライプも作れちゃいます!
.box-9 {
    background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    color: #4a1086;
    margin: 2em 0;
    padding: 2em;
}

cssでオシャレな枠と線(10)うっすら立体感

立体感のあるのもどうですか
.box-10 {
    background-color: #190b56;
    border: 1px solid #210e75;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, .4) inset,
                0 0 4px rgba(0, 0, 0, .8) inset,
                2px 2px 2px rgba(0, 0, 0, .4);
    color: #fff;
    margin: 2em 0;
    padding: 2em;
}

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

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