CSS文字阴影效果

2009年8月5日 雨无形 没有评论

上回说到用css模拟图片阴影效果，那么文字有办法吗？

其实在css3中已经有一个text-shadow属性专门来实现这个效果，不过目前只有Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)等几个现代浏览器可以支持该属性，IE系的暂时无法实现该属性。

text-shadow的语法：

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径”

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

具体请参考：http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

值得注意的是，text-shadow可以应用多组属性，也就是可以如下方法使用：

0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

下面看几个范例：(请使用Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)浏览器运行查看效果。)

提示：你可以先修改部分代码再运行。

至于顽固的IE，只能用滤镜来实现类似效果了，下面也顺便介绍一下IE滤镜制作阴影。

IE滤镜的语法为：

filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
其中color为阴影颜色 direction为角度 strength为阴影距离

下面一样看个例子

提示：你可以先修改部分代码再运行。

可以看到效果比较差，只有在小字体的时候才能用下。另外要注意要是用滤镜的元素必须触发haslayout

最后把两个方案结合一下即可实现支持大部分浏览器的CSS阴影效果。

提示：你可以先修改部分代码再运行。

分类: css, 网页设计 标签: ,

另辟蹊径，用css制作简单图片阴影效果

2009年8月4日 雨无形 没有评论

一般制作阴影效果都是使用的图片背景或者css滤镜，个人对于CSS滤镜一直抱有抵触心理，所以能不用就不用，有时候为了实现一些效果需要给图片加上阴影。可以尝试一下以下CSS方法。

