好看的css3样式,好看的CSS
如何建立一个样式新颖的CSS3搜索框
无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框?在今天的文章中,大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在开始介绍前你也可以下载源代码或者查看在线演示。HTML举例:正如接下来你所看到的,标记很少,并且很容易理解:form class=“cf form-wrapper”input type=“text” placeholder=“Search here.。.” requiredbutton type=“submit”Search/button/form你可能注意到了HTML5的特殊属性,像placeholder和required,简介如下:.placeholder-基本上,这个属性的作用在于当文本框获得焦点之前,先在文本框里显示一个域的信息,直到获得焦点后,域的信息被隐藏。.required-这个属性说明了当前元素是表单提交中的一个必需属性。HTML5也给我们带来了一个新的type属性:type="search"。小贴士:HTML 元素像img 和input 都没有内容,所以,像before这样的伪元素不会为我们的搜索框呈现任何箭头。我的解决方案是使用button type=“submit” 元素代替普通的input type=“submit”。这样,我们就可以用ENTER键来提交表单。CSS举例接下来,你将会看到demo里必要的样式:清除浮动.cf:before, .cf:after{content:“”;display:table;}.cf:after{clear:both;}.cf{zoom:1;}表单元素有前缀的属性像-moz、-box、-shadow 不包括在内,我只想让下面的代码保持干净。/* Form wrapper styling */.form-wrapper {width: 450px;padding: 15px;margin: 150px auto 50px auto;background: #444;background: rgba(0,0,0,.2);border-radius: 10px;box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);}/* Form text input */.form-wrapper input {width: 330px;height: 20px;padding: 10px 5px;float: left;font: bold 15px ‘lucida sans’,‘trebuchet MS’,‘Tahoma’;border: 0;background: #eee;border-radius: 3px 0 0 3px;}.form-wrapper input:focus {outline: 0;background: #fff;box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}.form-wrapper input::-webkit-input-placeholder {color: #999;font-weight: normal;font-style: italic;}.form-wrapper input:-moz-placeholder {color: #999;font-weight: normal;font-style: italic;}.form-wrapper input:-ms-input-placeholder {color: #999;font-weight: normal;font-style: italic;}/* Form submit button */.form-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 40px;width: 110px;font: bold 15px/40px ‘lucida sans’,‘trebuchet MS’,‘Tahoma’;color: #fff;text-transform: uppercase;background: #d83c3c;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);}.form-wrapper button:hover{background: #e54040;}.form-wrapper button:active,.form-wrapper button:focus{background: #c42f2f;outline: 0;}.form-wrapper button:before { /* left arrow */content: ‘’;position: absolute;border-width: 8px 8px 8px 0;border-style: solid solid solid none;border-color: transparent #d83c3c transparent;top: 12px;left: -6px;}.form-wrapper button:hover:before{border-right-color: #e54040;}.form-wrapper button:focus:before,.form-wrapper button:active:before{border-right-color: #c42f2f;}.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */border: 0;padding: 0;}希望大家能喜欢这个教程,并且期待你们的反馈。谢谢阅读!
成都创新互联是一家集网站建设,修文企业网站建设,修文品牌网站建设,网站定制,修文网站建设报价,网络营销,网络优化,修文网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
如何利用CSS3制作3D效果文字具体实现样式
复制代码代码如下: .example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}译者注:X表示x轴上的位移,可为负值;Y表示y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;Color为投影的颜色。 堆叠多层CSS投影 虽然我们没有必要堆叠多层投影,但通过堆叠多层投影会有更好的3D效果 开始创建3D文字 你可能会选择比文字更深的颜色来作为投影的颜色,所以这个例子中我就用白色的文字,用深一点的灰色作为投影颜色,这个例子中我将H2的文字渲染3D效果,css代码如下: 复制代码代码如下:h2{text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下:好了,到这里你已经创建了基本的3D文字,然而,让我们进一步来实现鼠标滑过的文字放大效果,并用css的transision属性实现圆滑的淡入淡出效果。 首先用transform属性实现滑过字体放大 复制代码代码如下:h2:hover{/* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */}效果如下:然后利用transition属性实现淡入淡出效果 复制代码代码如下:h2{/* CSS3 Transition Effect */ -webkit-transition: all 0.12s ease-out; /* Safari Chrome */ -moz-transition: all 0.12s ease-out; /* Firefox */ -o-transition: all 0.12s ease-out; /* Opera */}到此,我们就用CSS3实现了3D效果的文字,并且在鼠标滑过是让字体放大,且有淡入淡出的效果,这一切是用纯CSS实现的哦。
html5 css3样式图标怎么做
html5 css3样式图标制作方法:
1、html代码:
div id="boxes"
div id="boxShortcode"border-radius: 40px (shortcode)/div
div id="box1"border-top-right-radius: 40px (same on both axis)/div
div id="box2"border-top-right-radius: 20px 40px (x y) /div
div id="box3"border-top-right-radius: 40px 20px (x y) /div
/div
2、css样式代码:
#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }
#boxShortcode {
background: cyan;
border-radius: 40px;
}
#box1 {
background: red;
border-top-right-radius: 40px;
}
#box2 {
background: yellow;
border-top-right-radius: 20px 40px;
}
#box3 {
background: lime;
border-top-right-radius: 40px 20px;
}
3、运行结果:
请问这个样式用css3怎么写呢?请大家帮下忙啊
#Sample {
margin:0 auto; /*居中*/
width:80%;
height:50px;
background-color:#EEE;
border:2px solid #666; /* 宽度 样式 颜色 */
border-radius:5px; /* 分开写可以控制每个角 5px 5px 5px 5px,从左上顺时针设置 */
box-shadow:0 0 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.8);/* 每个盒子阴影效果之间用,分开;inset代表内部阴影;x方向 y方向 模糊值 rgba/16进制表示颜色,rgba(红,绿,蓝,透明度)黑色0,0,0;白色255,255,255;透明度最大1,16进制#000表示无法设置透明度 */
}
border-radius和box-shadow需要浏览器对css3支持,IE9部分支持,低于IE9需要hack,其他浏览器最新版本基本都支持。较老版本需要加前缀比如 -webkit-border-radius: 代表safari等webkit浏览器,-o-代表opera,-moz-代表firefox;
边框周围3个颜色很清楚了,一个是边框本身的颜色,一个是外阴影颜色,一个是内阴影颜色。
分享题目:好看的css3样式,好看的CSS
URL地址:http://scyanting.com/article/phijds.html