CSS3でつくるええ感じのテキストボックス

calmbooks

2011-02-19 22:05:41

License: MIT License

Fork: 10

Fav: 14

View: 59373

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 26 lines
CSS 111 lines

for GoogleChrome or Safari

CSS3でつくるええ感じのテキストボックス

CSS3でつくるええ感じのテキストボックス

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  font: 11px sans-serif;
  line-height: 1.2;
}
div {
  margin: 0 0 0 20px;
}
p {
  margin: 10px 0 0;
}
form {
  margin: 3px 0 0;
}
.textbox {
  height: 2em;
  width: 250px;
  padding: 0 5px;
  font-size: 20px;
}
#design01 {
  background: #D9F5FF;
  border: solid 5px #29ABE2;
  font-weight: bold;
  color: #29ABE2;
}
#design01:focus {
  background: #FFEF94;
}
#design02 {
  border: solid 5px #29ABE2;
  color: #29ABE2;
  font-size: 15px;
  font-weight: bold;
  
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF));
  background: -moz-linear-gradient(#ddd, #fff);
}
#design02:focus {
  background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0));
  background: -moz-linear-gradient(#FFED85, #FFF6C0);
}
#design03 {
  width: 150px;
  border: solid 4px #29ABE2;
  color: #29ABE2;
  font-weight: bold;
  font-size: 12px;
  
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF));
  background: -moz-linear-gradient(#ddd, #fff);
  
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
#design03:focus {
  border: solid 5px #29ABE2;
  width: 250px;
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0));
  background: -moz-linear-gradient(#FFED85, #FFF6C0);
}
#design04 {
  border: solid 5px #29ABE2;
  color: #29ABE2;
  font-weight: bold;
  
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF));
  background: -moz-linear-gradient(#ddd, #fff);
}
#design04:focus {
  border: solid 5px #E02B2B;
  color: #E02B2B;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0));
  background: -moz-linear-gradient(#FFED85, #FFF6C0);
  -webkit-animation: 'design04' 1s ease 0s infinite alternate;
}
@-webkit-keyframes 'design04' {
  0% {
    border: solid 5px #29ABE2;
  }
  100% {
    border: solid 5px #E02B2B;
  }
}

for GoogleChrome or Safari<div> <p>いつものテキボ</p> <form> <input type="text" id="always" name="always" /> </form> <p>CSS3は使わないテキボ。<br>backgroundやborderなどを指定</p> <form> <input type="text" class="textbox" id="design01" name="design01" /> </form> <p>角丸やグラデなどのCSS3での装飾を加えたテキボ。<br>入力テキストにはドロップシャドウ。</p> <form> <input type="text" class="textbox" id="design02" name="design02" /> </form> <p>transitionを用いたテキボ。<br>フォーカスで入力しやすくなる。</p> <form> <input type="text" class="textbox" id="design03" name="design03" /> </form> <p>CSSアニメーションを用いたテキボ。<br>フォーカス中にアニメーション。</p> <form> <input type="text" class="textbox" id="design04" name="design04" /> </form> </div>* { margin: 0; padding: 0; } body { background-color: #fff; font: 11px sans-serif; line-height: 1.2; } div { margin: 0 0 0 20px; } p { margin: 10px 0 0; } form { margin: 3px 0 0; } .textbox { height: 2em; width: 250px; padding: 0 5px; font-size: 20px; } #design01 { background: #D9F5FF; border: solid 5px #29ABE2; font-weight: bold; color: #29ABE2; } #design01:focus { background: #FFEF94; } #design02 { border: solid 5px #29ABE2; color: #29ABE2; font-size: 15px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF)); background: -moz-linear-gradient(#ddd, #fff); } #design02:focus { background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0)); background: -moz-linear-gradient(#FFED85, #FFF6C0); } #design03 { width: 150px; border: solid 4px #29ABE2; color: #29ABE2; font-weight: bold; font-size: 12px; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF)); background: -moz-linear-gradient(#ddd, #fff); transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; } #design03:focus { border: solid 5px #29ABE2; width: 250px; font-size: 20px; background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0)); background: -moz-linear-gradient(#FFED85, #FFF6C0); } #design04 { border: solid 5px #29ABE2; color: #29ABE2; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF)); background: -moz-linear-gradient(#ddd, #fff); } #design04:focus { border: solid 5px #E02B2B; color: #E02B2B; background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0)); background: -moz-linear-gradient(#FFED85, #FFF6C0); -webkit-animation: 'design04' 1s ease 0s infinite alternate; } @-webkit-keyframes 'design04' { 0% { border: solid 5px #29ABE2; } 100% { border: solid 5px #E02B2B; } }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

http://jsdo.it/calmbooks/niceTextbox CSS3でつくるええ感じのテキストボックス
Tweet

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/3qZs/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/calmbooks/niceTextbox" title="CSS3でつくるええ感じのテキストボックス">CSS3でつくるええ感じのテキストボックス - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code