a.shadow {
	display:inline-block;
	padding:1px;
	background:#d1d1d1;/* 第三层边框的颜色 */
	border:solid #f0f0f0 1px;/* 第四层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
a.shadow img {
	padding:1px;
	background:#676767;/* 第一层边框的颜色 */
	border:solid #a4a4a4 1px;/* 第二层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

提示：你可以先修改部分代码再运行。

分类: css, 网页设计 标签:

一个优秀的相册程序zenphoto安装记

2009年8月3日 雨无形 没有评论

zenphoto是一个优秀的相册程序，我最欣赏的一点就是可以通过FTP来上传照片，这样 免去了通过网页上传的一些不稳定因素，同事支持续传。但是这个程序安装起来有许多需要注意的地方。

首先要检查你的php环境，zenphoto对环境要求比较严格，因为我是自己的服务器，所以还可以根据需求稍微调整下，如果是虚拟主机的用户可能就比较麻烦了，下面列举一下这个程序需要的一些环境组件。

1.php要关闭安全模式

2.关闭magic_quotes_gpc

方法：修改php.ini文件搜索magic_quotes_gpc找到magic_quotes_gpc = On 修改为magic_quotes_gpc = Off即可。

3.开启gettext()支持

方法：还是修改php.ini搜索extension=php_gettext.dll，将前面的分号“;”去掉，重启apache即可。

4.setlocale()，我安装的时候报setlocale()失败，但是这个问题并不影响我安装，也不知道有什么后遗症，不过既然不影响安装暂时就放下吧。

5.修改mbstring.internal_encoding = UTF-8

6.修改zp-config.php，填上你的数据库相关信息即可

基本上注意这些问题就能安装成功。

另外我安装的是1.2.4中文版，没有装新的1.2.5因为1.2.5暂时没有中文版。

另外我遇到一个问题就是安装的时候老是php脚本超时，只能修改php.ini的脚本超时时间来完成安装，但是本地调试没问题，不知道是服务器设置问题还是怎么回事，有知道的希望能告诉我一声。

最好附上我的相册demo地址http://photo.yuwuxing.cn

分类: 网站程序 标签: ,

dell1850服务器升级记录

2009年8月3日 雨无形 没有评论

这台dell 1850服务器是05年买的，已经服役了4年了，配置是xeon 2.8/1M 1G ddr2 400 73G 1W转的SCSI硬盘，现在都09年了1G内存已经捉襟见肘，CPU也经常不够用，于是准备升级。

查了下 主板为INTEL E7520的芯片组，能支持的最大CPU为XEON 3600DP 2M 最大支持16G DDR2 ecc reg内存共2个CPU插槽和6个内存插槽，两个硬盘位

定下计划 鉴于现在内存白菜价，就买了6根2G的内存一共12G 买了2块XEON 3600DP/2M的cpu 在硬盘上面犯了个小错误，在网上查的E7520芯片组是支持SATA硬盘的，先买了块1T的SATA硬盘，结果机器搬回来以后发现DELL这个是不支持SATA的，只能用SCSI硬盘，只好退了又去买了块146G 1.5W转的SCSI硬盘换上去。

升级后要装64bit的系统，不然认不出这么大内存，终于鸟枪换炮了。

分类: 生活点滴 标签:

linux笔记(2)lvm调整分区大小

2009年7月23日 雨无形 没有评论

LVM 修改分区大小

减少某分区大小
#umount /home
#mke2fs -n /dev/vgsys/lvhome
这个命令可以得到blocksize 和blocks。blocksize * blocks 就是分区的总大小，byte,
然后算出想到最终的大小，或减少的大小，单位为byte, 然后除以blocksize，即为最终大小的blocks。
#resize2fs -f /dev/vgsys/lvhome new_block_size
#lvreduce -L -20G /dev/vgsys/lvhome
#mount /home

增加某分区大小

#lvextend -L +20G /dev/vgsys/lvhome
#resize2fs /dev/vgsys/lvhome

分类: LAMP相关 标签: , ,

淘宝、开心网、qq空间被公司屏蔽的解决方法

2009年7月22日 雨无形 没有评论

最近公司把淘宝、开心网、qq空间等一些网站都屏蔽了，要偷偷上？没问题，按下面的方法修改host文件就行了

找到C:\WINDOWS\system32\drivers\etc\下面有个host文件，用记事本打开，在最后面添加

122.224.194.180 www.taobao.com
121.14.63.211   assets.taobaocdn.com
119.97.134.221  img01.taobaocdn.com
119.97.134.202  img02.taobaocdn.com
119.97.134.223  img03.taobaocdn.com
119.97.134.204  img04.taobaocdn.com
119.97.134.225  img05.taobaocdn.com
119.97.134.206  img06.taobaocdn.com
119.97.134.207  img07.taobaocdn.com
119.97.134.228  img08.taobaocdn.com
119.97.134.209  pics.taobaocdn.com
220.181.100.33  www.kaixin001.com
119.97.129.106  imgcache.qq.com

保存即可，试试看，是不是这些网站又能上了？

分类: 互联网观察 标签: , , ,

centos 下 rpm方式安装mysql

2009年7月18日 雨无形 没有评论

centos/linux下面用rpm方法安装mysql5.1

首先还是要下载，因为我是64位的linux，所以下载的是64bit的版本，需要下三个文件server和

64bit mysql 下载地址
MySQL-server-community-5.1.36-0.rhel5.x86_64.rpm
http://dev.mysql.com/get/Downloads/MySQL-5.1/MySQL-server-community-5.1.36-0.rhel5.x86_64.rpm/from/ftp://mysql.cdpa.nsysu.edu.tw/Unix/Database/MySQL/
MySQL-client-community-5.1.36-0.rhel5.x86_64.rpm
http://dev.mysql.com/get/Downloads/MySQL-5.1/MySQL-client-community-5.1.36-0.rhel5.x86_64.rpm/from/ftp://ftp.stu.edu.tw/pub/Unix/Database/Mysql/
MySQL-devel-community-5.1.36-0.rhel5.x86_64.rpm
http://dev.mysql.com/get/Downloads/MySQL-5.1/MySQL-devel-community-5.1.36-0.rhel5.x86_64.rpm/from/ftp://ftp.mirror.tw/pub/mysql/

32bit和更多下载镜像，请自己上www.mysql.com下载

这里预设下载目录为/usr/local/src/
依次执行以下命令
#下载所需rpm包

cd /usr/local/src/
wget http://dev.mysql.com/get/Downloads/MySQL-5.1/MySQL-server-community-5.1.36-0.rhel5.x86_64.rpm/from/ftp://mysql.cdpa.nsysu.edu.tw/Unix/Database/MySQL/
wget http://dev.mysql.com/get/Downloads/MySQL-5.1/MySQL-client-community-5.1.36-0.rhel5.x86_64.rpm/from/ftp://ftp.stu.edu.tw/pub/Unix/Database/Mysql/
wget http://dev.mysql.com/get/Downloads/MySQL-5.1/MySQL-devel-community-5.1.36-0.rhel5.x86_64.rpm/from/ftp://ftp.mirror.tw/pub/mysql/

#开始安装

rpm -ivh MySQL-server-community-5.1.36-0.rhel5.x86_64.rpm MySQL-client-community-5.1.36-0.rhel5.x86_64.rpm MySQL-devel-community-5.1.36-0.rhel5.x86_64.rpm

然后运行一下mysql看是否安装成功
mysql
提示：

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 5.1.36-community-log MySQL Community Server (GPL)
Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the current input statement.
mysql>

即为安装成功

修改登录密码：

mysqladmin -u root password ‘new-password’
格式：mysqladmin -u用户名 -p旧密码 password 新密码

再次登录

mysql -u root -p

分类: LAMP相关 标签: , ,

适合自己的才是最好的——打造最适合自己习惯的reset.css

2009年7月14日 雨无形 没有评论

最近准备写一个符合自己习惯的css框架，首先第一步当然是reset.css

研究了一些网上的资料，整合了一下，以YUI为蓝本，整理出了最符合自己的reset.css。

参考资料有

1、玉伯同学的Reset CSS研究（八卦篇）

2、蓝色理想上的打造自己的Reset.css

3、Eric的reset css

4、YUI 3的CSS RESET

5、Less is more – my choice of Reset CSS

首先是最基本的清除padding跟margin：

1
2
3
4

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
margin: 0;
padding: 0;
}

这个我在YUI的基础上进行的修改，去除了pre,code,blockquote三个标签，因为我一般做的项目都是企业或门户型网站，用到这三个标签的机会极少，因此就去除了这三个标签的重置，节省几个字节。

然后是清楚border，一般常用的需要清除的只有fieldset、img两个元素，特别是img，如果不清楚在加上链接的时候会出现蓝色边框。

1
2
3

fieldset, img {
border: 0;
}

对于h标签,我只重置了该标签的font-size其它都没重置，在yui中的font-weight:normal;重置被我去除了，因为在我的使用中的大多数情况下h标签都是需要font-weight:bold的，在这里去除了以后还要加，反而麻烦了。

1
2
3

h1,h2,h3,h4,h5,h6 {
font-size:100%;
}

li标签的list重置，我选择了eric大牛的方法，

1
2
3

ol, ul {
list-style: none;
}

而没有用yui的方法

1
2
3

li {
list-style: none;
}

因为蓝色理想那篇文章里写，前一种方法的性能更好，这个目前没有什么实例证明，不过3个直接姑且就先用第一种吧。

再下来是table的样式

1
2
3
4
5
6
7
8

table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
font-weight:normal;
}

