Thứ Tư, 23 tháng 3, 2011

webzoo: Glossy & Beveled Buttons – Photoshop Tutorial

webzoo: Glossy & Beveled Buttons – Photoshop Tutorial: "Glossy & Beveled Buttons – Photoshop TutorialTags: Beginner, Photoshop A few friends of mine have asked me how I add the beveled effect..."

Guest Post – 5 Useful Coding Solutions Part 2



Guest Post – 5 Useful Coding Solutions Part 2


Tags: ,
This is my second article/tutorial for Smashing Magazine.
Instead of writing a tutorial for CSS beginners, this time Vitaly Friedman (editor-in-chief of Smashing Magazine) asked various questions regarding intermediate/advanced techniques found throughout the web, and how each of these methods were achieved.
Based on the live examples, I went ahead and broke them down on how I would achieve each of these effects.
This post is the the next installment of posts featuring “Useful Coding Solutions for Designers and Developers”, a series of posts focusing on unique and creative CSS/JavaScript-techniques being implemented by talented professionals in our industry. A key talent that any Web designer must acquire is the ability to observe, understand and build on other people’s designs. This is a great way to develop the skills and techniques necessary to produce effective websites.

Related Posts

Thứ Ba, 22 tháng 3, 2011

JS测试显示器分辨率

 21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS测试显示器分辨率-懒人图库</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write('您的显示器分辨率为:\n' + screen.width + '*' + screen.height + ' pixels');
// End -->
</SCRIPT>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
</body>
</html>

JS测试显示器分辨率

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS测试显示器分辨率-懒人图库</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write('您的显示器分辨率为:\n' + screen.width + '*' + screen.height + ' pixels');
// End -->
</SCRIPT>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
</body>
</html>

