amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: [CSS] 用CSS3寫 iTunes flip cover效果
http://amos-lee.blogspot.com/2013/11/css-css3-itunes-flip-cover.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. CSS] 用CSS3寫 iTunes flip cover效果. 早在很久以前,當iTunes的3D flip cover檢視效果出來時,就已經造成令人驚豔的視覺感受了,而現在有了CSS3的3D功能支援後,未來要寫這樣的效果可以說是越來越簡單了,而且更令人感到驚訝的是,不需要Javascript也能寫出iTunes這樣的效果了,不多說,請各位直接到CSS可樂頁面去看看吧. 訂閱: 張貼留言 (Atom). 資源]Adobe Certified Associate認證考題重點(Adobe ACA認證). 影片]Photoshop CS4新功能預覽、教學、影片. CSS] 用CSS3寫 iTunes flip cover效果. Simple範本. 由 Blogger.
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: 2013/9/1 - 2013/9/8
http://amos-lee.blogspot.com/2013_09_01_archive.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. CSS3] CSS3 transition 試做分享區塊之球體彈性效果. CSS3 的 transition 功能是壞掉的印表機很喜愛的一個屬性,這次壞掉的印表機想以最少的 HTML Code 嘗試僅使用 CSS3 Transition 製作彈性效果,不使用 animation keyframes 製作,並且必須添加陰影效果,每個圖示的原始碼如下. Li a href="#" img. /a /li. 很乾淨對吧 ,製作上希望球體能像上彈起並有彈性效果,在球體的下方還要有陰影產生,陰影的效果必須配合球體的彈性有大小的變化,此外,在球體往上彈起之前必須讓球體稍微往下縮一點,讓他更有準備彈起蓄勢待發的Fu. 訂閱: 文章 (Atom). 資源]Adobe Certified Associate認證考題重點(Adobe ACA認證). 影片]Photoshop CS4新功能預覽、教學、影片. CSS3] CSS3 transition 試做分享區塊之球體彈性效果. Simple範本. 由 Blogger.
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: 2013/11/3 - 2013/11/10
http://amos-lee.blogspot.com/2013_11_03_archive.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. CSS] 用CSS3寫 iTunes flip cover效果. 早在很久以前,當iTunes的3D flip cover檢視效果出來時,就已經造成令人驚豔的視覺感受了,而現在有了CSS3的3D功能支援後,未來要寫這樣的效果可以說是越來越簡單了,而且更令人感到驚訝的是,不需要Javascript也能寫出iTunes這樣的效果了,不多說,請各位直接到CSS可樂頁面去看看吧. 訂閱: 文章 (Atom). 資源]Adobe Certified Associate認證考題重點(Adobe ACA認證). 影片]Photoshop CS4新功能預覽、教學、影片. CSS] 用CSS3寫 iTunes flip cover效果. Simple範本. 由 Blogger.
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: [影片]Photoshop CS4新功能預覽、教學、影片
http://amos-lee.blogspot.com/2008/11/photoshop-cs4.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. 影片]Photoshop CS4新功能預覽、教學、影片. Photoshop CS4新功能想必很多人都很有興趣,下面把一些Photoshop CS4的新功能影片給大家看看囉. 可以設定不改變的位置跟要變形的位置,在很早之前就有看到過有人開發出這種演算技術了,當時就在想Adobe應該會注意到這個超屌的功能吧,沒想到總算被盼到啦 XD. 由影片中可以看到增加了新的快速輔助鍵,在調整上面也夠多細節了 可惜影片的解析度不是很好,所以只看個大概囉. 不知道有沒翻譯錯誤,只有大概看了一下,新增的調整圖層以往都是在一個新的對話視窗中設定,現在可以在另外一個調整的浮動面板中設定了,在檢視上面也更即時囉. 很多人都知道新版的Photoshop CS4有了GPU的支援之後,畫面在平移以及縮放上面更加的順暢了啦 看影片就可以知道囉,不過.這樣的感覺好像有點多餘吧 就算沒有這種效果我也沒差 (好無聊的功能阿). Http:/ tw.youtube.com/watch? Http:/ tw.youtube.com/watch?
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: 2013/9/15 - 2013/9/22
http://amos-lee.blogspot.com/2013_09_15_archive.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. CSS3 裡面最強大的選取器大概就屬 :nth-child(n) 偽類選取器了,很多人看了這選取器老是感覺一頭霧水的話,這邊有一篇超級詳細的教學,各位可以看看喔~. 訂閱: 文章 (Atom). 資源]Adobe Certified Associate認證考題重點(Adobe ACA認證). 影片]Photoshop CS4新功能預覽、教學、影片. Simple範本. 由 Blogger.
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: 2012/7/8 - 2012/7/15
http://amos-lee.blogspot.com/2012_07_08_archive.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. 使用純CSS3來製作展示用的區塊,真是又酷炫又方便~大家一起來研究CSS3吧~. CSS3實在太好玩了~這麼有趣的相簿,只要一個CSS class就能做完~大家一起來研究CSS3吧~. 訂閱: 文章 (Atom). 資源]Adobe Certified Associate認證考題重點(Adobe ACA認證). 影片]Photoshop CS4新功能預覽、教學、影片. Simple範本. 由 Blogger.
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: 2013/12/22 - 2013/12/29
http://amos-lee.blogspot.com/2013_12_22_archive.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. CSS3] 用CSS3撰寫神奇寶貝球,不需要圖片就能做到! CSS3要畫圖是越來越簡單了,但如何省下HTML的原始碼數量就變得非常重要,那麼畫一顆神奇寶貝球到底需要多少的HTML碼呢?答案是…只需要一個DIV標籤即可! CSS3中有許多迷人的功能,讓我們可以非常自由且彈性的設計我們的頁面區塊,其中Multiple background image就是一個非常吸引人的功能,不僅便利、彈性、省Code外,還能發揮更多的設計變化,上一次Amos寫的的「 使用CSS3輕鬆寫出MAC彩虹球效果. 12301;以及「 純CSS寫的撞擊點圖示! 12301;其實也都是CSS3的Multiple background image功能,而這一次Amos更是好好玩了一下CSS3 Multiple background image功能,將CSS3的Gradient功能加進來一起使用,製作了. 九顆神奇寶貝球,不多說,先來看看 CSS可樂. 訂閱: 文章 (Atom). Simple範本. 由 Blogger.
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: 2013/8/25 - 2013/9/1
http://amos-lee.blogspot.com/2013_08_25_archive.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. CSS3] 用 CSS3 繪製立體感圖示. 自從 CSS3 新增了漸層與陰影屬性之後,網頁設計的彈性就變得更大了,於是使用 CSS3 畫圖的人就變多了,所以壞掉的印表機也不例外,看到網路上有人用Photoshop畫出好看的icon,那印表機就用 CSS3 來畫吧! Ok~想做就去做吧!首先必須要先分析一下這樣的圖示大概可以用哪幾個 CSS3 的屬性做出來?然後思考一下需要幾個div標籤?當然,div多個幾層做起來是簡單的~但是Code就變得髒多了~但這樣就失去了使用 CSS 的原始目的,最後!壞掉的印表機決定用兩層div來做,html 原始碼就用下面這樣. 觀看完整範例 http:/ cdpn.io/tdpkC. 小提醒:各位進到範例頁面中,可以點選左下角一個不明顯的「Edit this pen」去看原始碼等相關資訊喔~. CSS3] CSS3 3D 功能實作. CSS3] CSS3 設計 Path style Menu,不使用animation屬性. CSS3 的path style menu很早之前就有看過網路上有人寫過...
amos-lee.blogspot.com
壞掉的印表機 - 設計、生活、態度: 2012/4/15 - 2012/4/22
http://amos-lee.blogspot.com/2012_04_15_archive.html
壞掉的印表機 - 設計、生活、態度. CSS、Web Design、個人筆記. 個缺點,而且在瀏覽器原生支援CSS3效果的情況下~CSS3絕對是未來強大的趨勢阿~歡迎大家一起來玩CSS3吧 。 CSS3] CSS3 按我按我 自動提示效果. 壞掉的印表機原創的CSS3效果範例喔~畫面會自動告訴你~我可以用滑鼠點喔~用CSS3就能輕鬆達到這樣的效果~可愛又逗趣吧. 這CSS3的範例用在網頁上頗有趣的~整個網頁被切開的設計~連背景都會一起移動~非常有趣的一個CSS3範例喔~設計過程中壞掉的印表機還給他思考了兩天才想到怎麼「切畫面」又能在實際網頁中能夠實用而不只是花俏而已~算是小小的被考驗到的一個例子~壞掉的印表機原創CSS3範例分享給大家~ 以下是壞掉的印表機. 壞掉的印表機原創的CSS3範例又來了~這次採用了CSS3的動畫功能來模擬apple官方網站的選單效果~錄製畫面時畫面會閃動~但事實上瀏覽器在操作時是不會閃動的~很棒的CSS3功能~分享給各位看看~ 以下是壞掉的印表機. CSS3] 利用 CSS3製作MAC Dock效果. 訂閱: 文章 (Atom). CSS3] CSS3 按我按我 自動提示效果.
SOCIAL ENGAGEMENT