建站
咨詢
售后
建站咨詢
新聞中心
如何建立一個(gè)樣式新穎的CSS3搜索框
無論是網(wǎng)站還是web應(yīng)用，都會為了增強(qiáng)用戶體驗(yàn)而添加它，那么你是不是也想過設(shè)計(jì)一個(gè)別致的搜索框？在今天的文章中，大家將會學(xué)到如何使用偽元素來創(chuàng)建一個(gè)超酷的CSS3搜索框。當(dāng)然在開始介紹前你也可以下載源代碼或者查看在線演示。HTML舉例：正如接下來你所看到的，標(biāo)記很少，并且很容易理解：form class=“cf form-wrapper”input type=“text” placeholder=“Search here.。.” requiredbutton type=“submit”Search/button/form你可能注意到了HTML5的特殊屬性，像placeholder和required，簡介如下：.placeholder－基本上，這個(gè)屬性的作用在于當(dāng)文本框獲得焦點(diǎn)之前，先在文本框里顯示一個(gè)域的信息，直到獲得焦點(diǎn)后，域的信息被隱藏。.required－這個(gè)屬性說明了當(dāng)前元素是表單提交中的一個(gè)必需屬性。HTML5也給我們帶來了一個(gè)新的type屬性：type＝"search"。小貼士：HTML 元素像img 和input 都沒有內(nèi)容，所以，像before這樣的偽元素不會為我們的搜索框呈現(xiàn)任何箭頭。我的解決方案是使用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 不包括在內(nèi)，我只想讓下面的代碼保持干凈。/* 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;}希望大家能喜歡這個(gè)教程，并且期待你們的反饋。謝謝閱讀！
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),修文企業(yè)網(wǎng)站建設(shè),修文品牌網(wǎng)站建設(shè),網(wǎng)站定制,修文網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,修文網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
如何利用CSS3制作3D效果文字具體實(shí)現(xiàn)樣式
復(fù)制代碼代碼如下: .example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}譯者注：X表示x軸上的位移，可為負(fù)值；Y表示y軸上的位移，可為負(fù)值；Blur表示投影的寬度，不能為負(fù)值；Color為投影的顏色。 堆疊多層CSS投影 雖然我們沒有必要堆疊多層投影，但通過堆疊多層投影會有更好的3D效果 開始創(chuàng)建3D文字 你可能會選擇比文字更深的顏色來作為投影的顏色，所以這個(gè)例子中我就用白色的文字，用深一點(diǎn)的灰色作為投影顏色，這個(gè)例子中我將H2的文字渲染3D效果，css代碼如下： 復(fù)制代碼代碼如下: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 */}效果如下：好了，到這里你已經(jīng)創(chuàng)建了基本的3D文字，然而，讓我們進(jìn)一步來實(shí)現(xiàn)鼠標(biāo)滑過的文字放大效果，并用css的transision屬性實(shí)現(xiàn)圓滑的淡入淡出效果。 首先用transform屬性實(shí)現(xiàn)滑過字體放大 復(fù)制代碼代碼如下: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屬性實(shí)現(xiàn)淡入淡出效果 復(fù)制代碼代碼如下: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實(shí)現(xiàn)了3D效果的文字，并且在鼠標(biāo)滑過是讓字體放大，且有淡入淡出的效果，這一切是用純CSS實(shí)現(xiàn)的哦。
html5 css3樣式圖標(biāo)怎么做
html5 css3樣式圖標(biāo)制作方法：
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、運(yùn)行結(jié)果：
請問這個(gè)樣式用css3怎么寫呢？請大家?guī)拖旅Π?/h2>
#Sample????{
margin:0?auto;?/*居中*/
width:80%;
height:50px;
background-color:#EEE;
border:2px?solid?#666;?/*?寬度?樣式?顏色?*/
border-radius:5px;?/*?分開寫可以控制每個(gè)角?5px?5px?5px?5px，從左上順時(shí)針設(shè)置?*/
box-shadow:0?0?5px?rgba(0,0,0,.6),inset?0?1px?0?rgba(255,255,255,.8);/*?每個(gè)盒子陰影效果之間用,分開；inset代表內(nèi)部陰影；x方向?y方向?模糊值?rgba/16進(jìn)制表示顏色，rgba(紅,綠,藍(lán),透明度)黑色0,0,0;白色255,255,255;透明度最大1，16進(jìn)制#000表示無法設(shè)置透明度?*/
}
border-radius和box-shadow需要瀏覽器對css3支持，IE9部分支持，低于IE9需要hack，其他瀏覽器最新版本基本都支持。較老版本需要加前綴比如 -webkit-border-radius: 代表safari等webkit瀏覽器，-o-代表opera，-moz-代表firefox；
邊框周圍3個(gè)顏色很清楚了，一個(gè)是邊框本身的顏色，一個(gè)是外陰影顏色，一個(gè)是內(nèi)陰影顏色。
本文標(biāo)題：好看的css3樣式,好看的CSS
當(dāng)前地址：http://www.dlmjj.cn/article/phijds.html
