HTMLとCSSでホワイトボード風テキストボックスを作る‼


記事が良かったら画面右下のGoodボタンを押してください。
・にほんブログ村に登録しています
   にほんブログ村 IT技術ブログ HTML/CSSへ      にほんブログ村 PC家電ブログへ
にほんブログ村 にほんブログ村

 

テーマ
HTMLとCSSでホワイトボード風のテキストボックスを作る‼

完成品

Point
ホワイトボード風テキストボックス

サンプルコード

HTML/CSS

<div class="white">
<span class="whitepoint">Point</span><br />
ホワイトボード</div>
<style type="text/css">
@font-face {
font-family: 'HuiFontP109';
src:url('/fonts/public/HuiFont/HuiFontP109.eot');
src:url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'),
url('/fonts/public/HuiFont/HuiFontP109.woff')format('woff'),
url('/fonts/public/HuiFont/HuiFontP109.ttf')format('truetype'),
url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
font-weight: normal;
font-style: normal;
}
.white {
font-family: HuiFontP109;
color: #000000;
background-color: #f2f2f2;
margin: 10px 0 10px 0;
padding: 15px;
border: 4px solid #000;
border-radius: 3px;
box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
line-height: 1.9;
}
.whitepoint {
color: #008000;
font-weight: bold;
border: 3px solid #008000;
}
</style>

あわせて読みたい

webdevopment.hatenablog.com