深圳市迅雷网络技术有限公司急聘网页重构工程师

要求:
1、精通HTML/XHTML、CSS等制作技术,熟悉页面架构和布局;
2、 对Ajax、JavaScript、DOM等界面技术-有一定的了解;
3、 对用户体验,web可用性有一定的兴趣;
4、对产品流程、用户操作流程、及用户需求有深入理解;
5、有较强的写作技术文档能力。
待遇:面议
有意者发简历和作品到impactzou@gmail.com邮箱。

text-stroke(文本描边)和text-fill-color(文本填充色)-Css3演示

text-stroke(文本描边)和text-fill-color(文本填充色)注意点:
  1. 目前这两个属性只有webkit内核的Safari和Chrome支持,例如: -webkit-text-stroke: 3.3px #2A75BF;
  2. text-fill-color:颜色值,和color属性差不多都是文字的样式;
  3. 同时使用text-fill-color和color属性,text-fill-color将覆盖color属性的颜色值;
  4. text-fill-color可以使用透明值,即:text-fill-color:transparent

查看一个text-stroke(文本描边)和text-fill-color(文本填充色)演示:http://www.css88.com/tool/css3Preview/Text-Stroke.html

演示参照:http://westciv.com/tools/index.html

css3文本阴影属性text-shadow

css3文本阴影属性text-shadow的几点说明:
  1. css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性;
  2. text-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
  3. Firefox,webkit内核的Safari和Chrome,Opera支持Text Shadow(文本阴影):text-shadow:2px 2px 5px #333333
  4. 一个文本可以使用多个文本阴影
  5. IE不支持text-shadow(阴影)

查看一个box-shadow(阴影)演示:http://www.css88.com/tool/css3Preview/Text-Shadow.html

演示参照:http://westciv.com/tools/index.html

css3阴影属性box-shadow

css3阴影属性box-shadow的一些注意点:
  • box-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色;
  • Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2px 5px #333333;
  • webkit内核的Safari和Chrome支持Box Shadow(阴影):-webkit-box-shadow:2px 2px 5px #333333;
  • Opera支持Box Shadow(阴影):box-shadow:2px 2px 5px #333333;
  • IE不支持Box Shadow(阴影);
  • 同一个元素可以使用多个阴影,box-shadow:2px 2px 5px #333333,box-shadow:-2px -8px 5px #333333;;
  • js中可以使用:obj.style.webkitBoxShadow=值(字符串);obj.style.MozBoxShadow=值(字符串);obj.style.boxShadow=值(字符串);

查看一个box-shadow(阴影)演示:http://www.css88.com/tool/css3Preview/Box-Shadow.html

演示参照:http://westciv.com/tools/index.html

【中国移动】139邮箱 用户体验室 诚聘 前端开发工程师

公司名称: 深圳彩讯科技有限公司。

公司网址:http://www.richinfo.cn/

所属部门: 中国移动 139邮箱 深圳产品部 UCD用户体验室

招聘职位: 前端开发工程师

招聘人数: 1人

工作地点: 深圳

工作性质: 全职

薪酬待遇:面议(6.5K以上)

工作时间:一周5天工作制、一天7小时半 (优秀的能力不是靠加班来展现!)

员工福利:除包含四金外,特有福利: 每月手机话费报销 + 额外的13%月工资 房补金额。(试用期就包含

岗位职责:
1、为公司互联网产品实现一流的WEB界面,优化代码并保持良好兼容性;
2、Web前端表现层及与前后端交互的架构设计和开发;
3、利用各种Web技术模拟开发产品原型;
4、配合实现产品界面和功能;Web新技术调研和资讯整理;
5、能于产品文案、UE交互设计师、UI设计人员、后台开发人员很好的沟通、协作;
6、负责优化用户体验及完善WEB设计流程,建设产品实验室。

任职资格:

1、本科及以上学历,2年及以上同等岗位工作经历;
2、精通HTML/XHTML、CSS,熟悉页面架构和布局,对Web标准和标签语义化有深入理解;
3、对用户体验、交互操作流程、及用户需求有深入理解;

4、在DIV+CSS页面描述和CSS的各种功能展示上有心得。

联系方式:

请将个人简历及作品打包(线上作品地址),注明:应聘前端开发工程师,邮件发送到:szhr@richinfo.cn

前端开发博客搜索

这是一个搜索前端博客的插件,目前全手工收录了150个国内外的前端 开发者博客及相关站点!是方便查找前端资料的好帮手!你可以看到:当你访问这个页面时,你的IE7+或者Firefox2+右 上角的搜索工具栏中多了个前端博客搜索,而在Google chrome4.0+你 可以以chrome自己的方式方便的使用它.是的,通过它你可以直接在浏览器的搜索栏里搜索我已收录的前端博客的文章资料,一切就是这么简单!

地址:http://s.princeb4d.com/

专属 CSS Hack

转载:浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}

一个简单的用户引导效果

差不多一年没碰jQ了,由于公司现在都用jQ,所以这几天重温了一下jQ,写了一个简单的用户引导效果,写的不好欢迎拍砖。

用户引导效果简单的谁就是将一些重要功能提示给用户,比如你注册到某个网站,第一次进入就将重要的功能或板块高亮提示给你。才疏学浅真不知用文字怎么表达,之间看简陋到不能再简陋的效果吧:

点击查看demo:http://www.css88.com/demo/UGuide/index.html

这个效果可能你也看到过,在163邮箱新注册的会员就有这个效果。

总是想着优化一下这个效果,除了table外我还想到了用border找半透明的遮罩层,这样就只用一个容器了,jq操作方便了许多

点击查看demo:http://www.css88.com/demo/UGuide/index2.html

可惜这个效果在ie8下有bug出现了横向滚动条,在ie6,ie7下更加离谱了(请看第3步和第4步),到现在还没想出解决方案,如果您知道欢迎留言告知,谢谢!

被恶搞的帅哥时钟

周一早会被恶搞了,模仿美女时钟照片中的姿势。

border-collapse: collapse在FireFox,IE6,IE7下的小bug

一直使用border-collapse: collapse来做1像素边框的表格,比如:


table{border-collapse:collapse;border: 1px solid #FFFFFF;}
table td,table th{border: 1px solid #FFFFFF;}

昨天css森林的飘发了一篇文章(http://www.charlesgarwood.com/blog/?p=13)才发现原来border-collapse: collapse在FireFox下有个小bug。
ie8,CH,OP,SF都没什么问题,而在FF下却又一个小BUG:table的左边会多出1个像素的边框,并且在ie7和ie6下单元格宽度没有平分,第一个比其他几个要小一点,如图:

Read More »