Currently browsing tag

前端

我有一個請求 , 今天你出psd 的時候, 不要在icon上用濾色

我有一個請求 , 今天你出psd 的時候, 不要在icon上用濾色 =ㄇ= 也不要用色彩增殖…. (應該是全部的混合模式都禁止 =..=+) 因為,大家都知道濾色或色彩增殖其實就是讓黑或白色不見,所以有很多視覺會把一個 黑白的 ICON直接濾色放在底圖的按鈕上 在平面上看起來是很美沒錯,但是,一旦要做成網頁的時候,這個 ICON 就和底圖無法分開了⋯⋯ 原本, 如果 ICON 是真正的 png24 有透明底的 ICON 時,網頁上他的底圖可以任易變換,字也可以換,大小也可以改變,也可以做有趣的動畫等等等 但是,如果是用濾色壓底深色底圖上做出來的,就不是 ICON 而是按鈕了,同時為了網頁上的操作回饋,你至少要再出一張 :HOVER 的圖 也就是,如果原本ICON 本身的大小是 15X15, 現在會變大成一顆按鈕的大小,同時因為要有HOVER 效果,圖檔大小還要再 2倍大 而且,這個按鈕就是做死了,有任何改變都要發回給視覺重做,網頁上不能做任何變化 所以即使你要用濾色也要注意合併,只要那個 ICON 可以正常切成 PNG24 拿出來放在任何底上看起來都一樣 就沒差 如果是你在 PSD 裡面看起來好好的,但是一換底,整顆就走針或是根本就消失,那就不行 當然,如果你只是要出圖一次,不管後續的運用或修改的話 那就沒差,尤其是出圖還有切版都是你的時候更沒差,但是你如果是出PSD給別人切,那個切的人就會⋯⋯⋯⋯ 如果要給別人切,也還是要用濾色,麻煩自己把 HOVER層也都做好,不要只做一顆 然後說這是 HOVER …

[新手前端]CSS3動畫效果 transition, animation

簡介CSS3 裡的動畫效果,其實… 是W3C的文件精簡翻譯版 另附神人範例說明。 CSS3的動畫效果可以藉由CSS的 keyframe 參數來控制動畫的 期間、重覆及重覆的模式例如重覆次數、起始延遲、暫時停止。 支援度,標準化進行中。現行的瀏覽器都支援包括IE10,但還是要加上prefix。 CSS3發佈的 transitions提供了參數可以製作簡單的動畫效果。其動畫效果是由起始參數及結束時的參數所決定。transitions 只是提供設計師一個可以指定中間過度動畫的方法。 animation和transitions最大的不同在於,tansitions是當參數改變時觸發,而animation則是直接就執行,所以動畫效果需要明確的指定關鍵影格的參數。

[新手前端]網站案例觀察- swarovski

寫了這麼多天的技術還有概念,今天就來看看案例分享吧,我選了一個國際知名的水晶玻璃品牌- 施洛華士奇 http://www.swarovski.com/ 就來分析看看這個站在設計上做了什麼考量吧~ http://www.swarovski.com/ 點進去就會發現,網站判斷你的IP,提供不同語系的選項,可能只有中文有特別做吧 主要的考量是線上購物的平台不同。 進入英文網站後,可以發現網站有做RWD,Responsive web design 視窗回饋式的設計,除了底圖的大小會隨著視窗變動之外,底下banner的數量也會隨著改變。至於台灣版的…是flash,而且在Firefox裡悲劇的整塊flash不會出現,而且在IE裡大陸版的首頁字型大小也出現錯誤(不過我不懂flash不知道怎麼修 =..=+),可見得他們沒測firefox而且台灣會做RWD的人可能還不多吧… 一個網站三樣情 =..=+

[新手前端] HTML5的新tag 語意化標籤

HTML5 其實還是HTML,只是像軟體有更新一樣,HTML也更新到HTML5而且有更多的功能,具體的呈現就是出現許多新的 tag標籤。 HTML5裡主要的更新之一就是用語義化的tag取代不具意義的<div>,另一部分是針對新的裝置,像手機觸控、螢幕滑動控制等tag、增進客戶端及驗證表單、影音、多媒體還有最炫的Canvas繪圖區功能等等。 又因為HTML是一種讓瀏覧器看的語言,在舊版瀏覽器裡HTML5有可能沒有被支援,而有些新的HTML5功能又還在討論中,所以本篇就先來談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。

[新手前端]前端工程師和「切版的」有什麼不同?

前端工程師和「切版的」有什麼不同? 以網頁而言所謂的前端設計指得就是相對於「程式」、「資料庫」這些所謂的後端其他的都叫前端。 也就包括視覺的呈現、流程、HTML、CSS、JS等的運用以及所謂的使用者體驗(UE)、、使用者介面(UI)、可使性(UX-usability)等等,其實包山包海,範圍可大可小。 其中的 使用者體驗(UE),更是一個舉世知名的大坑,所謂的使用者體驗,user 使用這個產品的所有體驗、感覺,當然不會只停留在你的UI設計的好不好,網站速度、效能、程式有沒有出錯、企劃本身有沒有符合需求、如何去評測UX、如何設計反饋…,UE確實負責了產品的成敗,但是UE絕對不是單一個人的責任,UE是整個團隊的共同問題,所以不管是視覺、企劃、UI、前端、後端,其實只要有把UE放在心裡就好。

[鐵人賽07]從平面設計前進 CSS-5 盒模型

