類別 | 學習心得

使用CSS3產生圓角美化網站

在還沒有CSS3的時候,要讓網站的表格圓角化,需要載入使用JQuery Corner Plugin來達到效果,前提還必須把瀏覽器的Javascript打開,現在各家瀏覽器都支援CSS3(不含IE8以前的版本),只要使用簡單的語法就可以達到圓角效果。

CSS3的圓角效果主要是用「border-radius」基本語法,如果要支援Chrome是「-webkit-border-radius」,Firefox則是「-moz-border-radius」,所以同時使用這3個語法來支援各家瀏覽器(不含IE8以前的版本),至於4個角都設定同一個角度或設定各別不同的角度,語法則大同小異,以下介紹使用方法:

  1. 4個角都設定同一個角度:
    border-radius: 10px; /*基本語法*/
    -webkit-border-radius: 10px; /*支援Chrome*/
    -moz-border-radius: 10px; /*支援Firefox*/
  2. 4個角設定各別不同的角度:
    border-top-left-radius: 10px; /*top-left為左上角*/
    -webkit-border-top-left-radius: 10px;
    -moz-border-top-left-radius: 10px;
    border-top-right-radius: 20px; /*top-right為右上角*/
    -webkit-border-top-right-radius: 20px;
    -moz-border-top-right-radius: 20px;
    border-bottom-left-radius: 30px; /*bottom-left為左下角*/
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-bottom-left-radius: 30px;
    border-bottom-right-radius: 40px; /*bottom-right為右下角*/
    -webkit-border-bottom-right-radius: 40px;
    -moz-border-bottom-right-radius: 40px;

下面是原木將Wordpress部落格版面圓角化前、後的對照圖,圓角化的視覺上就是讓人看了舒心,看看圓角化後的部落格,由於剛接觸 Joomla,所以目前正在研究如何將 Joomla 的佈景及sidebarright圓角化,還請先進們若看到此篇文章提點提點,感謝〜

如果懶得打這麼多繁複的語法,也可以利用 CSS Border Radius Generato 網站,只要在4個角輸入所需要的圓角半徑,就會自動產生CSS3的語法哦。

Border Radius網址:http://border-radius.com 