最后几个伪类的样式

1
2
3

:focus {
outline: 0;
}

这个主要是针对非IE浏览器链接点击时的虚线框。

另外我一直很犹豫是否把链接的下划线去掉，经过考虑以后还是不在reset里面去掉了。

秉承够用就好的原则，代码中我去掉了那些我不常用的标签的重置，比如abbr,acronym,sup,sub,code,address,cite,dfn,var,blockquote,q标签，一般项目中基本上用不到，所以就不设置了。strong,em等标签还是使用默认样式，这里也不重置了。

将前面的综合一下最后的代码是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
reset css version: 1.0 | 20090714
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
	margin: 0;
	padding: 0;
}
fieldset, img {
	border: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
	font-weight:normal;
}
:focus {
	outline: 0;
}
分类: css, 网页设计 标签: ,

在centos 5.2 linux 下安装openssl

2009年7月8日 雨无形 没有评论

第一步当然是下载了

截止到今天的最新版本下载地址为http://www.openssl.org/source/openssl-0.9.8k.tar.gz

我们在linux下输入命令:

cd /usr/local/src

wget http://www.openssl.org/source/openssl-0.9.8k.tar.gz

下载openssl到/usr/local/src目录下

然后开始安装，一次执行以下命令即可。

tar zxvf openssl-0.9.8k.tar.gz

cd openssl-0.9.8k

./config shared zlib

make

make test

make install

mv /usr/bin/openssl /usr/bin/openssl.save

mv /usr/include/openssl /usr/include/openssl.save

mv /usr/lib/libssl.so /usr/lib/libssl.so.save

ln -s /usr/local/ssl/bin/openssl /usr/bin/openssl

ln -s /usr/local/ssl/include/openssl /usr/include/openssl

ln -sv /usr/local/ssl/lib/libssl.so.0.9.8 /usr/lib/libssl.so

到此安装完毕，然后配置库文件搜索路径

cd ..

echo "/usr/local/ssl/lib" >> /etc/ld.so.conf

ldconfig -v

 

最后检测一下安装结果

openssl version

如果出现你的openssl的版本号即为安装成功了

分类: LAMP相关 标签: , ,

根据访问者分辨率，自动调用不同版式CSS的代码

2009年7月8日 雨无形 没有评论

虽然现在已经基本淘汰800分辨率了1024已经成为主流，但是随着大屏幕液晶的不断降价，更高的分辨率将会逐步成为主流，为了适应越来越大的分辨率，有时候我们会采用流体布局，但是流体布局有时候也有局限性，下面一段js可以实现根据用户客户端分辨率的不同，调用不同的css代码来实现适应不同分辨率的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var Swidth = screen.width;
var Surl = "http://www.yours.com/";
var Skin = ["cssstyle1.css", "cssstyle2.css"];
var Skintemp;
if (Swidth >= 1280) {
    Surl += "skin_1200";
} else {
    Surl += "skin";
}
for (var i = 0; i < Skin.length; i++) {
    Skintemp = document.createElement("link");
    Skintemp.type = "text/css";
    Skintemp.rel = "stylesheet";
    Skintemp.href = Surl + "/" + Skin[i];
    document.getElementsByTagName("head")[0].appendChild(Skintemp);
}
分类: JavaScript, 网页设计 标签: , ,