转 设计师也需要了解的一些前端知识

一、常见视觉效果是如何实现的 一些事

  关于文字效果 互联网的一些事

  文字自身属性相关的效果css中都是有相对应的样式的,如字号、行高、加粗、倾斜、下划线等,但是一些特殊的效果,主要表现为ps中图层样式中的效果,css是无能为力的。但是css也在不断发展,在css3中已经新增了文字阴影的效果,可惜IE6、7、8均不支持。所以,一些比较特殊的文字效果,依然只能通过图片来实现。

一些事

 

  说说文字间距 互联网的一些事

  在css中其实是可以控制文字间距的,但是现实中很少会使用,一方面是很多设计师不知道css中有相应的属性,并且需要使用文字间距的场景也不多,另一方面,浏览器解析文字间距的方式也令这一属性在某些场景下无法使用,比如在文字居中的时候,实际居中的区域是包含了文字间距的(如上图),使得在视觉效果上让人无法接受,所在当需要在文字中保留一定空间的时候(比如两个字的按钮),会直接用空格来代替。

yixieshi

 

  不过多知道一种实现文字间距的方法总是好的,虽然目前来看应用场景很少,但是也许某天就派上用场了。比如12号的雅黑文本看上去会感觉密密麻麻的,但是加上一点文字间距,阅读效果就会好很多。

互联网的一些事

 

  关于字体 yixieshi

  网页里中文文本字体一般都是宋体,不建议使用其他字体,但是其实字体是可以上传到服务器,然后页面中引用该字体,就解决了用户电脑上没有相应字体的问题。不过很少有人会这么做,为什么呢?1.浏览器是可以设置忽略网页字体,改用用户设置的字体(IE:工具->Internet选项->辅助功能)。2.服务器上的字体是需要加载的,而一个字体一般都几兆,严重影响页面载入速度。所以对于特殊字体,通常都是做成图片。 互联网的一些事

  关于背景

互联网的一些事

 

  看看通常一个按钮是怎么拼出来。

一些事

 

  产品类的按钮我们一般都是像A这样设计(中间段是横向的重复图案),而不是像B这样,因为产品类的按钮一般都是复用的,可以用两段拼出来一个按钮,而B这个宽度就限死了。 一些事

  关于渐变、圆角、投影

互联网的一些事

 

  在css3中终于实现了渐变、圆角和投影,不过可惜的是IE6、7、8均不支持,但是已经可以在越来越多的网站中看到新css的应用,尤其是按钮,淡淡的渐变,hover上去有点淡淡的阴影,效果很好,对于不支持的浏览器,设置一个颜色近似的背景,看到的是单色、直角效果。 yixieshi

  需要注意的是:代码实现的只能是线性渐变,从某个颜色均匀的渐变到另外一个颜色,所以高光什么的只能舍弃了。css3中还有径向渐变,不过暂时应用场景不多。 yixieshi

  互联网发展速度很快,大大小小的新技术很多,多和前端交流吧。 一些事

  关于对齐

yixieshi

 

  主要是表单中文字的上下居中对齐,在ps里很简单,但是实现出来却如上图所示的,很难看,要想对齐,真是件麻烦的事情,没有好的办法。所以不是特别关键的地方,建议就随它去了。

一些事

 

  二、前端是如何切图的 一些事

  第一步 拼图 yixieshi

  为了加快页面加载速度,会把多张图片拼在一张图片上。 互联网的一些事

  第二步 保存为Web所用格式

一些事

 

  网页上的图片,照片、banner类一般保存为jpg,其他的,通常都是保存为png-8或gif(除了动态图片需要用到gif,其他场景png-8完全可以替代gif)。对于保存为png-8或者gif的图片,有时候会看到图片呈现带状感(如下图右侧),失真很严重。 互联网的一些事

  有两个办法,一是增加颜色的数量,但是增加数量会导致图片变大,需要在颜色数量和图片大小之间取一个平衡,而且如果图片上颜色太多,就算颜色数量增到最大256,依旧会有明显的带状感,这时候可以把图片拆开,把颜色类似的图片拼在一张图上。 yixieshi

  三、页面布局相关 互联网的一些事

  元素叠加的效果 yixieshi

  通过外补丁(margin)、绝对定位(position:absolute)可以实现多个元素互相叠加的效果,使得设计上不受布局的局限。

