UI设计不像平面设计那样随性,期间可以用点技巧来减少痛苦。
1. 设置网格线 保持像素完美
不在1:1分辨率下也能保持像素完美,可以通过创建网格线来避免虚边的出现。编辑 > 首选项 > 参考线、网格和切片保持尺寸为偶数。
例如:设置网格线间隔为64px,子网格为64
使用网格在画图形时会自动吸附,不是1:1状态下也可以画出完美像素。
2 .智能对象和路径的变形
(1)将图层转换为智能对象(右击图层 > 选择转换为智能对象...
分类为 前端 的文章:
「如果你不够小心,在Photoshop 中旋转图像时,可能会毁了你辛苦完成的作品!——马克爱德华」
在Photoshop 中旋转图像时(这边指顺时钟或逆时钟旋转90 度的情况),如果你的图像的长跟宽都是奇数,或者都是偶数时,并不会发生什么问题。但是当你的图像只有一边为奇数时,你会得到预期之外的结果,如下图:
为了更清楚的了解发生什么事情,我们取一张3X4 像素的图形,可以发现由于旋转中心在两像素的邻边,当我们对此图形做90度...
说明:
一个jQuery版的倒计时特效代码。提取自金山快盘15G实用型空间一年期10元的活动。代码下载地址在文末。
效果:
[本地演示(图片版)] [本地演示(文字版)]
代码:
<style>
/* 文字版的倒计时可以删除这些样式,文字版在示例中不需要样式 */
.count-down{
position: absolute;
top: 45px;
left: 20px;
}
.count-down span{
display: inline-block;
*display: inline;
*zoom: 1;
width: 32px;
he...
效果:
多广告不冲突、随滚动条移动(一直显示在可视区域)。
floatAD.js
/**
* 漂浮广告,兼容IE
* 用法:<div id="gg1" style="width:100px;height:100px;background-color:red;color:yellow"> 广告1 </div>
* <script type="text/javascript">var ad1=new AdMove("gg1");ad1.Run();</script>
* 整理:13:12 2013年7月4日 星期四
*/
fu...
获取浏览器地址栏URL中的某个参数值。
function getParam(paramName){
paramValue = "";
isFound = false;
if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=")>1){
arrSource = unescape(this.location.search).substring(1,this.location.search.length).split("&");
i = 0;
while (i < arrSource.length &&a...
import CryptoJS from 'crypto-js';
export const encrypt = (string) => {
let password = process.env.APP_KEY;
var key = CryptoJS.enc.Utf8.parse(password);
var option = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 };
var encrypted = CryptoJS.DES.encrypt(string, key, option);
return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
};
export const de...
网上有人说为中文或E文添加span标签或添加class然后单独定义样式。
其实,办法很简单:
在 font-family 里将E文字体写到前边即可:
body {
font-family:Corbel,Georgia,"微软雅黑";
}
浏览器会根据顺序为文字选择字体,如果字体中没有这个字符(比如中文),就会去下一个字体中寻找(E文字体中是没有中文字体的)。
效果:
说明:
做网站前端朋友们都知道,用户浏览网站时,网页上的字体是客户电脑上的的。如果说网站使用了用户电脑所没有安装的字体,那预期的效果就没有了,浏览器将会使用电脑默认的字体来显示页面,比如“宋体”。
其实使用用户电脑上没有的字体还是有解决办法的。比如以下两种:
方法1:
准备好字体文件(需要制作几种不同的格式),放置到服务器上,再用 CSS 的方法把字体加载到网页中,这样,即使用户电脑中没有某一种字体,也可...
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及各浏览器兼容情况。
Web字体格式介绍
TrueType (.ttf)
Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使...
注:中文的话除了“黑体宋体楷体”也就“雅黑”可选了,以下是英文的几个可用字体(蓝色标注的是本站推荐使用)。另,本文偏重Windows系统。
所有平台都预装的字体,被称为“安全字体”,因为它可以保证所有用户的视觉效果是一样的。字体安全即从安全字体的使用中说起!!
在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。但多数情况下,考虑各个因素...
我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢?
在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。
那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊...
js获取本地即将上传文件的大小:
<input type="file" onchange="fileChange(this);" />
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("...