网页标题随机显示名言JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页标题随机显示名言JS代码</title>
<SCRIPT type=text/javascript>
//指定条目数
tips = new Array(110);
//条目内容
tips[0] = '生活是不公平的,你要去适应它。';
tips[1] = '送人玫瑰,手流余香。';
tips[2] = '我们有不同的籍贯、不同的年龄、不同的习惯、不同的经历,但有一点我们是相同的,那就是都有一颗:爱心。';
tips[3] = '锦上添花固然好,雪中送炭更可贵。';
tips[4] = '伸出您的友爱之手,让更多的孩子重返校园。';
tips[5] = '如果你陷入困境,那不是你父母的过错,不要将你理应承担的责任转嫁给他人,而要学着从中吸取教训。';
tips[6] = '爱心一片,真情永远。';
tips[7] = '聆听心声,实现愿望。';
tips[8] = '走出学校后的生活不像在学校一样有学期之分,也没有暑假之说。没有几位老板乐于帮你发现自我,你必须依靠自己去完成。';
tips[9] = '电视中的许多场景决不是真实的生活。在现实生活中,人们必须埋头做自己的工作,而非像电视里演的那样天天泡在咖啡馆里。';
tips[10] = '善待你所厌恶的人,因为说不定哪一天你就会为这样的一个人工作。';
tips[11] = '人生应该如蜡烛一样,从顶燃到底,一直都是光明的。 —— 萧楚女';
tips[12] = '人生的价值,即以其人对于当代所做的工作为尺度。 —— 徐玮';
tips[13] = '路是脚踏出来的,历史是人写出来的。人的每一步行动都在书写自己的历史。 —— 吉鸿昌';
tips[14] = '春蚕到死丝方尽,人至期颐亦不休。一息尚存须努力,留作青年好范畴。 —— 吴玉章';
tips[15] = '但愿每次回忆,对生活都不感到负疚 —— 郭小川';
tips[16] = '人的一生可能燃烧也可能腐朽,我不能腐朽,我愿意燃烧起来! —— 奥斯特洛夫斯基';
tips[17] = '你若要喜爱你自己的价值,你就得给世界创造价值。 —— 歌德';
tips[18] = '社会犹如一条船,每个人都要有掌舵的准备。 —— 易卜生';
tips[19] = '人生不是一种享乐,而是一桩十分沉重的工作。 —— 列夫·托尔斯泰';
tips[20] = '人生的价值,并不是用时间,而是用深度去衡量的。 —— 列夫·托尔斯泰';
tips[21] = '生活只有在平淡无味的人看来才是空虚而平淡无味的。 —— 车尔尼雪夫斯基';
tips[22] = '一个人的价值,应该看他贡献什么,而不应当看他取得什么。 —— 爱因斯坦';
tips[23] = '人只有献身于社会,才能找出那短暂而有风险的生命的意义。 —— 爱因斯坦';
tips[24] = '芸芸众生,孰不爱生?爱生之极,进而爱群。 —— 秋瑾';
tips[25] = '生活真象这杯浓酒,不经三番五次的提炼呵,就不会这样可口! —— 郭小川';
tips[26] = '充满着欢乐与斗争精神的人们,永远带着欢乐,欢迎雷霆与阳光。 —— 赫胥黎';
tips[27] = '春风吹柳,雨润大地。';
tips[28] = '为了生活中努力发挥自己的作用,热爱人生吧。 —— 罗丹';
tips[29] = '希望是附丽于存在的,有存在,便有希望,有希望,便是光明。 —— 鲁迅';
tips[30] = '沉沉的黑夜都是白天的前奏。 —— 郭小川';
tips[31] = '当一个人用工作去迎接光明,光明很快就会来照耀着他。 —— 冯学峰';
tips[32] = '东天已经到来,春天还会远吗? —— 雪莱';
tips[33] = '过去属于死神,未来属于你自己。 —— 雪莱';
tips[34] = '世间的活动,缺点虽多,但仍是美好的。 —— 罗丹';
tips[35] = '辛勤的蜜蜂永没有时间悲哀。 —— 布莱克';
tips[36] = '希望是厄运的忠实的姐妹。 —— 普希金';
tips[37] = '当你的希望一个个落空,你也要坚定,要沉着! —— 朗费罗';
tips[38] = '先相信你自己,然后别人才会相信你。 —— 屠格涅夫';
tips[39] = '不要慨叹生活底痛苦!---慨叹是弱者...... —— 高尔基';
tips[40] = '宿命论是那些缺乏意志力的弱者的借口。 —— 罗曼·罗兰';
tips[41] = '春回人间,真情奉献。';
tips[42] = '私心胜者,可以灭公。 —— 林逋';
tips[43] = '人人好公,则天下太平;人人营私,则天下大乱。 —— 刘鹗';
tips[44] = '自私自利之心,是立人达人之障。 —— 吕坤';
tips[45] = '如烟往事俱忘却,心底无私天地宽。 —— 陶铸';
tips[46] = '常求有利别人,不求有利自己。 —— 谢觉哉';
tips[47] = '一切利己的生活,都是非理性的,动物的生活。 —— 列夫·托尔斯泰';
tips[48] = '人的理性粉碎了迷信,而人的感情也将摧毁利己主义。 —— 海涅';
tips[49] = '无私是稀有的道德,因为从它身上是无利可图的。 —— 布莱希特';
tips[50] = '君子喻于义,小人喻于利。 —— 孔丘';
tips[51] = '不戚戚于贫贱,不汲汲于富贵。 —— 陶渊明';
tips[52] = '富贵不淫贫贱乐,男儿到此是豪雄。 —— 程颢';
tips[53] = '清贫,洁白朴素的生活,正是我们革命者能够战胜许多困难的地方! —— 方志敏';
tips[54] = '三军可夺帅也,匹夫不可夺志也。 —— 孔丘';
tips[55] = '志不强者智不达。 —— 墨翟';
tips[56] = '燕雀安知鸿鹄之志哉! —— 陈涉';
tips[57] = '志当存高远。 —— 诸葛亮';
tips[58] = '老骥伏枥,志在千里;烈士暮年,壮心不已。 —— 曹操';
tips[59] = '燕雀戏藩柴,安识鸿鹄游。 —— 曹植';
tips[60] = '穷且益坚,不坠青云之志。 —— 王勃';
tips[61] = '大鹏一日同风起,扶摇直上九万里。 —— 李白';
tips[62] = '古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。 —— 苏轼';
tips[63] = '生当作人杰,死亦为鬼雄,至今思项羽,不肯过江东。 —— 李清照';
tips[64] = '壮心未与年俱老,死去犹能作鬼雄。 —— 陆游';
tips[65] = '故立志者,为学之心也;为学者,立志之事也。 —— 王阳明';
tips[66] = '贫不足羞,可羞是贫而无志。 —— 吕坤';
tips[67] = '我们以人们的目的来判断人的活动。目的伟大,活动才可以说是伟大的。 —— 契诃夫';
tips[68] = '毫无理想而又优柔寡断是一种可悲的心理。 —— 培根';
tips[69] = '生活的理想,就是为了理想的生活。 —— 张闻天';
tips[70] = '人,只要有一种信念,有所追求,什么艰苦都能忍受,什么环境也都能适应。 —— 丁玲';
tips[71] = '理想的人物不仅要在物质需要的满足上,还要在精神旨趣的满足上得到表现。 —— 黑格尔';
tips[72] = '一个能思想的人,才真是一个力量无边的人。 —— 巴尔扎克';
tips[73] = '一个没有受到献身的热情所鼓舞的人,永远不会做出什么伟大的事情来。 —— 车尔尼雪夫斯基';
tips[74] = '共同的事业,共同的斗争,可以使人们产生忍受一切的力量。 —— 奥斯特洛夫斯基';
tips[75] = '我从来不把安逸和快乐看作是生活目的本身---这种伦理基础,我叫它猪栏的理想。 —— 爱因斯坦';
tips[76] = '在一个人民的国家中还要有一种推动的枢纽,这就是美德。 —— 孟德斯鸠';
tips[77] = '人不能象走兽那样活着,应该追求知识和美德。 —— 但丁';
tips[78] = '勿以恶小而为之,勿以善小而不为。惟贤惟德,能服于人。 —— 刘备';
tips[79] = '不患位之不尊,而患德之不崇;不耻禄之不伙,而耻智之不博。 —— 张衡';
tips[80] = '土扶可城墙,积德为厚地。 —— 李白';
tips[81] = '行一件好事,心中泰然;行一件歹事,衾影抱愧。 —— 神涵光';
tips[82] = '入于污泥而不染、不受资产阶级糖衣炮弹的侵蚀,是最难能可贵的革命品质。—— 周恩来';
tips[83] = '一个人最伤心的事情无过于良心的死灭。 —— 郭沫若';
tips[84] = '害羞是畏惧或害怕羞辱的情绪,这种情绪可以阻止人不去犯某些卑鄙的行为。 —— 斯宾诺莎';
tips[85] = '应该热心地致力于照道德行事,而不要空谈道德。 —— 德谟克利特';
tips[86] = '感情有着极大的鼓舞力量,因此,它是一切道德行为的重要前提。 —— 凯洛夫';
tips[87] = '没有伟大的品格,就没有伟大的人,甚至也没有伟大的艺术家,伟大的行动者。 —— 罗曼·罗兰';
tips[88] = '理智要比心灵为高,思想要比感情可靠。 —— 高尔基';
tips[89] = '顶级培训网 让我们携手一起成长 ';
tips[90] = '人类被赋予了一种工作,那就是精神的成长。 —— 列夫·托尔斯泰';
tips[91] = '人在智慧上应当是明豁的,道德上应该是清白的,身体上应该是清洁的。 —— 契诃夫';
tips[92] = '良心是由人的知识和全部生活方式来决定的。 —— 马克思';
tips[93] = '不念居安思危,戒奢以俭;斯以伐根而求木茂,塞源而欲流长也。 —— 魏徵';
tips[94] = '历览前贤国与家,成由勤俭破由奢。 —— 李商隐';
tips[95] = '把“德性”教给你们的孩子:使人幸福的是德性而非金钱。这是我的经验之谈。在患难中支持我的是道德,使我不曾自杀的,除了艺术以外也是道德。 —— 贝多芬';
tips[96] = '如果道德败坏了,趣味也必然会堕落。——狄德罗';
tips[97] = '我愿证明,凡是行为善良与高尚的人,定能因之而担当患难。 —— 贝多芬';
tips[98] = '装饰对于德行也同样是格格不入的,因为德行是灵魂的力量和生气。 —— 卢梭';
tips[99] = '我深信只有有道德的公民才能向自己的祖国致以可被接受的敬礼。 —— 卢梭';
tips[100] = '懒人图库-网页素材下载站 - 学会偷懒,并懒出境界是提高工作效率最有效的方法!';
tips[101] = '对于事实问题的健全的判断是一切德行的真正基础。 —— 夸美纽斯';
tips[102] = '德行的实现是由行为,不是由文字。 —— 夸美纽斯';
tips[103] = '霸祖孤身取二江,子孙多以百城降。豪华尽出成功后,逸乐安知与祸双? —— 王安石';
tips[104] = '阴谋陷害别人的人,自己会首先遭到不幸。 —— 伊索';
tips[105] = '奢则妄取苟取,志气卑辱;一从俭约,则于人无求,于己无愧,是可以养气也。  —— 罗大经';
tips[106] = '侈则多欲。君子多欲则念慕富贵,枉道速祸。 —— 司马光';
tips[107] = '顶级培训网 让我们携手一起成长 ';
tips[108] = '知耻近乎勇。 —— 孔丘';
tips[109] = '辱,莫大于不知耻。 —— 王通';
tips[110] = '君子忧道不忧贫。 —— 孔丘';