yixieshi

 

  固定屏幕的效果 yixieshi

  某些特殊场景使用(如上图的“回顶部”),解决跟随的问题。

一些事

 

  了解前端知识,不仅在沟通上更顺畅,设计上更合理,对于设计过程也有一定的帮助,比如在设计控件的时候,ps里看hover样式始终不够直观,这时可以把控件实现出来,直观的去感受,调整你的设计稿直到满意为止。虽然成本比较大,但是对于需要仔细推敲的控件来说还是值得的。

互联网的一些事

 

  某人曾说过,好的技术能带来设计上的突破,而好的设计也能促进前端技术的发展。css3、无极加载、在线编辑头像,很多技术的出现改变了设计的方式,向后多走一步吧!

yixieshi

 

本文链接:http://www.yixieshi.com/ucd/10585.html

转载于:https://www.cnblogs.com/leejersey/archive/2012/04/02/2430524.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/377585.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

六、DataLoader

一、DataLoader参数解析 DataLoader官网使用手册 参数描述dataset说明数据集所在的位置、数据总数等batch_size每次取多少张图片shuffleTrue乱序、False顺序(默认)samplerbatch_samplernum_workers多进程,默认为0采用主进程加载数据collate_fnpin_memorydrop_las…

单调栈 leetcode整理(一)

目录单调栈知识402. 移掉K位数字1673. 找出最具竞争力的子序列316. 去除重复字母(1081. 不同字符的最小子序列)321. 拼接最大数单调栈知识 单调栈就是一个内部元素有序的栈(大->小 or 小->大),但是只用到它的一…

数字签名 那些密码技术_密码学中的数字签名

数字签名 那些密码技术A signature is usually used to bind signatory to the message. The digital signature is thus a technique that binds a person or the entity to the digital data. This binding ensures that the person sending the data is solely responsible …

七、torch.nn

一、神经网络模块 进入到PyTorch的torch.nnAPI学习页面 PyTorch提供了很多的神经网络方面的模块,NN就是Neural Networks的简称 二、Containers torch.nn下的Containers 一共有六个模块,最常用的就是Module模块,看解释可以知道&#xff0c…

Java多线程初学者指南(8):从线程返回数据的两种方法

本文介绍学习Java多线程中需要学习的从线程返回数据的两种方法。从线程中返回数据和向线程传递数据类似。也可以通过类成员以及回调函数来返回数据。原文链接 从线程中返回数据和向线程传递数据类似。也可以通过类成员以及回调函数来返回数据。但类成员在返回数据和传递数据时有…

【C++进阶】 遵循TDD原则,实现平面向量类(Vec2D)

目录1、明确要实现的类的方法以及成员函数2、假设已经编写Vec2D,根据要求,写出测试代码3、编写平面向量类Vec2D,并进行测试4、完整代码5、最终结果1、明确要实现的类的方法以及成员函数 考虑到效率问题,我们一般将函数的参数设置为引用类型。…

Keilc的中断号计算方法

中断号码 (中断向量-3)/8转载于:https://www.cnblogs.com/yuqilihualuo/p/3423634.html

md5模式 签名_MD的完整形式是什么?

md5模式 签名医师:医学博士/常务董事 (MD: Doctor of Medicine / Managing Director) 1)医学博士:医学博士 (1) MD: Doctor of Medicine) MD is an abbreviation of a Doctor of Medicine degree. In the field of Medicine, it is the main academic de…

八、卷积层

一、Conv2d torch.nn.Conv2d官网文档 torch.nn.Conv2d(in_channels, out_channels, kernel_size, stride1, padding0, dilation1, groups1, biasTrue, padding_modezeros, deviceNone, dtypeNone) 参数解释官网详情说明in_channels输入的通道数,如果是彩色照片通道…

