码迷，mamicode.com
首页 > Web开发 > 详细

CSS3 实现厉害的文字和输入框组合效果

时间：2014-08-19 18:15:25      阅读：322      评论：0      收藏：0      [点我收藏+]

标签：style   http   color   os   io   ar   art   div   

最近在忙着弄网站，学到了不少效果，这又是一个厉害的
bubuko.com,布布扣
 
bubuko.com,布布扣

 

 

Html代码  bubuko.com,布布扣
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  4.         <title>发送微博页面</title>  
  5.   
  6. <style>  
  7. html{padding:0px;margin:0px;}  
  8. body{padding:0px;margin:0px;text-align:center;}  
  9.   
  10. /** 弹出层背景 **/  
  11. .pop-bg{filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;border-radius: 15px;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(188, 188, 188, 0.5);}  
  12. .pop-body{padding:10px;}  
  13. .pop-body-title{float:left;border-radius: 10px;width:100%;border:1px solid #4096ee;}  
  14. .title-text{float:left;color: black; font-size: 22px;padding-left:10px;}  
  15. .title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}  
  16. .title-close a{text-decoration: none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}  
  17. .title-close a:hover{text-decoration: none;color:red;display: inline-block;background:#c0d3e7;border-radius: 5px;padding-left:5px;padding-right:5px;}  
  18.   
  19. /** 内容部份 **/  
  20. .pop-body-context{  
  21.     border-radius: 10px;width:100%;border:1px solid #4096ee;  
  22.     float:left;  
  23.     margin-top:15px;  
  24. }  
  25.   
  26. .pop-body-c-title{  
  27.     float:left;  
  28.       
  29. }  
  30.   
  31. .a-btn{  
  32.     -moz-border-bottom-colors: none;  
  33.     -moz-border-image: none;  
  34.     -moz-border-left-colors: none;  
  35.     -moz-border-right-colors: none;  
  36.     -moz-border-top-colors: none;  
  37.     -moz-transition: all 0.3s linear 0s;  
  38.     background: -moz-linear-gradient(center top , #FEDA71 0%, #FEBB4A 100%) repeat scroll 0 0 transparent;  
  39.     border-color: #F5B74E #E5A73E #D6982F;  
  40.     border-radius: 4px 4px 4px 4px;  
  41.     border-style: solid;  
  42.     border-width: 1px;  
  43.     box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #FEE395 inset;  
  44.     display: inline-block;  
  45.     float: left;  
  46.     height: 34px;  
  47.     margin: 10px;  
  48.     margin-right: 3px;  
  49.     margin-left: 4px;  
  50.     overflow: hidden;  
  51.     padding: 5px 130px 0 0px;  
  52.     position: relative;  
  53.     text-decoration: none;  
  54. }  
  55. .a-btn-text{  
  56.     padding-top:5px;  
  57.     display:block;  
  58.     font-size:14px;  
  59.     white-space:nowrap;  
  60.     color:#996633;  
  61.     text-shadow:0 1px 0 #fedd9b;  
  62.     -webkit-transition:all 0.3s linear;  
  63.     -moz-transition:all 0.3s linear;  
  64.     -o-transition:all 0.3s linear;  
  65.     transition:all 0.3s linear;  
  66.     font-weight:bold;  
  67. }  
  68. .a-btn-slide-text{  
  69.     position:absolute;  
  70.     top:35px;  
  71.     left:0px;  
  72.     width:auto;  
  73.     height:0px;  
  74.     background:#fff;  
  75.     color:#996633;  
  76.     font-size:13px;  
  77.     white-space:nowrap;  
  78.     font-family:Georgia, serif;  
  79.     font-style:italic;  
  80.       
  81.     overflow:hidden;  
  82.     line-height:40px;  
  83.     -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
  84.     -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
  85.     box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
  86.     -webkit-transition:height 0.3s linear;  
  87.     -moz-transition:height 0.3s linear;  
  88.     -o-transition:height 0.3s linear;  
  89.     transition:height 0.3s linear;  
  90. }  
  91. .a-btn-icon-right{  
  92.     position:absolute;  
  93.     right:0px;  
  94.     top:0px;  
  95.     height:41px;  
  96.     width:130px;  
  97.     border-left:1px solid #f5b74e;  
  98.     -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  99.     -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  100.     box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  101. }  
  102. .a-btn:hover{  
  103.     height:65px;  
  104.     -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
  105.     -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
  106.     box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
  107. }     
  108. .a-btn:hover .a-btn-text{  
  109.     text-shadow:1px 1px 1px rgba(0,0,0,0.2);  
  110.     color:#fff;  
  111. }  
  112. .a-btn:hover .a-btn-slide-text{  
  113.     height:40px;  
  114. }  
  115. .a-btn-slide-text input{  
  116.     float:left;  
  117.     margin-top:4px;  
  118.     margin-left:2px;  
  119. }  
  120. .pop-body-c-text{  
  121.     padding-left:3px;  
  122. }  
  123. .pop-body-c-textarea{  
  124.     width:780px;  
  125.     height:100px;  
  126. }  
  127. .pop-body-row-u{  
  128.     padding-top:5px;  
  129.     padding-left:10px;  
  130. }  
  131. .a-t-i-r-t{  
  132.     font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;  
  133. }  
  134.   
  135. .pop-body-images-l{  
  136.     padding:10px;  
  137.       
  138. }  
  139.   
  140. .pop-body-ims-panel{  
  141.     padding:10px;  
  142. }  
  143.   
  144. .pop-b-i-i-img{  
  145.     border-radius:8px;  
  146.     float:left;  
  147.     position:relative;  
  148.     left:-20px;  
  149.       
  150. }  
  151. .pop-b-i-i-unit{  
  152.     float:left;  
  153. }  
  154. .pop-b-i-i-unit input{  
  155.     float:left;  
  156.     position:relative;  
  157.     z-index:99;  
  158. }  
  159. </style>  
  160.     </head>  
  161.   
  162.     <body>  
  163.         <br />  
  164.         <div style="float:left;width:820px;height:200px;position:relative;left:100px;">  
  165.             <div class="pop-bg" style="float:left;position:relative;width:820px;height:200px;"></div>  
  166.             <div class="pop-body" style="float:left;text-align:left;position:relative;top:-200px;width:98%;">  
  167.                 <!-- 头部 -->  
  168.                 <div class="pop-body-title">  
  169.                     <div class="title-text">标题</div>  
  170.                     <div class="title-close"><a href="#">关闭</a></div>  
  171.                 </div>  
  172.   
  173.                 <!-- 内容部分 -->  
  174.                 <div class="pop-body-context">  
  175.                     <div class="pop-body-c-title">  
  176.                         <a class="a-btn" href="#">  
  177.                             <span class="a-btn-text">栏目名称</span>  
  178.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t">请输入</div></span>  
  179.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  180.                         </a>  
  181.   
  182.                         <a class="a-btn" href="#">  
  183.                             <span class="a-btn-text">中文名称</span>  
  184.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
  185.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  186.                         </a>  
  187.   
  188.                         <a class="a-btn" href="#">  
  189.                             <span class="a-btn-text">英文名称</span>  
  190.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
  191.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  192.                         </a>  
  193.   
  194.                         <a class="a-btn" href="#">  
  195.                             <span class="a-btn-text">适配类型</span>  
  196.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
  197.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  198.                         </a>  
  199.                     </div>  
  200.   
  201.                       
  202.             </div>  
  203.         </div>  
  204.   
  205.   
  206.     </body>  
  207. </html>  

 

CSS3 实现厉害的文字和输入框组合效果,布布扣,bubuko.com

CSS3 实现厉害的文字和输入框组合效果

标签：style   http   color   os   io   ar   art   div   

原文地址：http://www.cnblogs.com/xiaochao12345/p/3922449.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！