index = Math.floor(Math.random() * tips.length);
window.document.title += " - "+tips[index];
</SCRIPT>
</head>

<body>
<p>请刷新查看网页的标题↑</p>
<br />
<p>代码整理:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
<p>*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
</body>
</html>

泪流满面的404页面

 Harry Potter and the Deathly Hallows, Part 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>您找的页面不存在</title>

<style type="text/css">
<!--
BODY {    PADDING-RIGHT: 0px; PADDING-LEFT: 35px; BACKGROUND: url(/images/photoback.gif) repeat-x left top; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 12px Arial, Helvetica, sans-serif; COLOR: #333; PADDING-TOP: 35px}
A {    COLOR: #007ab7; TEXT-DECORATION: none}
A:hover {COLOR: #007ab7; TEXT-DECORATION: none}
A:hover {COLOR: #de1d6a}
.hidehr {DISPLAY: none}
.show12 {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; PADDING-TOP: 0px}
.show13 {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; PADDING-TOP: 0px}
.show12 A {    BORDER-RIGHT: #bfdeed 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #bfdeed 1px solid; DISPLAY: inline-block; PADDING-LEFT: 6px; BACKGROUND: #d8ebf4; PADDING-BOTTOM: 2px; OVERFLOW: hidden; BORDER-LEFT: #bfdeed 1px solid; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BORDER-BOTTOM: #bfdeed 1px solid; HEIGHT: 16px}
.show13 A {    BORDER-RIGHT: #bfdeed 1px solid; PADDING-RIGHT: 6px; BORDER-TOP: #bfdeed 1px solid; DISPLAY: inline-block; PADDING-LEFT: 6px; BACKGROUND: #d8ebf4; PADDING-BOTTOM: 2px; OVERFLOW: hidden; BORDER-LEFT: #bfdeed 1px solid; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BORDER-BOTTOM: #bfdeed 1px solid; HEIGHT: 16px}
.show12 A:hover {    BORDER-RIGHT: #ea5e96 1px solid; BORDER-TOP: #ea5e96 1px solid; BACKGROUND: #fce8f0; BORDER-LEFT: #ea5e96 1px solid; COLOR: #de1d6a; BORDER-BOTTOM: #ea5e96 1px solid; TEXT-DECORATION: none}
.show13 A:hover {    BORDER-RIGHT: #ea5e96 1px solid; BORDER-TOP: #ea5e96 1px solid; BACKGROUND: #fce8f0; BORDER-LEFT: #ea5e96 1px solid; COLOR: #de1d6a; BORDER-BOTTOM: #ea5e96 1px solid; TEXT-DECORATION: none}
.show12 A {    FONT-WEIGHT: normal; FONT-SIZE: 12px}
.show13 A {    BORDER-RIGHT: #ed268c 1px solid; BORDER-TOP: #ed268c 1px solid; BACKGROUND: #dd137b; BORDER-LEFT: #ed268c 1px solid; COLOR: #fff; BORDER-BOTTOM: #ed268c 1px solid}
.img404 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://www.lanrentuku.com/down/js/images/12630051960.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 80px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 90px}
H2 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 16px; FLOAT: left; PADDING-BOTTOM: 25px; MARGIN: 0px; WIDTH: 80%; LINE-HEIGHT: 0; PADDING-TOP: 25px; BORDER-BOTTOM: #ccc 1px solid; POSITION: relative}
H3.wearesorry {    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 10px; LEFT: 117px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #ccc; LINE-HEIGHT: 10px; PADDING-TOP: 0px; POSITION: absolute; TOP: 70px}
.content {    CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; LEFT: 80px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 80%; LINE-HEIGHT: 19px; PADDING-TOP: 0px; POSITION: relative; TOP: -30px}
.content UL {PADDING-RIGHT: 35px; PADDING-LEFT: 35px; PADDING-BOTTOM: 20px; MARGIN: 0px; PADDING-TOP: 10px}
.show12 UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 20px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
.show14 UL LI {    MARGIN-BOTTOM: 5px}

-->
</style>
</head>

<body>

<H1 class=hidehr>当前在懒人图库上(www.lanrentuku.com)找不到你要的页面。</H1>
<DIV class=img404> </DIV>
<H2>抱歉,找不到您要的页面……</H2>
<H3 class=wearesorry>We're sorry but the page your are looking for is Not
Found...</H3>
<DIV class=content>仔细找过啦,没有发现你要找的页面。最可能的原因是:
  <UL>
  <LI>在地址中可能存在键入错误。
  <LI>当你点击某个链接时,它可能已过期。
</LI></UL>
<STRONG>点击以下链接继续浏览懒人图库上的其它内容</STRONG>(<a href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a>):
<DIV class=show14>
<UL>
  <LI><A title=返回懒人图库首页 href="http://www.lanrentuku.com/">返回懒人图库首页</A>
  <LI><A title=返回上一个页面 href="javascript:history.back(-1)">返回上一页</A></LI>
</UL></DIV>
要不,我们去<A href="http://bbs.lanrentuku.com/" target=_blank>懒人论坛</A>看看吧~~ </DIV>
<SPAN
style="VISIBILITY: hidden"></SPAN>

</body>
</html>

如何去掉超链接的下划线?

<style>
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:active {text-decoration: none;}
a:hover {text-decoration: none;}
</style>
<a href="#">如何去掉超链接的下划线</a>

从右往左读的文字正写竖排效果

<style>
.text {
layout-flow: vertical-ideographic;
height:400px;
line-height:200%; }
</style>
<div class="text">
<strong>香子子(短令)林雨堂</strong><br>
伯牙抱琴  偶过寒门  行到处  全不经心<br>
凭几闲坐  谈古论今<br>
任<br>
倦则眠  乐则饮 醉则吟<br>
矮矮垣墙 小小轩窗 翠荫处   青草池塘<br>
柳烟初碧 曲岸新妆<br>
枕<br>
一树风 一弯月 一簟凉<br>
玉阶金堂 画栋雕梁  怎么那   绿茵芬芳<br>
茅檐低小 竹里深藏<br>
对<br>
春日丽  秋雨急  北风狂<br>
如梦浮生  闲愁怎平  依画槛俯数游鳞<br>
眉头才展  白驹已暝<br>
且<br>
焚兰麝  谈禅语  读<黄庭><br>
窗含西岭  门倚云松  食草具  乐比王公<br>
曲经常有  棋侣诗朋<br>
饮<br>
泉一瓢  茶一盏  酒一盅<br>
轻扫庭台  慢拂苍苔  莫惊散  落红满阶<br>
浓茵似醇  远岚如黛<br>
更<br>
松叶碧  竹枝翠  杏花白<br>
如霞桃花  似雪梨杏  次第开  切莫匆匆<br>
日月如梭  人生如梦<br>
君<br>
需明达  且知足  暂轻松<br>
<a href="http://www.lanrentuku.com/" target="_blank">http://www.lanrentuku.com/</a><br>
</div>

div的内容图片垂直居中代码(兼容多浏览器)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>无标题文档</title>
<style type="text/css">
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>

<body>
<div class="psdthumb">
<li><div class="qq"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
<li><div class="qq"><img src="http://img1.cache.netease.com/cnews/netease/logo_w.gif" ></div></li>
</div>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>

强制Firefox显示滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>强制Firefox显示滚动-懒人图库</title>
<style type="text/css">
<!--
html {overflow:-moz-scrollbars-vertical;} /*方法一*/
html {min-height:101%;} /*方法二*/
-->
</style>
</head>

<body>
<p>强制Firefox显示滚动条:</p>
<p>方法一:html {overflow:-moz-scrollbars-vertical;}</p>
<p>方法二:html {min-height:101%;}</p>
<p>为什么要强制显示滚动条?因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的,当加载完成后滚动条才显示出来,所以会感觉页面偏移了下。</p>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>

</html>

纯css的防止图片撑破页面的代码(图片自动缩放)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
</head>
<body>

<div class="content-width">
  <p><img src="/down/js/images/12567247980.jpg"/></p>
  <p><img src="/down/js/images/12567247981.jpg"/></p>
</div>

<p>代码编写:懒人西西(转载请保留版权信息)</p>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>

</body>
</html>

网站变灰代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网站灰色代码-深切哀悼青海玉树地震遇难同胞</title>
<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>
</head>

<body>
<p>北京时间2010年4月14日7时49分许,青海省玉树藏族自治州玉树县(北纬33.2度,东经96.6度)发生7.1级地震,震源深度14公里,震中位于该县城附近…</p>
<p><img src="http://www.lanrentuku.com/down/js/images/12717635710.jpg" width="699" height="527" /> </p>
</body>
</html>

DIV实现input垂直居中 兼容IE6和Firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="div垂直居中,div文字垂直居中,div中input垂直居中,JS特效代码" />
<meta name="description" content="DIV实现input垂直居中,兼容IE6、IE7、IE8、Firefox、Safari。更多代码请访问懒人图库JS代码频道。" />
<style type="text/css">     
body{font-size:12px;}  
.lanrentuku1{
border: 1px solid #CCC;
width:1120px;
height:40px;
margin:auto;
display: table;  
*position: relative;  
overflow: hidden; 
}  
              
.lanrentuku2 {
vertical-align: middle;
display: table-cell;
*position: absolute;
*top: 50%;
}
        
.lanrentuku3 {
*position: relative;
*top: -50%;
float:right;
padding-right:10px;
}  
</style> 
<title>DIV实现input垂直居中 兼容IE6、IE7、IE8、Firefox、Safari_懒人图库</title>
</head>

<body><br /><br /><br />

<div class="lanrentuku1"> 
    <div class="lanrentuku2"> 
        <form action="search.php" name="formsearch">
            <div class="lanrentuku3">
            <input name="textfield" type="text" size="30">
            </div>
        </form>
    </div> 
</div> 

<p align="center">DIV实现input垂直居中,兼容IE6、IE7、IE8、Firefox、Safari。</p>
<p align="center">来源:<a href="http://www.nifengla.com/" target="_blank">你疯啦</a> 代码整理:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
<p align="center">*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
</body>
</html>

兼容ie6,ie7以及firefox的css透明滤镜

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容ie6,ie7以及firefox的css透明滤-懒人图库</title>
<style type="text/css">
    #container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); *background:#f00; *filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
    #container *{ position:relative;}

</style>
</head>

<body>

    <div id="container">
        <span>我是内容我是内容我是内容我是内容</span>
    </div>
    <p>兼容ie6,ie7以及firefox的css透明滤镜,文字不继承其透明属性。</p>
    <p>来源:<a href="http://www.designcss.org/" target="_blank">设计CSS</a></p>
    <p>查找更多代码,请访问:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
</body>
</html>

兼容IE6和Firefox的PNG背景透明CSS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容IE6和Firefox的PNG背景透明CSS代码-懒人图库</title>
<style type="text/css">
<!--
.lanrentuku {
background-image:url(http://www.lanrentuku.com/down/js/images/12593184560.png)!important;background-image:url(www.lanrentuku.com);
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.lanrentuku.com/down/js/images/12593184560.png');
WIDTH: 225px;height:38px;}
-->
</style>
</head>

<body>
<div class="lanrentuku"></div>

<p><strong>兼容IE6和Firefox的PNG背景透明CSS代码</strong></p>
<p>PNG的背景透明在网页中应用比较广泛,但浏览器的兼容问题一直很让人头疼,这个<a href="http://www.lanrentuku.com/js/jiaodiantu-710.html" target="_blank">JS焦点图代码</a>,是用JS判断的方法,西西用CSS变通的也实现了PNG背景透明的兼容问题。</p>
<p>说明:</p>
<p>1、当CSS中出现两个同样的属性,无论是否有!important,IE6只识别最后一个属性。(IE6是识别!important的,后面的background-image起干扰作用,呵呵~)</p>
<p>2、在Firefox下,!important被优先执行,FILTER滤镜不起作用。</p>
<p>作者:<a href="http://www.lanrentuku.com" target="_blank">西西</a>(尊重他人劳动成果,转载请自觉注明出处!)</p>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>

Have Fun w/ Borders – Beveled, Pressed, & More!

Have Fun w/ Borders – Beveled, Pressed, & More!

Tags: ,
Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project.

Light Shadow

CSS Borders Light Shadow
A simple light shadow effect can be achieved with using shades of grey with borders. With CSS3 you can achieve a real shadow effect using box shadow, but this is a clean and simple way that works in all browsers.
CSS
.shadow {
 padding: 20px;
 border: 1px solid #f0f0f0;
 border-bottom: 2px solid #ccc;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

Pressed


CSS Borders  - Pressed

The pressed effect is very similar to the CSS Letter Press technique but we rely solely on border colors to achieve the effect. Add some CSS3 rounded corners and you can achieve a very clean pressed look to your layouts.
CSS
.pressed {
 color: #fff;
 padding: 20px;
 background: #111;
 border: 1px solid #000;
 border-right: 1px solid #353535;
 border-bottom: 1px solid #353535;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

Beveled


CSS Borders - Beveled Images

This technique is very similar to your double border technique commonly used with images. With a little bit of tinkering, you can achieve a subtle beveled effect using the outline property.
CSS
img.light {
 outline: 1px solid #ddd;
 border-top: 1px solid #fff;
 padding: 10px;
 background: #f0f0f0;
}
img.dark {
 outline: 1px solid #111;
 border-top: 1px solid #555;
 padding: 10px;
 background: #333;
}

Indented Lines


CSS Borders - Indented Lines

I use this technique often when creating vertical menus and lists. Its a simple combination of top and bottom borders with different shades of the background color. Keep in mind the first-child and last-child CSS selectors are not supported by older browsers. You can read more about this here. To get around it, you can use some jQuery to support older browsers.
CSS
#indented ul{
 margin: 20px 0; padding: 0;
 list-style: none;
}
#indented ul li {
 border-top: 1px solid #333;
 border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
 padding: 10px;
 display: block;
 color: #fff;
 text-decoration: none;
}
#indented ul li a:hover {background: #111;}

Related Articles

Related Posts

Popout Details on Hover w/ CSS

Popout Details on Hover w/ CSS

Tags:
I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.
Popout Details on Hover w/ CSS

HTML

The columns are made up of unordered list items, within each list item is the thumbnail image and the details of the item wrapped in a class of "info".
<ul class="columns">
    <li>
     <a href="#"><img src="thumbnail.jpg" alt="" /></a>
        <div class="info">
            <h2>Title</h2>
            <p>Short Description</p>
        </div>
    </li>
</ul>
Popout Details on Hover w/ CSS

CSS

Start by styling the list items. Notice we add position: relative; to the list item, and on hover we raise the z-index to 99 so it lifts over the other elements.
/*--Column Styles--*/
ul.columns {
 width: 960px;
 list-style: none;
 margin: 0 auto; padding: 0;
}
ul.columns li {
 width: 220px;
 float: left; display: inline;
 margin: 10px; padding: 0;
 position: relative;
}
ul.columns li:hover {z-index: 99;}
We add a position: relative; to the image as well, so we can control the z-index value on hover. What we want to do here is to lower the opacity of the image by default to 30% then on hover, turn up the opacity to 100% and lift the image by increasing the z-index value to 999. This will allow the thumbnail to sit on top of the .info elements.
/*--Thumbnail Styles--*/
ul.columns li img {
 position: relative;
 filter: alpha(opacity=30);
 opacity: 0.3;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
}
ul.columns li:hover img{
 z-index: 999;
 filter: alpha(opacity=100);
 opacity: 1;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
Use absolute positioning to shift the .info class -10px to the left and -10px to the top. Since .info is using an absolute positioning, we must have enough top padding so the content within does not overlap the thumbnail. To do this, the top padding is measured by adding 10px to the height of the thumbnail (200px in my demo). Some CSS3 was added for the rounded corners. We will hide .info by default, and show it on hover.
Popout Details on Hover w/ CSS
/*--Details Style--*/
ul.columns li .info {
 position: absolute;
 left: -10px; top: -10px;
 padding: 210px 10px 20px;
 width: 220px;
 display: none;
 background: #fff;
 font-size: 1.2em;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
 font-size: 1.2em;
 font-weight: normal;
 text-transform: uppercase;
 margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

Final Thoughts

Go ahead and experiment with this technique! If you have any questions or concerns please don’t hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover issue.
Popout Details on Hover w/ CSS

Related Posts

Advanced Columns using the :nth-child(N)

Advanced Columns using the :nth-child(N)

Tags:
I recently developed a site for a client who requested their product listings be displayed similar to how Johnny Cupcakes (Street wear brand from Boston/Los Angeles) lays out their products (columns laid out in a zig zag pattern). My first instinct was to split each section into its own list, but since this site was running on a CMS, all products had to be spit out in one giant list. Given this scenario I decided to use pseudo-selectors :nth-child(N) and a bit of jQuery to help with IE support. I thought this was a great example of when to use :nth-child(N), so I would like to go over this technique today.

Advanced Columns w/ CSS

HTML

As stated above, this layout required that each product column be spit out in one big list. To achieve this zigzag effect, the first list item of every 26 items must be floated to the right.
Advanced Columns w/ CSS - Zigzag Columns
<ul class="prodlist">
    <!--List #1 Large/Float Right-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #2~13 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #14 Large/Float Left-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #15~26 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #27 Large/Float Right-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #28~39 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
</ul>

CSS

Style the columns using a list and take note of the last line of CSS using :nth-child(N). To read further on how the :nth-child(N) works, take a look at Chris Coyier’s article.
:nth-child() CSS Tutorial
ul.prodlist {
 margin: 0; padding: 0;
 list-style: none;
}
ul.prodlist li {
 margin: 10px; padding: 0;
 float: left;
}
ul.prodlist li img {float: left;}
ul.prodlist li:nth-child(26n+1) {float: right;}

Browser Support?

Almost all modern browsers support :nth-child(N) except our red headed step child Internet Explorer. To cater for IE, we can write a quick line of jQuery.

jQuery – IE Support

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.
Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. All we do now is add a float: right; to the :nth-child(26n+1).
$(document).ready(function() {
 $('ul.prodlist li:nth-child(26n 1)').css({'float' : 'right'});
});

Advanced Columns w/ CSS

Conclusion

I decided to call this post advanced columns since it was out of the norm for me to style columns this way, but as you can see the technique of achieving this effect was quite simple. I also thought this was a good example of how to use the :nth-child(N) in a real life example, I hope you can take something from this tutorial and learn to use pseudo-selectors for your future projects. Props to the design/dev team at Johnny Cupcakes for coming up with a complex and unique layout.

Related Articles

Related Posts

Sticky SideNav Layout with CSS

Sticky SideNav Layout with CSS

Tags: ,
I recently wrote an article for DesignM.ag on how to create a fixed navigation layout with CSS. You can check out the article here!
Today I would like to go over how to create a fixed sidenav layout for your blog or website.
Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site…Read More
Fixed Navigation with CSS

Related Posts

Guest Post – Creating an Image Rotator

Guest Post – Creating an Image Rotator

Tags: , ,
This is my second article over at designm.ag. An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch…

Related Posts

Simple Page Peel Effect with jQuery & CSS

Simple Page Peel Effect with jQuery & CSS

Tags: ,
You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.
Page Peel Effect with jQuery and CSS

1. HTML – Page Peel Wireframe

The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg_block” wrapped in an <a> tag. Note – If you don’t have any conflicting absolute/relative positioning properties, you technically don’t need the “pageflip” container at all.
<div id="pageflip">
 <a href="#">
  <img src="page_flip.png" alt="" />
  <span class="msg_block">Subscribe via RSS</span>
 </a>
</div>

2. CSS – Page Peel Styles

Set the image property to a smaller size (50px by 50px) by default and set the absolute positioning to be in the top right corner. The image will be used similar to the “masking” technique in Photoshop or Flash, where it will be placed on top of the hidden message, so only a portion of the message will be shown. Check out the image below for a visual:
Page Peel Effect with jQuery and CSS
The actual message behind the “peeling” effect, is all within the “msg_block” class. By default, it will start at 50px by 50px, positioned on the top right corner of the page. The text-indent will shoot the text off of the page for anyone with CSS enabled.
#pageflip {
 position: relative;
}
#pageflip img {
 width: 50px; height: 52px;
 z-index: 99;
 position: absolute;
 right: 0; top: 0;
 -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
 width: 50px; height: 50px;
 position: absolute;
 z-index: 50;
 right: 0; top: 0;
 background: url(subscribe.png) no-repeat right top;
 text-indent: -9999px;
}
Note that the “msg_block” height is off by 2px compared to the image property – this is taking in consideration of the drop shadow that the image has.

3. jQuery – Animating Page Peel

All we are doing here is expanding the image and msg_block on hover, then retracting to its default size on hover out.
$("#pageflip").hover(function() { //On hover...
 $("#pageflip img , .msg_block").stop()
  .animate({ //Animate and expand the image and the msg_block (Width + height)
   width: '307px',
   height: '319px'
  }, 500);
 } , function() {
 $("#pageflip img").stop() //On hover out, go back to original size 50x52
  .animate({
   width: '50px',
   height: '52px'
  }, 220);
 $(".msg_block").stop() //On hover out, go back to original size 50x50
  .animate({
   width: '50px',
   height: '50px'
  }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

Conclusion

The concept is very simple and may come in handy one day. If you have any questions or know of other techniques, please don’t hesitate to let me know~
Page Peel Effect with jQuery and CSS

Related Posts

Facebook Style Footer Admin Panel Part 1

Facebook Style Footer Admin Panel Part 1

Tags: ,
The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.
This week I would like to cover part 1 of how to recreate the Facebook footer admin panel with CSS and jQuery.
Final Demo

Step 1. Wireframe and Tooltip Bubbles – HTML & CSS

Lay out the wireframe of the admin panel using an unordered list for the foundation. The last two list items (Alert Panel & Chat Panel) will have sub-panels nested within them. Since these two panels will float to the right, the order in the markup will be reversed.
Tooltip foundation
Notice that there is a <small> tag nested within the <a> tag, this is how we will achieve our tooltip bubble on the navigation.

HTML

<div id="footpanel">
    <ul id="mainpanel">
        <li><a href="#" class="home">Inspiration <small>Design Bombs</small></a></li>
        <li><a href="#" class="profile">View Profile <small>View Profile</small></a></li>
        <li><a href="#" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>
        <li><a href="#" class="contacts">Contacts <small>Contacts</small></a></li>
        <li><a href="#" class="messages">Messages (10) <small>Messages</small></a></li>
        <li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
        <li><a href="#" class="videos">Videos <small>Videos</small></a></li>
        <li id="alertpanel"><a href="#" class="alerts">Alerts</a></li>
        <li id="chatpanel"><a href="#" class="chat">Friends (<strong>18</strong>)</a></li>
    </ul>
</div>

CSS

First start by fixing the panel to the bottom of the viewport.
#footpanel {
 position: fixed;
 bottom: 0; left: 0;
 z-index: 9999; /*--Keeps the panel on top of all other elements--*/
 background: #e3e2e2;
 border: 1px solid #c3c3c3;
 border-bottom: none;
 width: 94%;
 margin: 0 3%;
}
As you may already know, IE6 does not understand fixed positioning. I stumbled across a tutorial that fixed this problem*.
*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
 margin-top: -1px; /*--Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
 position: absolute;
 top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
*Note: Due to heavy loading on the browser, an alternative solution would be to either use an position: absolute; or if the situation/client allows it use display: none; for those with IE6.
Style the unordered list which will be the foundation of this panel.
#footpanel ul {
 padding: 0; margin: 0;
 float: left;
 width: 100%;
 list-style: none;
 border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
 font-size: 1.1em;
}
#footpanel ul li{
 padding: 0; margin: 0;
 float: left;
 position: relative;
}
#footpanel ul li a{
 padding: 5px;
 float: left;
 text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
 height: 16px; width: 16px;
 text-decoration: none;
 color: #333;
 position: relative;
}
html #footpanel ul li a:hover{ background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
 background-color: #fff;
 height: 17px;
 margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
 border: 1px solid #555;
 border-top: none;
 z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
 position: relative;
}
Tooltip Demo
Declare the text replacement for each link.
You can download these great icons by Pinvoke here.
#footpanel a.home{
 background: url(home.png) no-repeat 15px center;
 width: 50px;
 padding-left: 40px;
 border-right: 1px solid #bbb;
 text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
a.profile{ background: url(user.png) no-repeat center center;  }
a.editprofile{ background: url(wrench_screwdriver.png) no-repeat center center; }
a.contacts{ background: url(address_book.png) no-repeat center center; }
a.messages{ background: url(mail.png) no-repeat center center; }
a.playlist{ background: url(document_music_playlist.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
 background: url(balloon.png) no-repeat 15px center;
 width: 126px;
 border-left: 1px solid #bbb;
 border-right: 1px solid #bbb;
 padding-left: 40px;
 text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel { float: right; }  /*--Right align the chat and alert panels--*/
Tooltip Demo
Style the tooltip bubble, by default the <small> tag will be hidden with a display:none;. On hover over, allow the tooltip to appear with a display:block;
#footpanel a small {
 text-align: center;
 width: 70px;
 background: url(pop_arrow.gif) no-repeat center bottom;
 padding: 5px 5px 11px;
 display: none; /*--Hide by default--*/
 color: #fff;
 font-size: 1em;
 text-indent: 0;
}
#footpanel a:hover small{
 display: block; /*--Show on hover--*/
 position: absolute;
 top: -35px; /*--Position tooltip 35px above the list item--*/
 left: 50%;
 margin-left: -40px; /*--Center the tooltip--*/
 z-index: 9999;
}

What’s Next?

Part 2 of this tutorial will go over how to style the sub-panels and how to activate them using jQuery. If anyone had any questions or comments regarding the tooltip technique, please let me know!

Related Posts

Facebook Style Footer Admin Panel Part 2

Facebook Style Footer Admin Panel Part 2

Tags: ,
This is Part 2 of the Facebook Style Footer Admin Panel, if you haven’t checked out Part 1 this is the perfect time to check it out.

Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS

Just like developing a drop-down menu, have a nested sub-panel within the list item. Look at the image below to get an overview of how this is layed out.
Collapsible Subpanel Demo
HTML
<li id="alertpanel">
    <a href="#" class="alerts">Alerts</a>
    <div class="subpanel">
        <h3><span> &ndash; </span>Notifications</h3>
        <ul>
            <li class="view"><a href="#">View All</a></li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
        </ul>
    </div>
</li>
<li id="chatpanel">
    <a href="#" class="chat">Friends (<strong>18</strong>) </a>
    <div class="subpanel">
        <h3><span> &ndash; </span>Friends Online</h3>
        <ul>
            <li><span>Family Members</span></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
        </ul>
    </div>
</li>
CSS
Since we declared a list item link style already (with the text replament technique), override the properties so we can use regular links in the sub-panels.
#footpanel ul li div a { /*--Reset link style for sub-panel links--*/
 text-indent: 0;
 width: auto;
 height: auto;
 padding: 0;
 float: none;
 color: #00629a;
 position: static;
}
#footpanel ul li div a:hover { text-decoration: underline; } /*--Reset hover style for sub-panel links--*/
Style the sub-panel container with an absolute positioning that will sit at the top of the main footer panel (27px from the bottom of the footer panel). Then create the headings using an <h3>.
#footpanel .subpanel {
 position: absolute;
 left: 0; bottom: 27px;
 display: none; /*--Hide by default--*/
 width: 198px;
 border: 1px solid #555;
 background: #fff;
 overflow: hidden;
}
#footpanel h3 {
 background: #526ea6;
 padding: 5px 10px;
 color: #fff;
 font-size: 1.1em;
 cursor: pointer;
}
#footpanel h3 span { /*--Right aligned "-" icon--*/
 font-size: 1.5em;
 float: right;
 line-height: 0.6em;
 font-weight: normal;
}
The following section is the area that will be scrollable. Use an overflow: auto; to allow the scroll to appear when the content exceeeds the <ul> height.
#footpanel .subpanel ul{
 padding: 0; margin: 0;
 background: #fff;
 width: 100%;
 overflow: auto;
 padding-bottom: 2px;
}
#footpanel .subpanel li{
 float: none; /*--Reset float--*/
 display: block;
 padding: 0; margin: 0;
 overflow: hidden;
 clear: both;
 background: #fff;
 position: static;  /*--Reset relative positioning--*/
 font-size: 0.9em;
}

Chat Panel

Chat Panel Details
#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
 padding: 5px;
 background: #fff;
 color: #777;
 float: left;
}
#chatpanel .subpanel li a img {
 float: left;
 margin: 0 5px;
}
#chatpanel .subpanel li a{
 padding: 3px 0; margin: 0;
 line-height: 22px;
 height: 22px;
 background: #fff;
 display: block;
}
#chatpanel .subpanel li a:hover {
 background: #3b5998;
 color: #fff;
 text-decoration: none;
}

Alert Panel

Alert Panel Details
#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
 border-top: 1px solid #f0f0f0;
 display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
 background: url(delete_x.gif) no-repeat;
 float: right;
 width: 13px; height: 14px;
 margin: 5px;
 text-indent: -9999px;
 visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
 text-align: right;
 padding: 5px 10px 5px 0;
}

