今回はふんわりした雰囲気の囲み枠を使ってみたいと思います。
参考にした記事はこちら!
白い線のステッチ風
<div style="border:2px dashed #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
背景の色をふんわり系にして、枠の線を白にすると全体にふんわりする感じかな?
色を変えてやってみます。
緑系
<div style="border: 2px dashed #ffffff; background-color: #d6e9ca; box-shadow: 0 0 0 6px #d6e9ca; padding: 16px; margin: 20px;">テキストを入力</div>
水色系
<div style="border: 2px dashed #ffffff; background-color: #eaf4fc; box-shadow: 0 0 0 6px #eaf4fc; padding: 16px; margin: 20px;">テキストを入力</div>
紫系
<div style="border: 2px dashed #ffffff; background-color: #dbd0e6; box-shadow: 0 0 0 6px #dbd0e6; padding: 16px; margin: 20px;">テキストを入力</div>
ふんわりした色を探すのがなかなか難しいですね!
実線のタイトル風
<div style="border:3px solid #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div>
このコードをHTML編集画面に貼り付けるとこうなります。↓
色を変えて作ってみます。
パステルカラーを使ってみました。
緑系
<div style="border: 3px solid #ffffff; background-color: #f2ffe5; box-shadow: 0 0 0 6px #f2ffe5; padding: 16px; margin: 20px;">テキストを入力</div>
水色系
<div style="border: 3px solid #ffffff; background-color: #e5ffff; box-shadow: 0 0 0 6px #e5ffff; padding: 16px; margin: 20px;">テキストを入力</div>
紫系
<div style="border: 3px solid #ffffff; background-color: #f2e5ff; box-shadow: 0 0 0 6px #f2e5ff; padding: 16px; margin: 20px;">テキストを入力</div>
爽やかな感じになりますね!
2重線でおしゃれ風
<div style="border:5px double #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div>
色を変えて作ってみます。
緑系
<div style="border: 5px double #ffffff; background-color: #f0f6da; box-shadow: 0 0 0 6px #f0f6da; padding: 16px; margin: 20px;">テキストを入力</div>
青系
<div style="border: 5px double #ffffff; background-color: #bccddb; box-shadow: 0 0 0 6px #bccddb; padding: 16px; margin: 20px;">テキストを入力</div>
紫系
<div style="border: 5px double #ffffff; background-color: #dbd0e6; box-shadow: 0 0 0 6px #dbd0e6; padding: 16px; margin: 20px;">テキストを入力</div>
ふんわりというよりちょっと渋めになったような?
色探しはなかなかハードルが高いです!