PS真实火焰效果[附笔刷]

用photoshop制作真实火焰效果~先看看最终效果图:

点击放大

Continue reading

Posted in Photoshop1 views | Tagged | 1 Comment

5个CSS3实用特性

虽然CSS3还没有普及,但其具有的新特新却是每个设计师梦寐以求的,下面我们就来看看5个非常实用的CSS3特性:

1.圆角矩形

目前我们想制作圆角矩形只能通过图片的方式来实现,但在CSS3中只需要一二句代码就OK了:

.round{ -moz-border-radius:10px; -webkit-border-radius:10px; }

border-radius:10px;就是圆角的半径为10px,数值越大,弧度越大.

从代码就很明显的看出IE不支持这个…-moz 对应火狐,-webkit 对应safari和chrome.

Continue reading

Posted in HTML & CSS1 views | Tagged , | Leave a comment

WordPress文章运行代码插件RunCode

  RunCode可以为你的WP增加一个文本框用来运行代码(html/css/javascript).相信对做网页前端设计的朋友来说,是个非常有用的插件,可以更方便的展示自己的一些设计效果.

下载地址:http://wordpress.org/extend/plugins/runcode/
使用方法:
<runcode>
  运行代码…
</runcode>
想要调整textarea的大小,可以在style.css中增加.runcode_text{ width:500px; height:200px;}

运行效果:

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

Continue reading

Posted in Wordpress1 views | Tagged , | 9 Comments

HTML5 令人期待的五项功能

  HTML 5 是超文本置标语言下一个重要版本,HTML 自1999年发布 HTML 4.01 以来,其开发一直处于停顿状态,而1999年至今正好是 Web 飞速发展的时间,现在的 HTML 版本已经无法适应现在的 Web 内容与应用。HTML 5 旨在提高 HTML 的交互行,支持当前多样的,复杂的 Web 内容。同时,它也会解决 HTML 4 Web 应用功能上的欠缺。

HTML 5 的历史背景
  HTML 5 的讨论开始于2003年,当时,W3C 对由 Web Hypertext Application Technology Working Group (WHATWG) 开发的 HTML 5 草案表示出兴趣,WHATWG 创始于2004年,由苹果,Mozilla 基金会,以及 Opera 公司的 代表组成。此后,W3C HTML Working Group 于2007年成立并着手开发 HTML 5。目前,开发工作仍在进行中,并将于2012年向 W3C 提交初步意见,不过现在已经有不少浏览器部分支持 HTML 5。本文介绍 HTML 5 的5大令人激动的新功能。

1. 一些帮助我们描述内容的新标签
  Web 内容的多样性让 HTML4 力不从心,在描述一个网页时,HTML4 如下 表现:

HTML 5 将如下表现:

  这样,浏览器就知道一个网页的各个部分各代表什么,比如 部分是导航,而 部分是主要内容 。除了更漂亮的 代码与语义标签,这种改变还带来更多好处,比如,搜索引擎可以更准确地知道一个网页的哪部分内容更重要。关于 HTML 5 新标签,IBM有详细的论述。

2. 改进的 Web 表单处理

  HTML 5 推出 Web Forms 2.0,为开发提供许多新选项和新功能,以更简单更有效地处理表单的输入与发布。Web Form 2.0 最令人兴奋的功能是输入验证。目前,我们需要通过 JavaScript 或服务器端的逻辑,实现同样的功能。

比如有下面这样一个表单:

在 HTML4 我们需要这样写代码,然后使用 JavaScript 或服务器端的脚本进行验证:

而 HTML5 中的 required 与 email 属性可以直接实现验证,如下:

3. 为 Web 开发提供 API
  HTML 5 将提供多个 API,如音频和 视频标签可以让开发者不借助第三方工具直接播放 Web 视频和音频:

Opera 在者方面有不少研究并有视频播放 demo 推出。

4. 标签将允许直接在上面用脚本绘图
  人更容易从图片获得信息,如,下面的信息通过表格和圆饼图两种方式显示,效果明显不一样:

  然而以往要实现这种效果,只能使用静态图片,无法对图片进行调整。使用 标签,你可以实时修改参数对图形进行修改,比如,根据用户的投票,实时生成圆饼图。

5. 用户可以编辑网页的部分内容并实现同网页的交互
  HTML 5 将支持用户的交互,contenteditable属性允许你设定网页的哪一部分可以编辑,在基于 Wiki 的 站点,这非常实用。

Posted in HTML & CSS1 views | Tagged | Leave a comment

自适应高度的iframe

在开发项目中会遇见需要使用iframe的情况,,但iframe的自适应能力非常差,特别是用于侧边栏的时候,iframe的高度是固定的,不能随内容的多少而变换,这就会严重影响页面的美观,这里就介绍一种使用javascript方法来解决这个问题.

原理很简单,就是当页面载入的时候算出iframe所引用页面的高度,然后把得出的高度赋给iframe,这样就实现的iframe高度的自适应.下面我们看看代码:

javascript的代码:

<script language=”javascript”>
window.onload = (function () { 
var iObj = document.getElementById(‘demo’);
iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;
});
</script>

Html代码:

<iframe frameborder=”0″ src=”sidebar.html” class=”iframe_style”  id=”demo” name=”demo” scrolling=”no”></iframe>

 弊端:
目前在实际运用中发现这种方法并不完美,存在一下几种弊端

  1. 效率问题,如果iframe引用的是结构复杂的动态页面,会导致页面加载时间很长,影响用户浏览(除IE6的浏览器可以用min-height来缓解这种现象)
  2. iframe高度相对固定,iframe的高度是通过加载页面是即时算出来的,也就是说在不刷新主页面的情况下,如果iframe引用页面内容改变(比如翻页,而且第二页的内容比第一页多),那么就会出现内容显示不完全的情况…
Posted in Javascript1 views | Tagged | 3 Comments
Pages: Prev 1 2 3 ...12 13 14 15 16 17 18 19 20 21 22 Next