Step 3. Activating the Subpanel – jQuery

Adjust the Subpanel Height
The tricky part about the collapsible sub-panel is to make sure the content does not stretch beyond the height of the viewport when active.
Adjust Panel height
To make sure the height does not exceed past the viewport, use the following function to calculate and resize the sub-panel according to the viewport size.
Adjust Panel height
The following script contains comments explaining which jQuery actions are being performed.

jQuery

//Adjust panel height
$.fn.adjustPanel = function(){
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset sub-panel and ul height

    var windowHeight = $(window).height(); //Get the height of the browser viewport
    var panelsub = $(this).find(".subpanel").height(); //Get the height of sub-panel
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of sub-panel)
    var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel

    if ( panelsub > panelAdjust ) {  //If sub-panel is taller than max height...
        $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust sub-panel to max height
        $(this).find("ul").css({ 'height' : panelAdjust}); ////Adjust subpanel ul to new size
    }
    else if { //If sub-panel is smaller than max height...
        $(this).find("ul").css({ 'height' : 'auto'}); //Set sub-panel ul to auto (default size)
    }
};

//Execute function on load
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

//Each time the viewport is adjusted/resized, execute the function
$(window).resize(function () {
    $("#chatpanel").adjustPanel();
    $("#alertpanel").adjustPanel();
});

