CSS3でつくるええ感じのテキストボックス calmbooks Follow 2011-02-19 22:05:41 License: MIT License Fork10 Fav14 View59373 for GoogleChrome or Safari Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 26 lines CSS 111 lines for GoogleChrome or Safari CSS3でつくるええ感じのテキストボックス <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> 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; } } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? for GoogleChrome or Safari 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> animation form gradient textbox Tweet twitter Tags animation css3 form gradient input textbox Favorite by hikipuro Anony gmtsx pandahatente.. smallwind191.. sou_sk oshige dakkie jose: CSS3 Ituki: css3テキストボックス Shingo_Fukuy..: css3 Mayumi.Hara: textbox isimiya: input gryng02: 実務で使えそう! Forked sort new page view favorite forked forked: CSS3でつくるええ感じのテキストボックス .katuo 00 23views 2/26/111 animation form gradient textbox forked: CSS3でつくるええ感じのテキストボックス kumaken09 00 65views 2/26/125 animation form gradient textbox forked: CSS3でつくるええ感じのテキストボックス Anony 00 26views 2/26/111 animation form gradient textbox forked: CSS3でつくるええ感じのテキストボックス fujitajapan 00 59views 2/26/111 animation form gradient textbox 1 2 3NEXT>>