网页像素如何设计 第1篇
逻辑运算符 not、and 和 only 可用于组成复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们组合成一个规则。
and
:用于将多个媒体特征组合到一个媒体查询中,要求每个链接的特征返回 true 以使查询为 true。它还用于将媒体功能与媒体类型连接起来。
not
: 用于否定媒体查询,如果查询将返回 false,则返回 true。如果出现在逗号分隔的查询列表中,它只会否定应用它的特定查询。如果使用 not 运算符,还必须指定媒体类型。
only
:仅当整个查询匹配时才应用样式。它对于防止旧浏览器应用选定的样式很有用。当不只使用时,旧浏览器会将查询屏幕和 (max-width: 500px) 解释为屏幕,忽略查询的其余部分,并将其样式应用于所有屏幕。如果使用 only 运算符,则还必须指定媒体类型。
,
: 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此,如果列表中的任何查询为真,则整个媒体语句返回真。换句话说,列表的行为类似于逻辑或运算符。
示例:查询屏幕设备+特性
示例:反向查询设备和特性(not 关键字不能用于否定单个特征查询,只能用于否定整个媒体查询)
网页像素如何设计 第2篇
第一个介绍的是分隔线,请看下图,为 的导航栏。
留意图中红圈圈中的线已经按钮之间的分隔线,这些线看起来有一种凹进去的感觉,形成一种很好的分隔线的感觉。
接下来我把这张图放大,我们看看其中原理。
我们可以看到这些分隔线,都是有2条相邻的1px直线构成的,并且一条颜色较背景色更深,一条较浅。接下来,看方法:
选取铅笔工具(不要选错为画笔),大小调为1px
选取一个较背景色更深的颜色,如图中的深蓝色,按住Shift画出一条直线
选取一个较浅的颜色,再画一条直线。OK!
PS.画线过程可以放大画布(Z)以便观察。
怎么样,效果比单色的分隔线要好很多吧?接下来再看一些使用这个分隔线技巧的例子:
2.像素边缘
首先我们看一张没有加“像素边缘”的原图:
接下来是加上后的:
看出来区别了吗?没关系,接下来请看放大下的图片:
可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇,而有一种灯光反射
(高亮)的效果。使得白色块的边缘更加突出。
而方法跟第1个技巧是一样的,就是用铅笔工具画1px的线。需要注意颜色的选择,一般选择比背景色更浅的颜色,才能
制造高亮的效果。
网页像素如何设计 第3篇
可以通过 标签设置移动端视口的大小和缩放。
如果不设置视口的尺寸,移动设备通常会自动优化网页的显示。在iOS系统上视口默认为980px宽。如果你希望实现更加复杂合理的优化,通常需要修改移动设备的默认视口设置。
设置视口属性的语法是:
viewport包含6个属性:
视口的常规设置方法:
警告:1. 将 user-scalable值设置为 0(与否相同)违反了《Web 内容可访问性指南》 Web Content Accessibility Guidelines (WCAG)。2. 使用 user-scalable=no 可能会给有视力障碍(例如低视力)的用户带来可访问性问题。 WCAG 要求至少 2 倍缩放;但是,最佳做法是启用 5 倍变焦
网页像素如何设计 第4篇
这是3个技巧里面最容易实现的,但它一样特别实用,甚至经常会用到。照例我们先看图片:
可以看出在有阴影下,文字立体感得到加强,特别在文字的背景较复杂,比较多噪点时使用该技巧会使文件比较突出。
而加上阴影方法很简单,只需双击图层名称,添加“投影”的图层样式。然后按下图设置参数:
也就是把距离与大小调为“1”。
接下来我们看看一些使用该技巧的例子:
总结一下
以上这些技巧都是我自己看来学来的,在这里希望需要的人可以学会它。这些1px的线很多人会说,用户根本就不会去
注意,就是瞪大眼都看不到。是的,这的确没错。但是我认识很多好的设计,能经得时间与多人的考验,那都是很多细
节来构成的。这些细节尽管你觉得看不到,但是它却为成功的设计打下坚实的基础。
来自: 如颖随行 > 《PS网页元素》
0条评论
发表
请遵守用户 评论公约
字体是网页设计中最重要的细节