Archive for the ‘css’ Category

css中文字体用utf转码

Posted in css on 02/01/2010 03:31 下午 by tunpishuang

最近在用zend studio开发一个系统，在做前台设计的时候，碰到了如图的问题，一个lexical error，google了一下，aptana插件编辑器中，对于css中的cjk文字都需要使用utf编码来表示，所以把宋体改为\5b8b\4f53，因为有些浏览器无法识别cjk文字。

参考：http://lifesinger.org/blog/2009/08/font-family-in-css/

 

两个css立体按钮

Posted in css on 01/30/2010 03:58 上午 by tunpishuang

、

第一个按钮

html代码：

1
<a class="button" href="#"><span>Button One</span></a>

css代码

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
28
29
30
31
32
33
34
35
a.button {
    a.button{
        float:left;
        font-size:110%;
        font-weight:bold;              
        border-top:1px solid #999;
        border-left:1px solid #999;
        border-right:1px solid #333;
        border-bottom:1px solid #333;
        color:#333;    
        width:auto;
        }  
    a.button:hover{
        border-top:1px solid #333;
        border-left:1px solid #333;
        border-right:1px solid #999;
        border-bottom:1px solid #999;  
        color:#333;                
        }  
    a.button span{
        background:#d4d0c8 url(images/bg_btn.gif) repeat-x;        
        float:left;
        line-height:24px;
        height:24px;   
        padding:0 10px;                        
        border-right:1px solid #777;
        border-bottom:1px solid #777;                  
        }      
    a.button:hover span{
        border:none;                       
        border-top:1px solid #777;
        border-left:1px solid #777;    
        background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;
        cursor:pointer;
        }

第二个按钮

html代码：

1
<a class="button" href="#" onclick="this.blur();"><span>Button Two</span></a>
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
28
    a.button {
        background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
        color: #444;
        display: block;
        float: left;
        font: normal 12px arial, sans-serif;
        height: 24px;
        margin-right: 6px;
        padding-right: 18px; /* sliding doors padding */
        text-decoration: none;
    }
   
    a.button span {
        background: transparent url('images/bg_button_span.gif') no-repeat;
        display: block;
        line-height: 14px;
        padding: 5px 0 5px 18px;
    }
    a.button:active {
        background-position: bottom right;
        color: #000;
        outline: none; /* hide dotted outline in Firefox */
    }
   
    a.button:active span {
        background-position: bottom left;
        padding: 6px 0 4px 18px; /* push text down 1px */
    }

这两个按钮的都用到了sliding door（滑动门）技术，第一个按钮通过border色彩的变化产生立体效果，第二个按钮通过图片位置的变换产生立体效果。第一个按钮有个bug,在IE8下面，:active效果没有反应。

下载

 

将小型、现代的产品主页由psd转换成XHTML/CSS模板

Posted in css, html, photoshop on 11/20/2009 12:20 上午 by tunpishuang

Minimal and Modern Layout: PSD to XHTML/CSS Conversion

原文地址：http://sixrevisions.com/tutorials/web-development-tutorials/minimal-and-modern-layout-psd-to-xhtmlcss-conversion

本教程将会指导你将一个photoshop网页设计转换为可以使用的HTML/CSS模板。这是web设计和代码转换系列教程的第二部分。

demo

点击下面的图片将会看到本次制作的 demo 的效果。

Demo

开始之前

如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分: 用Photoshop设计一个小型、现代的产品主页 ， 因

为第二部分需要第一部分做好了的psd文件。

如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。

创建文件结构，准备文件

1 在桌面上创建新的空目录，取名portfolio。

2 在portfolio目录下面继续创建images目录用于存放图片。

3 接下来创建两个空文件 styles.css和index.html

Creating the file structure and preparing the files

4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。

5 在文档的<head>标签加入对styles.css的链接。可以使用如下代码：

代码段1

<link href="styles.css" rel="stylesheet" type="text/css" />

Creating the file structure and preparing the files

页面分区

以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。

Coding the layout sections

6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top,

#welcome, #sidebar, #content 和 #footer。 Read the rest of this entry »

 

Firefox 3.1中加入网页过渡特效

Posted in app, css on 09/16/2008 02:12 下午 by tunpishuang

今天的Shiretoko(Firefox 3.1开发代码)每日编译版通过css扩展加入了简单网页元素过渡特效，这个扩展由WebKit项目研发和维护。

扩展除了对一些插件和弹出菜单不能实现特效外，对大多数网页有移动，旋转，歪斜，等比例，矩阵等特效。在一下图中，Google主页和维基百科英文主页中已经嵌入了过渡特效：移动，翻转，歪斜。我也加入了一些实验性的特效已到达更好的效果。

你可以在今天的编译版中尝试一下代码：

1
2
<iframe style="width:500px; height:500px; -moz-transform:translate(100px, 50px) rotate(30deg) skew(20deg);" src="http://google.com"></iframe>
<iframe style="width:500px; height:500px; -moz-transform:translate(50px, 80px) rotate(-50deg) skew(-20deg); -moz-opacity:.70;" src="http://wikipedia.org"></iframe>

我也说过了这些特性正处在试验阶段，还没有被正式的采用（所以加入了-moz前缀），Mozilla公司内部此项目的负责人Keith Schwarz说：现在已经有两个浏览器（FF和Safari）支持此特效了，所以应该很快会被采纳到正式版中。

Keith在日志中说到：“这种css扩展开发的特效一定会很有趣，大多数在插件中被保留的功能都会整合到CSS或者是Javascrip中，这将给网页开发者创造更具视觉冲击力的网页创造条件。

[via mozillalinks.org]