2011年6月29日 星期三

CSS圓角

以前作CSS的圓角很麻煩,有人會用javascrip去做,或者是css的滑門效果,又或者是像我比較常用的方式是乾脆自己畫圓角的圖,不過到css3之後,要做圓角就變的方便很多,現在用了這個,我都懶得用以前的方法了,但是IE還是不支援,IE去死!

CSS3 (Opera) Mozilla (FireFox) WebKit (Safari、Google Chrome)
四邊圓角 border-radius -moz-border-radius -webkit-border-radius
左上圓角 border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
右上圓角 border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
左下圓角 border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
右下圓角 border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius

看了以上的表,可以知道因為css還沒統一的關係,所以各個瀏覽器支援的語法不一樣,所以記得要做css圓角的話一定三種都要下。

跟box model一樣,圓角也可以依左上、右上、右下、左下的順序來下。
例如要設左上5px、右上10px、右下15px、左下20px,可以這樣設。

border-radius:5px 10px 15px 20px;
-moz-border-radius:5px 10px 15px 20px;
-webkit-border-radius:5px 10px 15px 20px;

如果沒有看到圓角,代表你用的是IE XD
Read more

2011年6月28日 星期二

我的電腦桌布

一些歷史的回顧.. 從桌機到筆電。

desk01
desk02
desk03
desk04
desk05
desk06

偽Mac,可是卻用了Linux的桌布。
desk07
desk07-2

desk08
desk09
desk10
desk11

進入Vista時代,不過只有一張桌布。
desk12

Win7的時代。
desk13

Acer 5950G時代
desk14
desk15
desk16
desk17
Read more

2011年6月26日 星期日

CSS建議書寫順序

264824_2111938607841_6489188_n

書寫CSS的時候,就算順序不照順序,大多都還是能正常顯示,不過有時候也會遇到鬼打牆的情況,我剛開始練習的時候也遇過好幾次,後來就知道如果照著一些順序來寫,就比較可以避免這些情況發生了。

顯示屬性:
display
list-style
position
float
clear

自身屬性:
width
height
margin
padding
border
background

文字屬性:
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

連結屬性:
a:link
a:visited
a:hover
a:active
Read more

2011年6月22日 星期三

網站配色工具

做過網站的朋友一定都知道網站的配色是很重要的,一方面是可以用經驗來配色,當然這個是時間跟天份的累積;而除此之外,網路上也有一些好網站可以給你一些好的配色的建議,相信好好使用,一定可以在設計網站的時候更得心應手。


Color Scheme Designer


Kuler
Read more

Flash與JSON的使用



公司這邊因為資料傳輸的需求,使用了JSON格式,雖然在這邊我主力不是寫成是,但因為團隊裡我對AS最熟,所以有機會研究一下用JSON傳輸資料的方式,感覺很好玩,這邊稍微提一下該怎麼做。

首先不了解JSON的可以來看一下:
JavaScript Object Notation
JSON

因為要解析JSON格是需要用到as3corelib的class,所以如果還沒下載的,記得去下載一下。
as3corelib
Read more

2011年6月18日 星期六

涼夏紅綠暢快找碴遊戲

涼夏紅綠暢快找碴遊戲

最近完成的一個flash遊戲,其實主要的遊戲是有找到一些資源,這次主要是解決隨機跳關的方法,弄出來還蠻有成就感的,有興趣可以去玩看看囉..

涼夏紅綠暢快找碴遊戲

一關有五個錯誤,也有五次選錯的機會,看過多少關,會給你評價,關卡還蠻多的,可以挑戰看看。
涼夏紅綠暢快找碴遊戲

涼夏紅綠暢快找碴遊戲

最高級就是這個找碴王。

涼夏紅綠暢快找碴遊戲

當然也支持一下這個活動吧。

涼夏紅綠暢快找碴遊戲
Read more

賽德克‧巴萊- 12年的漫長等待



記得之前海腳七號紅了後,有去聽一場大莓羊的演講,他有提到他剛出社會的時候因為認識魏導,有幫他義務畫賽德克‧巴萊的分鏡圖。那時候魏導沒錢,大莓羊也是用周末的時間幫他畫,那時候他也沒打算跟他拿錢,只跟他說"我幫你畫了這個,你要答應我一定要把這部電影拍出來。"

