在网页设计中，背景佔有非常重要的位置，背景的不同网页的整体感觉、氛围都会有非常大的改变，而在背景的撰写上也有许多不同的属性应用。 Background-color 颜色名称 大部分浏览器都支持颜色名称 CSS中定义了140个颜色的名称。点此查看所有浏览器支持的颜色名称。 See the Pen background-color1 by karen (@karen0922) on CodePen. 十六进位的颜色 大部分浏览器都支持十六进制颜色值 十六进制颜色用法为：#RRGGBB。 其中RR代表…

有时助理会收到客户的反映表示网站「颜色跟上次改的不太一样」、「渐层的效果怎么没出来」时，设计师内心大概已经有了底，因为显示的问题，造成网页看起来色彩不太对劲，已经不是一次的事情了。 显示器会有色彩呈现的问题，最常见的原因之一就是不同显示面板的种类，由于使用了不同的显示技术，呈现的色彩会有些许的差异，以下就是市面上常见的LCD显示器的差异。 IPS面板 IPS是当今LCD显示器面板的王者，因此商场常有一句「不知道怎么挑萤幕吗？挑IPS面板的就对了」的说法。不论是色彩、对比、可视角度表现都极为杰出的…

上一篇讲的是背景颜色该怎么撰写，这一次讲背景图片的相关属性。 Background-image 可设置一个或多个背景，预设为none（无图片），不显示背景。预设背景图像放置在元素的左上角，且垂直和水平方向重複。 See the Pen background-image by karen (@karen0922) on CodePen. Background-repeat 设定背景图片是否重複，预设为垂直水平重複，需有设定图片才会有作用。 repeat 垂直和水平重複背景图像（预设值） repea…

大家喜欢看科幻电影吗？科幻电影市场曾经因星际大战热潮大起，也曾经因为市场变迁而大落，例如星际争霸战（或称星际迷航、星舰迷航…等）曾经拥有广大影迷，但也因市场潮流而离开萤光幕。 可以保证的是，科幻片从来没有离开过我们，未来也不会，就有国外的网站分析：科幻片中的电脑画面，为何总是蓝色的？橘色、绿色都不适合用来当作科幻片的电脑画面吗？     研究人员非常的拼命，从1968年起的科幻片都逐一进行色彩分析统计，得到了下列的视觉统计。 唯一的例外是1991年电影《魔鬼终结者…

网页设计的黄金準则：丰富的内容、丰富的图片、丰富的功能，只要準备了上述的三个条件，网站已经离成功不远了。不过近年也有一些网页设计师，反思网站所带来的资讯与视觉洪流，给了客户太多，反而让客户觉得无所适从，所以越来越多的设计者，开始思考留白设计的方式製作网站。 http://joris.works/ 留白设计在平面设计上很常见，应用也非常广泛，不论是艺术呈现或商业设计，都有太多留白设计的经典作品。说得更白话一点，有时你顺手拿起了一张房地展宣传单、展演资讯，可能就有留白设计的元素在内。 留白处应该要被…

色彩对品牌很重要，对形象很重要，也对网站很重要。一般来说企业网站的色彩构成会以企业现有也常用的色彩为主，例如Logo、招牌、名片或是店面的颜色。 为何要选择色彩？除了常用的企业色彩外，您还有更多的选择。有些企业希望能够给予客户多元的形象，将企业与产品的色彩加以区隔，因此新色彩可以用于独特的产品介绍页面、服务宣传页面，或是企业形象页面等。 不过很多企业草创时期，没有思考到企业形象与色彩的部份，设计上使用了单色或双色系的视觉呈现，延伸设计色彩就会显得吃力，这时您可以洽询专业的视觉设计师，或是透过今天…

色彩好帮手Kuler 挑选好了喜爱的颜色，要如何告知网页设计师，一直是企业与网页设计公司经常存在的困扰，透过了免费的Adobe Kuler的机制，可以看到您挑远的颜色的RGB与HEX色码，只要将这个网页撷取或告知色码，所有的设计师都能精準的设计出您想要的色彩效果。 Adobe Kuler看起来介面非常的专业，但其实即使是没有学过设计的人，也可以用滑鼠轻鬆的找到喜爱的组合。Adobe Kuler的色轮功能除了提供了六种常见的配色：相似对比、同色对比、三组对比、补偿对比…等。 网页设计来…