CSS的部分講了四篇,都還在基本概念和 HTML的元素選擇器上,今天終於要正式講到樣式本身的基礎- box 盒模形。 網頁設計和平面設計最大的差異之一就在元素的空間組成上,平面設計時頁面上的元素是用線條、區塊、形狀、顏色來區分不同的元素,同時元素間可能沒有明顯的邊界,但是在網頁設計的”頁面”中設計師其實是在針對 HTML裡的元素像是標題 <h1>、區隔 <div>、影像 <img>等等元素設計不同的造型,然而這些元素在頁面中佔有的空間 “全部都是矩形”。 沒錯! 全~~部~~ 都是矩形,不管是標題、錨點或是影像,在瀏覽器眼中就像一個個的用HTML <tag> </tag>包起來的箱子box 堆在頁面中,而且常常是一個包一包,盒子裡面還有盒子,這些盒子會依網頁設計者指定的寬高形成一個個不同長寬的矩形空間。 所幸是網頁設計也有圖層的概念,可以讓這些矩形元素有不同的位置變化,但是不管你眼睛看到什麼造型,實際上他們在瀏覽器眼中「全部都是矩形」,只不過這個矩形有不同的長寬、顏色、邊界、內外間距、背景甚致還給你圖層可用。見下圖: 這張圖展示的是任何元素都有的共通的空間性質,每一個元素都具有自己的長寬等上述屬性來確定本身在頁面中佔了多少空間。

[鐵人賽06]從平面設計前進 CSS-4 權重及覆蓋

承上篇,繼續針對選擇器說明,我們已經知道在CSS指定樣式的型式: E {color:red;} 選擇器 {類型:參數}; 同時知道選擇器可以串連,程式碼都是由上往下讀取並解析 另外之前的文章裡也提到,想要使用CSS的樣式可以用三種不同的方法來讓瀏覽器讀取CSS,分別是 行內、頁面、鍊入(載入式)。 現在知道有這麼多的方法可以指定樣式給在HTML裡的元素,那麼如果出現下面這種情況,瀏覽器要怎麼知道該呈現什麼結果,就要靠權重來區分,就像在軍隊裡要以官階大的長官下的指令算數,在家裡媽媽說了算一樣,CSS也有一套計算選擇器權重的方式。 不然如果像下例,有很多選擇器都選到同一個元素 <p> 最後字會變成什麼顏色呢? <style> p{color:red;} p{color:blue;} </style>

[鐵人賽05] 從平面設計前進 CSS-3 選擇器詳解

上一篇提到要套用樣式,就需要指定某一個特定的元素E 告訴瀏覽器,我就是要把樣式套在這個 E 上面,就像我們作圖時先找出要做特效的圖層然後套用特效一樣。 這個指定元素的部分我們叫做 “選擇器”,也就是利用這個地方來指定特定的元素,其實就是不同的選出元素的方法。 (有點像在教室裡叫第一排站起來,或全部的女生站起來,也許更像在:玩大風吹、吹什麼~ 吹我叫到的元素 E ) 選擇器可分成下表裡的類別,看得懂英文的可以直接參考 w3c的 selector說明頁(註1): 除了”全域”、”型態”及最常見的.class, #ID之外,有幾個是類似的選擇法 繼承 偽類 參數

[鐵人賽04] 從平面設計前進 CSS-2 選擇器之.class #ID

[新手前端]從平面設計前進 CSS-2 選擇器之.class #ID 上一篇簡介了如何在HTML內使用CSS,簡單來說有3種引入CSS的方法: 一是行內,如: <img src=”” style=”border:1px soild red”> 二是頁面插入式: <sytle> E{font-size:14px; color:red;} </style> 三是鍊入式: <link href=”../css.css” rel=”stylesheet” type=”text/css” /> 然後在css.css的檔案裡寫 E{樣式類別:參數;} E2{border: 1px soild red ; color: red;} 可以很簡單的知道在HTML裡因為 style是直接寫在 HTML的tag裡,所以不需要特別去指定想要套用的樣式該放在哪個元素上。不過頁面式、鍊入式的CSS就會需要特別指定好你想在哪一個元素E 上套用樣式,表示法就變成 E{類別:參數;} 在{}前方的是元素,{}中間是想要指定的樣式,對不同的元素可以分別指定不同的樣式。

[鐵人賽03]從平面設計前進 CSS-1

[新手前端]從平面設計前進 CSS-1 上一篇簡介了HTML,版面來比喻,HTML就是不同的元素,而CSS就是這些元素的造型。 如果說HTML是一篇有標題、大綱的文章,那麼CSS就是用來指定字型、大小、顏色、排版的樣式,所謂的CSS就是樣式表的意思。 同HTML一樣,CSS也是一種網頁設計師用來和瀏覽器溝通用的語言,瀏覽器永遠都會照你給的指示做出呈現,唯一的問題是設計師必需學會怎麼和他們溝通,所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異,其中尤以 IE的解讀方式和其他瀏覽器相差最多,所以在做樣式設計時,一般是以firefox 或 chrome的呈現結果為主,其次再修改指定讓IE也能做出類似的呈現。 <!–more–> 既然CSS也是一種和瀏覽器溝通用的語言,首先就來介紹CSS的基本語法。 首先,你必需告訴瀏覽器你想要改變樣式的是HTML裡的哪一個元素 E (element),這個E 可以是任何一個HTML裡的 tag (標籤),再來就用CSS的語法把想要改變的樣式及其參數寫入文件中。 例如針對一個HTML裡的 <a> 指定字型、顏色: <a style=” font-family:Aral; font-size:14px”> <tag a 錨點的 樣式=” 字型: Aral ; 字級: 14像素”> 其中的 style=”” 部分是HTML裡的參數指定方式,像 <a href=”” alt=””> </a> 裡面的一樣,只是這個參數是針對HTML的造型(style)來指定。而在CSS樣式裡面的指定方式也很簡單,造型類別:參數; 結尾用分號分隔。 如上述的標示方法,就叫做行內 CSS, 顧名思義就是把 style 造型寫在 …