Add the Toggle Function

Since both of the chat and alert panels are collapsible, we must treat this like the logic of an accordion (when one opens, the other closes). We also need to allow the panels to collapse when clicking out of the sub-panels.
The following script contains comments explaining which jQuery actions are being performed.
//Click event on Chat Panel and Alert Panel 
$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
        $(this).next(".subpanel").hide(); //Hide active subpanel
        $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
    }
    else { //if subpanel is not active...
        $(".subpanel").hide(); //Hide all subpanels
        $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
        $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
        $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
    }
    return false; //Prevent browser jump to link anchor
});

//Click event outside of subpanel
$(document).click(function() { //Click anywhere and...
    $(".subpanel").hide(); //hide subpanel
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
});
$('.subpanel ul').click(function(e) {
    e.stopPropagation(); //Prevents the subpanel ul from closing on click
});

//Show/Hide delete icons on Alert Panel
$("#alertpanel li").hover(function() {
    $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
},function() {
    $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
});
Final Demo

Conclusion

The footer panel can be useful for admin driven applications and much more. There are many useful techniques that we covered today like the fixed footer, CSS tooltips, height calculation function, and multiple toggle function, that can be used in various ways for your future projects.
If you have any questions, concerns, or suggestions, please do not hesitate to let me know!

Automatic Image Slider w/ CSS & jQuery

