本教程将介绍如何通过PS滤镜快速把图片打造成微缩景观效果.
先来看看效果图:
搜索
分类
- HTML & CSS (50)
- Javascript (13)
- jQuery (14)
- Photoshop (4)
- Software (18)
- Talk about interest (11)
- UE (7)
- WebApp (3)
- Wordpress (11)
-
近期文章
文章
标签云
HTML5相关
在线工具
功能
-
纯CSS跨浏览器的多列等高(2)
昨天转了篇多列等高的文章:Equal Height Columns with Cross-Browser CSS and No Hacks(译:纯 CSS 无 Hack 跨浏览器的多列等高),虽然介绍的方法实现起来比较复杂,但Matthew James Taylor的创新思维还是值得学习,借助作者的思路,自己写了个比较简化的例子.
先来看看实例:(兼容IE6-8,FF,OPERA等主流的浏览器)
Continue reading
[翻译]纯 CSS 无 Hack 跨浏览器的多列等高
纯 CSS 打造多列等高并不像想象中那么容易。本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。
多列等高的问题
[翻译]界面提示与感知延迟
- 原文：UI messaging and perceived latency
- 作者：Roma Shah，用户体验研究员
- 翻译：ytzong
对一般的用户而言，速度并不意味着性能。用户对网站速度的感知很大程度上取决于其整体感受，包括他们如何高效的从网站获取所需，以及网站反映出来的易响应性。
当设计 Web 站点或 Web 应用时，谨记用户来你的网站是有目的的。他们能越快（越容易）达到他们的访问目的越好。如果用户在获取内容时遇到了许多困难，他们将会离开你的网站，而去能让他们更快达成目标的其他网站。
节省用户时间，让他们感觉没那么慢有很多工作可以做，本文只涉及提示信息。
提示信息，要考虑三点：
1.网站是否足够简单和直观，首次访问者是否可以很容易上手？
如果不是，花些时间去设计首次运行经验（first-run-experience）提示。比方说，你的网站是一个拥有数项功能的强大的 Web 应用。鉴于为此类型的应用程序设计一套直观的“开箱即用”（out-of-the-box ）体验并不是一项容易的事情，用户可能需要一个入门帮助。
首次运行经验简单的为用户说明产品是什么以及/或如何使用其亮点。从长远上看，花一点点时间让用户提前了解产品的一些关键点会给他们节省大量时间。
提示：不要过头！不要阻止用户获取实际内容，这会令首次运行经验变成额外的一步（a cumbersome multi-step process）。 Continue reading
图片垂直居中
未知大小的图片在已知大小的容器中垂直居中,这是网站设计中经常涉及到的效果,实现的方法很多,这里介绍一种非常简单的方法.
先来看看demo:
提示：你可以先修改部分代码再运行。
一些必要的说明:
1.该方法实现的垂直居中效果必须在严格模式(DTD XHTML 1.0 Strict)下才能生效.
2.对于标准浏览器(FF,Opera,chrome,IE8…)而言.imgbox img{ vertical-align:middle;}就可以实现图片垂直居中.
3.对于IE7,我们可以用line-height:400px;来达到目的.(因为用的行高,所以imgbox里面要有一个字符,空格也可以,01-22更新)
4.剩下的IE6是用*html .imgbox{ font-size:360px; font-family:Arial;}来实现的.其中360=400*90%得来的,400为容器的高度,用90%是因为容易记,其精确值为0.873.至于这个数值怎么来的没有具体研究…
Posted in HTML & CSS1 views
Leave a comment