专业的数位相机以及影像处理，大多有一个令人激赏的功能：色彩去除。玩家可以将照片变成黑白色彩，但是仅只保留指定的颜色。不过在Photoshop等软体上进行较为複杂，一般非设计人士做起来耗时费力，现在现在让我们介绍一套十分好用的免费软体：Photo Black & Color可以满足去除色彩的需求。 下载安装好后，将照片读取到程式内，使用者可以使用吸管指标，指定特定的照片颜色、以及与该色相似的颜色等、加以去除或是保留，非常的简单。   不再限于复古，单色艺术的延伸 至于如何保留多种…

先前我们介绍了暗色系的网页设计範例之后，得到了不少点击迴响。除了暗色系或无色的设计外，也有十分喜爱缤纷色彩的公司，大胆的混色、对比、光影的变化下，打造出来令人喜爱的页面。 我们列举了一些国外知名的品牌的网站，所设计的缤纷色彩设计样本： WeareHughes.com Havaianas.com PixelCool.com CuriousGenerationGroup.com NybbleTech.com Boomerang TV RotaCups.com LifeMusicFoundation….

暗色的形象：神秘、质感、高贵 许多国际知名的网站，都是以亮色系为主要的网站基底，从科技龙头Apple、购物龙头Amazon、社群龙头Facebook都是以明亮色系为网站的主要配色。 那么，暗色的网站是否就没有发挥的余地呢？其实暗色系的品牌形象，经常被用于：顶级汽车、珠宝金属、艺术设计、以及需要强烈品牌形象的网站，都非常适合暗色系的网页设计。 暗色的网页设计特色，在于字体以高亮度的方式呈现对比，给人感觉格外的跳出，也有现代感与时尚等优点，不过缺点是字体的变化需拿捏，过多色彩或难以辨识的字体，都会让…

每年设计界，同时也是色彩界的权威：Pantone公司都会按照惯例，发表年度的代表色彩，而这不仅是网页设计界的极佳参考，更是所有视觉设计产业十分瞩目的讯息。 今年的代表颜色究竟是什么呢？答案是「探戈橘」(Tangerine Tango)这个色彩，根据Pantone的介绍为：温暖的色彩，带者戏剧化的成份，能够刺激视觉感官的神奇感受，是一个能够散发出能量的色彩。 这个色彩的应用如同其他的色彩一样，是十分的多元的。以下可以参考一些日常生活设计商品，所能看到的应用颜色。 很巧合的，过去我们也曾使用相近于「…

只要对于色彩十分讲究的视觉设计师，一定都会有一本Pantone公司所推出的色彩参考书籍。也由于Pantone对于颜色的诠释十分的精準，因此许多产业指定使用Pantone所推荐的色彩，举例来说，在日本就有Pantone色彩手机，而美国则有Pantone的服饰，可见应用于日常生活之广泛。 每年，Pantone也会推出年度的代表颜色，例如2010年的色彩是15-5519（海洋蓝），视觉上的呈现就是碧海蓝天的舒畅宜人感受。2009年的颜色则是14-0848（Mimosa，黄色的含羞草）。 2011年Pa…

网页设计是由许多不同的元素所组成，各有不同程度的重要性和一些特别的要求。有些元素是共享的关係，有些却是不相关的。困难之处在于能够传达视觉美感及成效。这是网页设计的对比的原则。 对比差异是来自两个或多个元素，设计人员可以直接创造视觉趣味让用户关注。但试想一下，如果在网页上所有的元素都是相同比重的风格和外观。就没有架构，没有层次结构与主从之分。网站内容在阅览上几乎是非常难以消化的。这是对比原则归属为一个网页设计的重要成分。 在这篇文章中，我们将看到如何透过对比实现三个方面之差异造成的设计： 色彩，大…

关于网页设计的色彩 网页设计色系与印刷颜色有着很大的不同，一为ＲＧＢ这三个颜色称为光的三原色(RGB)，就是红(red)，绿(green)，蓝(blue)。所有的彩色电视机、萤幕都具备产生这三种基本光线的发光装置。因为这三种光线的混合几乎可以表示出所有的颜色，因此电脑里头就用RGB三个数值的大小来标示颜色，每个颜色用8bit来记录，可以有0~255，共256种亮度的变化，三种乘起来就有一千六百多万种变化，这也是我们常听到的24 bit全彩。   关于平面设计(印刷)的色彩 印刷颜色则是…