之前設計嵐分享了如何在進行網頁設計時,利用CSS語法將圖片加上拍立得的外框效果,對於學習網頁設計的人來說是個好用的技巧,(相關文章請參閱:[教學]成為CSS高手之路(八)~製作拍立得相片效果);而今天設計嵐再更進一步針對Blog經營者,介紹如何在blog文章圖片也加上拍立得相片效果外框,讓各位格友們不需要透過美工軟體就可以讓圖片有不同效果喔!
把部落格圖片變成拍立得相片風格
我們常常在網頁或是Blog中放置內容圖片,只是純粹放入圖片,有時候會覺得在視覺效果上略顯單調,但是如果想要針對圖片加點設計效果,往往又需要使用美工軟體進行編輯才可以做到,所以今天設計嵐來分享一個簡單的手法,利用CSS語法在圖片上製作具有拍立得效果的外框,瞬間就可以讓沒有特色的圖片擁有吸引眾人目光的魔力喔!
利用CSS製作拍立得相片效果
成為CSS高手之路系列文章第七篇來嚕!!上一篇設計嵐說明了如何針對文字設定邊框以及轉灰階圖片的CSS語法,今天來介紹一個更實用的技巧~文繞圖的設定,這個技巧之所以重要,原因有二:1.網頁內文不作文繞圖排版上很難看 2.使用DIV+CSS排版是目前網頁標準化的一個標準作法,網頁設計師必備技能!!
今天設計嵐來介紹『成為CSS高手之路』系列文章第六篇,經過前面五篇的基本功訓練,有閱讀並且練習的人應該對於CSS有了基本的認識,接著開始我們正式進入實際運用的介紹,當然,我們還是要由淺入深,先從最簡單的圖片效果開始介紹,慢慢的再進展到更進階的CSS設定。
CSS在圖片效果上的套用
今天系列文章之五所要介紹的套用外部CSS檔案的方式,是先將CSS的格式語法寫在一個獨立的檔案中,並且儲存成CSS格式的檔案,然後再將此檔案以連結或匯入的方式套用在不同的網頁中,讓這些網頁同時擁有相同的CSS格式設定,相當方便快速,而且日後有需要,只要修改CSS檔就可以同時更新所有的網頁格式設定了,這對於需要統一格式設定以及同時管理大量網頁的設計師來說,是個省時簡便的好方法。
今天『成為CSS高手之路』系列文章之四,繼續針對『整頁套用的CSS規則』作後半段的說明,能夠讓規則套用在整個頁面的方法除了前文『成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)』所提到的設定方法之外,還有其他幾種設定方式,其影響範圍也都是一整個頁面的。
我經營的設計教學部落格..6^^
Yahoo Blog 的側邊欄位加寬法 因為Yahoo Blog原側邊欄的寬度為150px, 對於某些較寬的外掛程式, 會顯得過窄, 造成"爆表"的現象, 因此笨貓將窄欄加寬至200px, 可更加靈活應用各種用法....
針對Yahoo Blog 側邊欄位加寬的教學, 圖文並茂版
理論上,以純CSS來完成浮動工具提示,似乎只要在「display」的宣告參數上,應用「none」及「block」來切換浮動訊息的顯示與否,配合絕對定位position:absolute的「z-index」參數宣告,最後再以「a」及「a:hover」來觸發浮動工具提示,應該就大功告成。 不過,真正實作起來,還是費了一番功夫,才總算調校測試完成。
Free CSS Templates 是國外一個提供免費CSS佈景的網站,目前共有超過數百種的CSS模版設計。每個佈景都有預覽圖與實際於瀏覽器上的顯示效果,並且提供.ZIP壓縮檔可直接下載使用。
如果您想學習 CSS,又沒有太多時間由基礎學起,那本書能透過問題與解答方式,提供解答與範例,可以套用,同時又針對問題的解決方式,按步驟說明原理,您可以透過目錄找到您想要的答案,也可以由第一章開始往後面的章節閱讀,當作是一本完整教材。
內含完整範例程式下載。
超過 100 種 Web 2.0 線上產生器
包括logo, 圖形, 按鈕, 貼紙, 配色, CSS, domain name, favicon, meta tags, robots.txt, form等一應俱全
艾德將部落格上的導覽列換成了 Mac Dock 的模式,蠻好玩的。主要是透過 js + css 的模式來呈現,這是國外的作品,可以參考
擁有一個具個人化的部落格, 想必是很多人想追求的目標. 光是靠套用模板外, 還不足以標出自 己的特色. 學CSS, 美化或格式化網頁的功夫, 有時候就少不了. 有個CSS的網站, 可幫助你一步一步產生所需的CSS; 另有一個網站,是可以幫你格式化CSS碼.
在BLOG內文加入貼紙效果 在不少BLOG中,看到有“貼紙”的效果,感覺很酷,又比較醒目。
很有質感的貼紙,強調文字內容時很有用喔~^_^
RoundedCornr 是一個能幫助使用者,經過幾步簡單的設定後就可以產生圓角圖形或是含有圓角邊框的內容盒 (rounded corner box) 的網站。
first-letter pseudo-element adds a special style to the first letter of a text
時常在雜誌常見的一個首字放大(drop cap, dropped capital letter),是很受歡迎的設計元件,用來做為商業通訊、雜誌文章、書籍章節或其它公開文件的開頭…之前看到某個教學,於是也跟著玩了起來囉...底下來看幾個範例吧!
CSS是Cascading Style Sheets的縮寫 我們中文稱為「串聯樣式表」 CSS有甚麼好處?為甚麼要學呢? 以下說明幾點你就會發現使用CSS的好處 它能讓我們更精確的控制網頁版面的文字、背景、字型等... 它能只修正一個CSS文件,便可同時更新眾多的網頁版面外觀及格式。 它可以使html的文件內碼更精簡,縮小檔案下載的速度。 適用於各種作業平台。
這些是我在網路上收集來的資料,一方面是供我自己以後參考的.畢竟這種東西太瑣碎,背起來沒意思.要用的時候查的到反倒是比較適合.