繼Google網頁傾斜後,我的網站也斜了!?

最近Google行動版的傾斜網頁在台灣媒體界爭相報導之時,我的網站也不明原因的傾斜了。在火狐中網頁已經呈現傾斜狀態,想說可能是網頁瀏覽器問題,於是打開了Chrome看看…不料,Google大神的瀏覽器居然也是這副德行!還少了字! 那麼Opera呢?天啊啊啊啊啊啊!我明明就沒在搜尋欄上打傾斜,我也不是手機板啊,怎麼會這樣呢???? 難道是被駭客入侵?

IE瀏覽器無法呈現此效果。Firefox為最佳效果。

最近Google行動版的傾斜網頁在台灣媒體界爭相報導之時,我的網站也不明原因的傾斜了。

在火狐中網頁已經呈現傾斜狀態,想說可能是網頁瀏覽器問題,於是打開了Chrome看看…

不料,Google大神的瀏覽器居然也是這副德行!還少了字! 那麼Opera呢?

天啊啊啊啊啊啊!我明明就沒在搜尋欄上打傾斜,我也不是手機板啊,怎麼會這樣呢???? 難道是被駭客入侵?

其實,不是駭客入侵,也跟瀏覽器沒關係(IE? 忽略XD),這是CSS3的特效語法 transform 的其中一個應用「旋轉(rotate)」。基本語法參照以下:

只要把以上這三行程式碼插入CSS語法的body標籤中,你的網頁就會整個傾斜囉!

如何? 是不是很有趣呢? 你可以嘗試著把 rotate(0.5deg) 的數字部分改成任一你想要的數值去嘗試看看,當然他也能套用在其他的語法裡面,例如滑鼠移到連結上時會翻轉、移到圖片上時圖片轉動..等等,詳細動畫使用可以參考CSS: Animation Using CSS Transforms這篇文章的內容,他底下有個火箭的小小範例可以玩玩看,當然,他還有提供這範例的CSS程式碼,有興趣可以弄下來嘗試看看。

喔,對了,他文章一開始的右邊那個小方塊當你滑鼠移過去時會旋轉並放大,這也是利用CSS3達成的,這在那篇文章裡也有相關的解釋,這邊我就不多做說明了,留給客倌們嘗試看看囉~ (基本上是把程式碼複製起來然後直接實測最快 XD(被打))

解開無名之本樣式設計者不允許你修改此樣式。

相信,用過無名小站部落格的格友對這畫面應該不陌生吧?

時常,找到了漂亮的風格,卻沒有辦法進一步的修改、學習以及觀摩。

這真是一件很賭爛的事情……

現在,我來教各位如何解開這個限制吧。

恩……以下就先用我的部落格當範例吧~

繼續閱讀 “解開無名之本樣式設計者不允許你修改此樣式。"