用于WebKit的CSS技巧

2020-03-24 17:52:51

字體：大中小

供稿：網(wǎng)友

知識(shí)點(diǎn)：WebKit是開源的Web瀏覽器引擎，蘋果的Safari、谷歌的Chrome瀏覽器都是基于這個(gè)框架來開發(fā)的。相關(guān)：Safari參考樣式庫之webkit使用在Safari和WebKit中可用的CSS高級(jí)特性，你可以為你的網(wǎng)站和網(wǎng)絡(luò)應(yīng)用帶來一個(gè)新的級(jí)別的令人興奮的東西。WebKit是Safari瀏覽器和Google Chrome的渲染引擎。因?yàn)闉g覽器會(huì)簡單的無視他們不支持的CSS屬性，所以在其他瀏覽器中，這些秘訣中的大部分可能會(huì)無效。使用只用WebKit支持的屬性的網(wǎng)頁在基于WebKit的瀏覽器中會(huì)有非常出色的視覺和體驗(yàn)，并且在其他瀏覽器中也會(huì)有某些效果。注意: 你在本文中看到的-webkit前綴是一個(gè)瀏覽器生產(chǎn)商通常使用的一種方式，它暗示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分。比如，box-shadow屬性還只是開發(fā)中的CSS3標(biāo)準(zhǔn)的一部分。基于Mozilla的瀏覽器使用-moz前綴。簡單的陰影讓我們從向你展示為網(wǎng)頁中的任意元素添加陰影效果是多么的簡單開始吧。下面的代碼片段將演示一個(gè)輕微旋轉(zhuǎn)并有陰影的圖片，這兩個(gè)效果都是使用CSS添加的。
以下是代碼片段：
img src="megan.jpg" / 上面的代碼中，transform CSS 屬性實(shí)現(xiàn)圖片旋轉(zhuǎn)，box-shadow屬性為圖片添加陰影效果。你可以改變旋轉(zhuǎn)的角度，或者是陰影的參數(shù)，僅僅調(diào)整那些參數(shù)就OK了。嘗試一下，你將看到下面演示的旋轉(zhuǎn)圖片效果。截圖1.圖片選擇和陰影上面的CSS是在一個(gè)style屬性中，當(dāng)然你可以把它們作為一個(gè)類放到一個(gè)style標(biāo)簽或獨(dú)立的樣式文件中。過去，服務(wù)器端代碼常常被請求用來處理圖片來實(shí)現(xiàn)陰影效果。現(xiàn)在使用CSS擴(kuò)展你就可以在瀏覽器中實(shí)現(xiàn)它，而且看起來很棒。滾動(dòng)與彈出下一個(gè)示例將演示當(dāng)你把鼠標(biāo)放到一張圖片上事，它會(huì)彈出的效果。實(shí)現(xiàn)這些只需要使用一個(gè)hover樣式和一個(gè)度數(shù)改變。該效果的CSS如下所示。
以下是代碼片段：
style
img { -webkit-transform: scale(0.5); }
img:hover { -webkit-transform: scale(1); }
/style
img src="megan.jpg" / 鼠標(biāo)滑過圖片，它就會(huì)彈出并變大，如下所示。截圖2.翻轉(zhuǎn)后的圖片將鼠標(biāo)從圖片上挪開，圖片又會(huì)恢復(fù)原狀。截圖3.翻轉(zhuǎn)之前的圖片正如你所能看到的那樣，你可以使用幾行CSS來實(shí)現(xiàn)這個(gè)效果。動(dòng)畫圖片翻轉(zhuǎn)另一個(gè)前端工程師常見的現(xiàn)象是，當(dāng)用戶將鼠標(biāo)放到圖片上時(shí)，變換為另一張圖片。在這個(gè)技巧中，讓我們看看如何讓圖片從一個(gè)到另一個(gè)漸變交換，而不是簡單的直接交換兩張圖片。實(shí)現(xiàn)這個(gè)效果的CSS和HTML如下：
以下是代碼片段：
div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
div.swapper:hover img.img1, img.img2 { opacity: 0; }
以下是代碼片段：
div
img src="megan.jpg"
img src="megan2.jpg"
/div 在這里，”transition”屬性使用簡化符號(hào)來指定（圖片）過渡的所有參說。第一個(gè)參數(shù)將屬性指定為動(dòng)畫，第二個(gè)參數(shù)指定時(shí)間，第三個(gè)參數(shù)為簡便指定時(shí)間功能。”ease-in-out”只是眾多你可以只有支配的時(shí)間功能中的一個(gè)。你還可以指定一個(gè)線形變換、漸入、漸出或高級(jí)的立體貝塞爾曲線效果！你可以自己親身體驗(yàn)一下這個(gè)效果，你將會(huì)看到下圖中的效果。截圖4. 一個(gè)CSS只能制定一個(gè)漸變效果設(shè)想: 純CSS的漸變效果！CSS 多卷布局使用純CSS實(shí)現(xiàn)多卷，而不用HTML的table是件相當(dāng)棘手的事情。由于CSS3用于多卷布局的屬性在Safari和WebKit中已經(jīng)可用，你可以明確的定義卷數(shù)，正確實(shí)現(xiàn)你所想要的效果。先看一下下面的CSS和HTML代碼：
以下是代碼片段：
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 25px;
-moz-column-count: 3;
-moz-column-gap: 25px;
column-count: 3;
column-gap: 25px;
}
以下是代碼片段：
div id="columns"
p Column A /p
p Column B /p
p Column C /p
/div 這些代碼定義了卷中的HTML代碼。這些代碼定義了這個(gè)DIV應(yīng)該被分成3卷。每個(gè)段落就在他們自己的卷里面。這些代碼同樣說明了一種在使用一種尚未成為W3C標(biāo)準(zhǔn)的一部分時(shí)的可靠機(jī)制.這段代碼指定了”column-count”和”column-gap”屬性，并帶有”-webkit”和”-moz”前綴，以及沒有前綴的情況。這意味著這段代碼將會(huì)像基于Mozilla的瀏覽器一樣可以在Safari和WebKit的瀏覽器中運(yùn)行，而且一旦CSS3標(biāo)準(zhǔn)被最終確定下來之后，那些前綴就可以去掉了。你可以在下面看到效果：截圖5. 多卷使用這種方法，如果瀏覽器不支持多卷布局，段落將一個(gè)接著一個(gè)顯示。正如本文前面提到的，這些方法在不支持它們的瀏覽器中會(huì)被降級(jí)（也就是無效）。簡單的CSS圓角圓角可能會(huì)給網(wǎng)站頁面帶來一些麻煩，比如，它可能需要為每個(gè)角使用一張圖片，但是這可能會(huì)引起某些表現(xiàn)上的問題（比如不同的瀏覽器可能表現(xiàn)上會(huì)有細(xì)微的差別）。在WebKit中有效的CSS3的”border-radius”屬性讓實(shí)現(xiàn)圓角變得簡單，它只需要幾行簡單的CSS代碼。如下所示：
以下是代碼片段：
#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
text-align:center; background:#eee; }
以下是代碼片段：
div id="boxes"
div
All sides
/div
div
Opposite corners
/div
div
Top
/div
div
Side
/div
/div 這段樣式代碼定義所有的在boxes里面的DIV都要有一個(gè)比較大的border（邊框）、邊距、寬度、背景等。然后每個(gè)div標(biāo)簽的border-radius被設(shè)置為不同的方式。你可以在下面看到運(yùn)行結(jié)果：截圖6. 純CSS圓角第一個(gè)div中border-radius被設(shè)置為所有的角。然后第二個(gè)div，只是左下角和右上角。第三個(gè)div就像一個(gè)tab，只是上面的角被設(shè)置為圓角。最后一個(gè)div被設(shè)置為單邊的圓角，只有右邊的兩個(gè)角是圓角。全新的表單控制WebKit同樣提供一些新的控制來使用于你的頁面。下面的例子演示一個(gè)水平滑動(dòng)條、一些新樣式的按鈕以及一個(gè)很像Safari工具欄的搜索框
以下是代碼片段：
input type="range" br/ br/
button gradient button /button br/ br/
button aqua button /button br/ br/
input type="text" html' target='_blank'>value="kitten" /input br/ 你可以通過下面的截圖看到演示效果。截圖7. WebKit可用的一些新的按鈕新的滑動(dòng)控制條尤其好用，因?yàn)檫@個(gè)滑動(dòng)控制條的確不太好用JavaScript來寫，并且還要在每個(gè)瀏覽器中都兼容。一個(gè)簡單的Pop-out最后的例子是一個(gè)簡單的使用了一些在WebKit中可用的視覺效果的彈出框，使用的CSS和JavaScript 代碼如下：
以下是代碼片段：
#box1 {
z-index: 100;
position:absolute;
top:5px; left:5px;
width:100px;
height:250px;
padding:5px;
-webkit-border-radius:10px;
border: 2px solid black;
background: #dddddd;
z-index: 200;
}
#slider {
z-index: 100;
position:absolute;
top:30px; left:5px;
height:200px;
width:90px;
padding-top:10px;
padding-left:15px;
-webkit-border-radius:10px;
border: 1px solid black;
background: #eeeeee;
-webkit-transition: -webkit-transform 0.5s ease-in;
}
以下是代碼片段：
script
function popout() {
document.getElementById(’slider’).style.webkitTransform = ’translate(105px,0)’;
}
/script 這里有個(gè)父級(jí)盒子，以及在它下面的一個(gè)滑動(dòng)盒子。滑動(dòng)盒子上的”transition”屬性定義動(dòng)作將花費(fèi)半分鐘，并使用一個(gè)”ease-in”時(shí)間特效。JavaScript 通過設(shè)置”transform”屬性到滑動(dòng)盒子，從而在用戶點(diǎn)擊一個(gè)鏈接時(shí)引發(fā)動(dòng)作。也就是說，動(dòng)畫只是在用戶執(zhí)行一個(gè)像點(diǎn)擊彈出鏈接一樣的動(dòng)作之后才會(huì)運(yùn)行。這個(gè)例子的HTML代碼如下：
以下是代碼片段：
div id="slider"
Slider br/ Content
/div
div id="box1"
a href="javascript:popout();" Popout /a
/div 你可以嘗試這個(gè)例子，就像下面這樣：截圖8. 滑動(dòng)盒子在彈出之前。如果你在鏈接上點(diǎn)擊，那么這個(gè)滑動(dòng)元素就會(huì)很快的滑出。截圖9. 滑出之后的滑出盒子這些例子的絕大部分功能是由CSS實(shí)現(xiàn)的，只是有很少的JavaScript。未來走向當(dāng)談到在Safari和WebKit中用新的和獨(dú)特的方式使用CSS，這篇文章只是描述了一個(gè)可行性。有各種各樣的新的CSS特性可以用來創(chuàng)建獨(dú)特的、有視覺沖擊力的效果，你可以單獨(dú)的實(shí)現(xiàn)他們，也可以聯(lián)合使用！題記：這篇文章來自于Apple開發(fā)者社區(qū)，專門介紹WebKit核心的瀏覽器的一些新的特性，其中最主要的是對(duì)CSS3的支持。如果你想開發(fā)一些很酷的界面效果，我建議你使用WebKit核心的瀏覽器，因?yàn)槟壳皝碚f，無論是Safari還是Chrome，都可謂是瀏覽器中的先鋒——對(duì)W3C的支持最好，JS引擎的效率最高，瀏覽器的執(zhí)行效率和反應(yīng)速度也是最快的。我們不能被落后的瀏覽器拖住了我們前進(jìn)的步伐，我們固然要考慮比較落后的瀏覽器，但是對(duì)于前端開發(fā)人員來說，進(jìn)步更重要html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS命名規(guī)則

下一篇：CSS 循序漸進(jìn)（四）表里春秋