☆★相關文章★☆
如何在 WordPress 做一個歡迎頁
今天開始來到我們家有一個新的大門了,由於我們有兩個部落格系統,舊的部落格是用 F2cont 架的,新的則是現在使用的 Wordpress,為了讓大家選擇要去我們的哪一個家,所以好友小潘幫我們家設計了一個歡迎頁。   Wordpress 的首頁是抓自己的 index.php,所以大家輸入網址後一定是讀取 index.php,這樣歡迎頁的 index.html 就無法當作第一個頁面來讀取,而 Wordpress 又會一直循環調用 index.php,如果更改 .htaccess 將首頁設定使用 index.html,那麼落格的文章就叫不出來了,怎麼辦呢?很簡單 ... 以下 Step by step: 將下面的代碼增加到根目錄的 .htaccess: 修改 wp-includes/rewrite.php 檔案,找到下面的敘述: 修改成: 以上就完成囉,現在一進我們家就會先讀取 index.php 歡迎頁,而也告訴 Wordpress 首頁調用 home.php,而實際上也沒有 ...
繼續閱讀
利用CSS讓有超連結圖案出現透明效果
今天在「WordPress 研究者日記」看到這篇「CSS透明特效:opacity」的文章,就是利用CSS的opacity語法,讓滑鼠移到有超連結的圖案上時,該圖案會出現透明的效果。   將以下代碼加入到 wp-content/themes/當前使用的佈景主題/style.css 檔案: 說明上面的數值,數值為「1」代表不透明,所以數值越小就越透明,而filter:alpha那段是給IE瀏覽器用的,數值為「100」代表不透明。 ~ That’s all ~
繼續閱讀
新增WordPress評論表情圖
這也還是在《Willin Kan 的博客》挖到的寶,一口氣在 Willin 大大挖到3個寶,還幫了原木修改代碼,真的很謝謝他。這是一個小而不用插件的Hack,就是在評論框出現所有的表情圖供訪客使用。   請先點 →這裡← 下載檔案,解壓縮後直接將 smiley.php 放在使用佈景的所在目錄,然後在 comments.php 的 textarea 的適當位置,加入以下的代碼: ~ That’s all ~
繼續閱讀
中文化自己的Joomla
先前使用Wordpress,最困擾的就是套件中文化,由於大部分的套件都只有英文,所以常常要Google相關套件的中文語言,還要對應版本 @@ 這次用Joomla發現有一個非常好用的「覆蓋」功能,可以搜尋想要變更的文字,這個功能真的是太好用了。Joomla的語言字串是由「語言常數」及「值」組成,例如COM_CONTENT_READ_MORE="Read more:" 這一段敘述中,COM_CONTENT_READ_MORE是常數,而Read more:就是他的值,我們只要搜尋想要變更的「常數」或「值」,搜尋出來後再變更想要的文字(值)。原木在stackideas買了Komento留言板,因為最新版都沒有中文,於是利用語言覆蓋功能將其中文化,下面就是中化文前、後的比較畫面:
繼續閱讀
好用的JCE Editor網頁編輯器
Joomla預設的編輯器是TinyMCE,雖然這個編輯器也是所見所得,但功能上比較陽春,很多網友極力推薦另一套「JCE Editor」所見所得編輯器,他的功能比較齊全,表格編輯非常方便,也支援拖拉放的方式上傳檔案,Pro版本雖然是要錢,但Free版本就已經很夠用了,經原木實際使用,真的是比TinyMCE好用太多了,以下介紹一些JCE Editor好用的功能: 壓縮Javascript及CSS加速載入動作,亦可啟動GZip壓縮:在後台的管理介面依序點選「元件」→「JCE管理」→「全域組態」,在「壓縮選項」依需求啟動項目。 可嵌入Youtube影片:在後台的管理介面依序點選「元件」→「JCE管理」→「設定檔」→「Default」(以下這個動作簡稱編輯設定檔),在「功能 & 版面配置」的「額外功能」,將「媒體支援」打勾。 可直接在文章編輯的 Code 區支援iframe語法:在編輯設定檔的「外掛參數」→「媒體支援」,將「允許 Iframes」勾選「是」。 更改檔案目錄路徑及上傳檔案大小:在編輯設定檔的「編輯器參數」→「檔案系統」依需求變更,如下圖框紅處。 支援Javascript、CSS及PHP語法,直接在Joomla後台寫入這些程式語法:在編輯設定檔的「編輯器參數」→「進階」依需求啟動項目。 在JCE編輯器增加中文字型:在編輯設定檔的「外掛參數」→「字型家族選取」依需求新增字型,下面的字型是原木新增的字型,而且是不用另外安裝字型或從網站上載入字型哦。 以下提供原木新增中文字型的設定值,直接複製、貼上即可,新增好後就可以在JCE Editor看到該字型選項了。 微軟正黑體:Microsoft JhengHei 微軟雅黑:Microsoft YaHei 明瞭體:Meiryo 標楷體:DFKai-SB 楷體:KaiTi 黑體:SimHei 仿宋:FangSong 新宋體:NSimSun 宋體:SimSun 新細明體:PMingLiU 細明體:MingLiU  
繼續閱讀
自動為上傳的圖片加上浮水印
這是原木找了好久終於找到這個方便又實用的Plugin,可以使用圖片或文字當作浮水印,廢言不多說了,來介紹如何安裝使用嚕!   請先下載檔案,解壓縮後放到 wp-content/plugins 並到後台啟用她,之後編輯 wp-admin/includes/media.php 這個檔案,在 // Save the data 前加入下面的 code: 爾後每次升級完 Wordpress,記得要再到該檔案加入上面的 Code 喔,不然圖片的浮水印功能會沒有作用喔,這也是原木寫這篇文章的用意之一,提醒自己更新 Wordpress 後要將 Code 加入該檔案。下面放上文字及圖片浮水印的效果: 文字浮水印    圖片浮水印    設定的方法很簡單,原木就不再特別介紹了,有問題的話可以留言給我喔。另外經原木測試1「文字浮水印」只能支援英文,中文會變成亂碼,而2使用「圖片浮水印」,請將 wp-content/plugins/watermark/ 下的 stempel.png 換成您想要加的 LOGO。 ~ That’s all ~
繼續閱讀
使用Facebook Connect將WP與FB完整結合(中)
其實安裝Facebook Connect真的非常簡單,但是原木在安裝過程中卻遇到了問題,就是在登入過程中始終對應不到我Facebook的應用程式,昨天花了一整天的時間研究,終於讓原木找到了問題,解決之後心情快~樂~的~不~得~了~  ^^ 原木的問題有二,第1個問題是Facebook韓德爾の原木粉絲專頁,第2個則是Wordpress的 1 Blog Cacher 插件。 關於第1個問題,在我們部落格側邊欄位的「Communities」是利用Highslide JS效果呈現的,其中第7個是顯示我們部落格在Facebook的粉絲,因為有使用 <script type="text/javascript">FB.init("e320a5c35f3157b68b1e5e3f0f6563a9");</script> 語法,而在Facebook Connect中也有設定API金鑰,結果造成同一個頁面出現兩個API金鑰,導致在登入FB時一直指向粉絲的專頁,這個超讓原木抓狂的,想說明明API金鑰跟秘密都設定對了,為何都無法指向我在FB的應用程式,後來原木就利用Java Script另開新視窗,就解決囉! 第2個問題很簡單,換掉 1 Blog Cacher,改用 WP Super Cache,在裝好該插件後,找到部落格根目錄 .htaccess 檔案下面的敘述: 將她改成: 其中「YOURAPIKEY」就是輸入你Facebook應用程式的API金鑰,記得後面要加「_user」,這樣在使用Facebook Connect登入時就不會被快取。 原木特將遇到的問題筆記下來,希望能對安裝Facebook Connect的人有所幫助。^^
繼續閱讀
將WordPress標籤雲彩色化
今天在「阿茂的隨手札記」看到一篇如何「輕鬆將WordPress標籤雲彩色化」的文章,這是不需要安裝Plugin就可以實現,方法非常簡單,只要將Code插入使用中的佈景即可達成,原木特將此方法收錄,供以後自行參考使用,也分享給Wordpress使用者。   WordPress預設的標籤雲只有一種表現方式,就是所發文章的標籤雲類別越多,該標籤的字體越大,但是這樣顯得非常單調,而以下的方法則是不需要經過Plugin就可以讓標籤雲彩色化哦!   將下面Code插入 wp-content/themes/目前使用佈景/functions.php 檔案中的 <?php 之後: 如此即完成讓標籤雲彩色化,而一般預設的標籤雲語法是 < ?php wp_tag_cloud(); ?>,而籤雲彩色化的顯示方式有幾個調用語法: (1)smallest︰最小(少)篇章標籤字體。 (2)largest︰最大(多)篇章標籤字體。 (3)unit︰字體單位,例如px、pt。 (4)number︰顯示標籤數量。 (5)orderby︰文章分類中的標籤。 (6)exclude︰排除哪個標籤。 (7)include︰包含哪個標籤。 提供一個實作的語法如下(以&作連接,而=後面沒有數字則表示使用預設值):
繼續閱讀
WordPress評論回應郵件通知
這還是在《Willin Kan 的博客》挖到的寶,也就是當A回應B發表的評論,系統會發一封E-Mail通知B,這樣可以增加該篇文章的評論互動,當然,你的伺服器一定要有 mail() 功能哦!   這個不是插件,只要修改你使用中佈景的 functions.php 檔案,將代碼放置 <?php ..... ?> 區域內即可,《Wordpress評論回應郵件通知》的代碼有三種,請依需求點取下面的標題: 有勾選欄位,由訪客決定是否要回應郵件通知。 無勾選欄位,由管理者決定在什麼條件下發郵件。 所有回覆都發郵件。 先補充說明,如果你使用的佈景主題,評論式樣是使用 comments 和 trackbacks/pingbacks 分離(如原木使用的主題),請將下面所有的: 修改成:   有勾選欄位,由訪客決定是否要回應郵件通知 (會在模板自動加勾選欄,如果不想自動加,可把後面一小段刪除。) 無勾選欄位,由管理者決定在什麼條件下發郵件 所有回覆都發郵件 ~ That's all ~
繼續閱讀
在WordPress文章中加入推文按鈕
這是在「夢行者的夢想天空」的「WordPress中加入Facebook、Plurk、Twitter、FunP快速推文按鈕」文章學到的,也就是在文章中加入Facebook、Plurk、Twitter及FunP快速推文的按鈕,其實有外掛可以直接使用,但外掛裝多了總是會拖累Wordpress的速度,所以本文是教你如何修改 single.php 達到快速推文目的。   找到使用佈景主題的 single.php,在 <?php the_category(', ') ?> 之後加入以下的代碼: 記得要將上面「你網誌的網址」改成自己的網址,這樣就可以嚕,至於推文按鈕可以到 http://sofree.tw/thread-3842-1-1.html 及 http://sofree.tw/thread-4206-1-1.html 下載,而推文按鈕的擺放位置,原木是放在文章的右上角,這可依你使用的佈景主題而自行調整版面。 ~ That’s all ~
繼續閱讀
如何在 WordPress 做一個歡迎頁
利用CSS讓有超連結圖案出現透明效果
新增WordPress評論表情圖
中文化自己的Joomla
好用的JCE Editor網頁編輯器
自動為上傳的圖片加上浮水印
使用Facebook Connect將WP與FB完整結合(中)
將WordPress標籤雲彩色化
WordPress評論回應郵件通知
在WordPress文章中加入推文按鈕


發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

BloggerAds

Subscription

輸入你的電子郵件地址訂閱網站的新文章,使用電子郵件接收新通知。

一起加入其他 1,896 位訂閱者的行列

Stickers

部落格達人009認證徽章Creative Commons License