Automatic Image Slider w/ CSS & jQuery

Tags: ,
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.
Automatic Image Slider CSS jQuery

The Wireframe – HTML

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.
Automatic Image Slider CSS jQuery
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

Styling – CSS

Take a look at the comments below for an explanation of the styles.
/*--Main Container--*/
.main_view {
 float: left;
 position: relative;
}
/*--Window/Masking Styles--*/
.window {
 height:286px; width: 790px;
 overflow: hidden; /*--Hides anything outside of the set width/height--*/
 position: relative;
}
.image_reel {
 position: absolute;
 top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
 position: absolute;
 bottom: 40px; right: -7px;
 width: 178px; height:47px;
 z-index: 100; /*--Assures the paging stays on the top layer--*/
 text-align: center;
 line-height: 40px;
 background: url(paging_bg2.png) no-repeat;
 display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
 padding: 5px;
 text-decoration: none;
 color: #fff;
}
.paging a.active {
 font-weight: bold;
 background: #920000;
 border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Step 3. Setting up jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.
Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.
$(document).ready(function() {
 //Code goes here
});

Step 4. Bringing it to Life – jQuery

The following script contains comments explaining which jQuery actions are being performed.
Setting up the Image Slider
Start by showing the paging and activating the first link. Then we will calculate and adjust the width of the image_reel according to how many slides there are.
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
Setting up the Slider Function and Timer
We first create the function for the slide event by itself (rotate). Then create another function (rotateSwitch) that will rotate and repeat that slide event (rotate).
//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch
Take a look at this tutorial for an explanation of how the timer (setInterval) works.
Hover and Click Events
In case the user wants to view the slide for a longer period of time, we will allow the slider to stop when it is hovered. Another thing to consider is we should reset the timer each time the paging is clicked. This will prevent unexpected slide switches and allow for a smoother experience.
//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
}); 