後來魏導拍出了海角七號的奇蹟,大莓羊也算是創業成功了,人生難得的是堅持。

羅斯福總統的夫人有回在公開的演講裡,回答年輕人的一個問題,

『求職時,選擇興趣還是選擇賺錢?』

夫人說:選擇興趣,在興趣裡做到top,錢也會來。

你肯為你的夢想付出多少?
Read more

2011年6月14日 星期二

flash取出不重複亂數

最近一個案子需要寫亂數跳影格的功能,研究了一下找到了方法,我找的是我可以理解的方法.. 這個應該大家都有辦法理解。

簡單的說把一個陣列重新做排序,之後再取陣列的值就可以了。

原陣列:
var list:Array=new Array(1,2,3,4,5,6,7,8,9,10);
建立一個空陣列,要用來重新排序用的。
var randomList:Array=[];
之後使用while迴圈把隨機取出來的元素塞到randomList內
var r:int;
while(list.length>0){
r=int(Math.random()*list.length);
//由於 list 陣列中的元素會一個一個被取出並移除、所以最終 list 陣列將被清空、長度不大於 0 以致跳出 while 迴圈。
randomList.push(list.splice(r,1));
}

之後就可以從randomList[i]去跳轉影格了,每跳轉一次i就+1,這樣就可以完成隨機跳影格且不重複了。

參考資料:
使用 Math.random() 取亂數且不重覆的方法
AS3 快速產生不重覆亂數
Read more

2011年6月13日 星期一

談icon設計

有人提到過行動裝置的盛行,讓設計icon跟UI介面的有了不少的空間,剛好設計icon也是我很喜歡的部分,究在這邊稍微介紹一下設計icon該注意的事情吧。

253787_2028661245959_4144932_n
Read more

2011年6月10日 星期五

HTML5的canvas時鐘

254867_2022506812102_6153617_n

最近在看HTML5相關的東西,發現了這個超酷的東西,可以完全用HTML5的canvas功能來做一個時鐘,連鐘面那些完全都是用HTML搭配javascript畫出來的,有興趣可以看看。

觀看效果

效果跟來源是一樣的東西,差在我放上去後的頁面乾淨很多而已。
來源
Read more

2011年6月9日 星期四

用Sass來開發CSS吧

252996_2020360918456_5312288_n

最近看到網路上有人在討論compass這套工具,因為他是base on Sass,所以我就先去研究一下Sass。

簡單說Sass就是可以用程式來控制CSS的屬性跟值,再complie後就可以變成我們要的CSS檔案,聽說還可以解決IE不聽話的問題,總之就先來試試看吧。

首先請到Ruby安裝Ruby。

安裝後只要下這樣一行指令
gem install sass
就可以完成Sass的安裝了。

之後可以根據Sass提供的文件去完成你的sass檔案,再使用以下的指令,就可以將sass檔compile成css檔了。
sass --watch style.scss:style.css
這段的說明是將style.scss compile成style.css

不過我還沒感受到他的威力,有興趣的朋友可以試試看不一樣的寫css的方法。

Read more

AS3.0- 控制上層MovieCilp

在flash裡要控制子MovieClip很簡單,但是要控制母MovieClip就比較複雜一些,不過程式嘛,懂語法就可以了。

方法一:用MovieClip(parent)強制進行形態轉換
MovieClip(this.parent)
方法二:使用as運算子,使它被辨識為MovieClip物件
var myParent:MovieClip = parent as MovieClip;
參考資料
Read more

2011年6月7日 星期二

2011年6月2日 星期四

google +1

247050_2004713607283_5151391_n

今天網路上最熱門的事情就是google +1來了,雖然我還不是很清楚他的效果會有多大,看起來有點類似facebook的like按鈕,總之如果有興趣想裝的話,就來試試看吧。

使用方法很簡單,官網也只有短短的一頁的介紹。

而blogger好像都有這樣的功能了,好好的玩吧。
Read more
Related Posts Plugin for WordPress, Blogger...