HTMl5结构元素:header

页眉header 页眉将是页面加载的第一个元素&#xff0c;包含了站点的标题、logo、网站导航等。<header> <div class"container_16"> <div class"logo"> <h1><a href"index.html"><strong>Real</st…

【C++grammar】左值、右值和将亡值

目录C03的左值和右值C11的左值和右值将亡值在C03中就有相关的概念 C03的左值和右值 通俗的理解&#xff1a; (1) 能放在等号左边的是lvalue (2) 只能放在等号右边的是rvalue (3) lvalue可以作为rvalue使用 对于第三点可以举个例子&#xff1a; int x ; x 6; //x是左值&#…

scala字符串的拉链操作_在Scala中对字符串进行操作

scala字符串的拉链操作Scala字符串操作 (Scala strings operation) A string is a very important datatype in Scala. This is why there are a lot of operations that can be done on the string object. Since the regular operations like addition, subtraction is not v…

九、池化层

一、Pooling layers Pooling layers官网文档 MaxPool最大池化层下采样 MaxUnpool最大池化层上采样 AvgPool最大池化层平均采样 例如&#xff1a;池化核为(3,3)&#xff0c;输入图像为(5,5)&#xff0c;步长为1&#xff0c;不加边 最大池化就是选出在池化核为单位图像中的最大…

[分享]SharePoint移动设备解决方案

老外写的一个PPT&#xff0c;讲SharePoint在移动领域的应用&#xff0c;2012年最新的&#xff0c;有iPad哟。/Files/zhaojunqi/SharePoint2010andMobileDevices.pdf 转载于:https://www.cnblogs.com/zhaojunqi/archive/2012/04/12/2444712.html

十、非线性激活函数

一、ReLU torch.nn.ReLU(inplaceFalse)官网提供的API 其中inplace表示是否在对原始数据进行替换 由函数图可以看出&#xff0c;负数通过ReLU之后会变成0&#xff0c;正数则不发生变化 例如&#xff1a;input -1&#xff0c;若inplace True&#xff0c;表示对原始输入数据进…

最短公共子序列_最短公共超序列

最短公共子序列Problem statement: 问题陈述&#xff1a; Given two strings, you have to find the shortest common super sequence between them and print the length of the super sequence. 给定两个字符串&#xff0c;您必须找到它们之间最短的公共超级序列&#xff0c…

单调栈 leetcode整理(二)

目录为什么单调栈的时间复杂度是O(n)496. 下一个更大元素 I方法一&#xff1a;暴力方法二:单调栈哈希表739. 每日温度单调栈模版解优化503. 下一个更大元素 II单调栈循环遍历为什么单调栈的时间复杂度是O(n) 尽管for 循环里面还有while 循环&#xff0c;但是里面的while最多执…

Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法)

ZZ&#xff1a;http://www.blogjava.net/anchor110/articles/355699.html1、在工程下新建lib文件夹&#xff0c;将需要的第三方包拷贝进来。2、将引用的第三方包&#xff0c;添加进工作的build path。3、&#xff08;关键的一步&#xff09;将lib设为源文件夹。如果不设置&…

QTP自传之web常用对象

随着科技的进步&#xff0c;“下载-安装-运行”这经典的三步曲已离我们远去。web应用的高速发展&#xff0c;改变了我们的思维和生活习惯&#xff0c;同时也使web方面的自动化测试越来越重要。今天&#xff0c;介绍一下我对web对象的识别&#xff0c;为以后的对象库编程打下基础…

leetcode中使用c++需要注意的点以及各类容器的初始化、常用成员函数

目录1、传引用2、vector使用初始化方法常用成员函数3、字符串string初始化方法常用成员函数4、哈希表 unordered_map初始化常用成员函数示例&#xff1a;计数器5、哈希集合 unordered_set初始化常用成员函数6、队列 queue初始化成员函数7、栈stack初始化常用成员函数7、emplace…