//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});
Automatic Image Slider CSS jQuery

Inspiration

Below are some sites that use similar techniques, check them out for inspiration!
Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery
Automatic Image Slider CSS jQuery

Related Articles

Related Posts

Simple Tabs w/ CSS & jQuery

Simple Tabs w/ CSS & jQuery

Tags: ,
I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner.
For those who are not familiar with jQuery, check out their site for a general overview, and you can also follow up with the various tutorials out there.
Easy Tabs Tutorial with CSS & jQuery

Step1. Wireframe – HTML & CSS

Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions. Also keep in mind that I used generic names like “tab1″ so its easier to understand. In reality, you should be using keywords so it can semantic and also benefit you in SEO.
HTML
<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>
If you have tried to create tabs before with CSS, you probably have experienced some frustration with getting the borders on the tabs correctly aligned. Below is a common problem that most people will run into.
Easy Tabs Tutorial with CSS & jQuery
Here is a solution I came up with that took care of this annoying issue. Check out the image below and also take a look at the CSS and its supporting comments for a better understanding.
Easy Tabs Tutorial with CSS & jQuery
Tabs CSS
ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px; /*--Set height of tabs--*/
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
 width: 100%;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 31px; /*--Subtract 1px from the height of the unordered list--*/
 line-height: 31px; /*--Vertically aligns the text within the tab--*/
 border: 1px solid #999;
 border-left: none;
 margin-bottom: -1px; /*--Pull the list item down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
}
ul.tabs li a {
 text-decoration: none;
 color: #000;
 display: block;
 font-size: 1.2em;
 padding: 0 20px;
 border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
 outline: none;
}
ul.tabs li a:hover {
 background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
 background: #fff;
 border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
Tab Content CSS
.tab_container {
 border: 1px solid #999;
 border-top: none;
 overflow: hidden;
 clear: both;
 float: left; width: 100%;
 background: #fff;
}
.tab_content {
 padding: 20px;
 font-size: 1.2em;
}

Step 2. Activate the Tabs – jQuery

For those who are not familiar with jQuery, check out their site for a general overview.
The following script contains comments explaining which jQuery actions are being performed.
$(document).ready(function() {

 //When page loads...
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content

 //On Click Event
 $("ul.tabs li").click(function() {

  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content

  var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active ID content
  return false;
 });

});
Easy Tabs Tutorial with CSS & jQuery

Conclusion

So there you have it, a nice and simple tab function with CSS and jQuery. If you have any questions, comments, or suggestions, please feel free to let me know!