2007/05/25

線上製做圓角工具-RoundedCornr




RoundedCornr 是一個很方便的線上製做圓角的工具. 設定好大小, 顏色, 還可以做漸層效果, 圖馬上就產生了, 而且下載前還有預覽圖.


RoundedCornr 提供四種方式設計圓角.

1. 基本功能, 其實也是快速製做的意思, 如果只需要調角度及顏色

2. 可設定漸層效果

3. 除了漸層之外, 另有設定邊框

4. 完整功能, 包含漸層, 邊框, 背景透明, 加入文字等.如圖所示.


設定好之後, 按 "Create RoundedCornr" 之後, 就可以預覽及下載了.



不過網站上有顯示, 如果使用它們的工具製做出來的圓角圖, 使用在public web上時, 一次請贊助他們5元美金.

public web 應該包含blog吧! 所以參考看看囉!

rgb 顏色代碼表: http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html

RoundedCornr : http://roundedcornr.com/

相關文章 :

4 comments:

Shayne 提到...

這位大哥請問一下那怎麼把他像你一樣套用在右邊的開頭勒?這有一篇教學嗎??...謝謝喔...搞了老半天弄不出來@@..麻煩您教一下勒

skyvee 提到...

shayne,在sidebar 的標題設背景為圖片, 如.sidebar h2{background:url(圖片網址) no-repeat;}

Shayne 提到...

我看到的語法是這樣但加下去後整個都看不到耶?請問這樣改有錯嗎~謝謝你耐心的回復勒
---------------------------------
#sidebar3 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: left;
color: $sidebar3HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
background: $sidebar3HeaderBgColor;
border-bottom: 1px solid $sidebarHeaderBorderColor;
text-align: left;
}
---------------------------------

#sidebar3 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: left;
color: $sidebar3HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
background:http://farm3.static.flickr.com/2254/2463032682_96ab88132f_o.gif no-repeat; $sidebar3HeaderBgColor;
border-bottom: 1px solid $sidebarHeaderBorderColor;
text-align: left;
}

Skyvee 提到...

shayne,你改成如下語法試看看
.sidebar h2{background:url(http://farm3.static.flickr.com/2254/2463032682_96ab88132f_o.gif ) no-repeat;}

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.