显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 
 
 
 

[置顶] 兼容浏览器的CSS3阴影效果

2013-9-9 11:39:31 阅读558 评论1 92013/09 Sept9

一. 在对于CSS3的阴影效果,很多同学都已经使用过了,如:下图的效果

(来源:chrome截图)

CSS3的代码如下:

解释为:横向偏移2像素,纵向偏移3像素,模糊4像素,颜色为纯黑。

模糊取值不能是负数;

横向偏移为正数,则阴影在右侧,为负数,则阴影在左侧;

纵向偏移为正数,则阴影在下侧,为负数,则阴影在上侧;

二. 对于标准浏览器及IE9+的支持效果都很不错,但是对于IE8以下就不支持了。不过我们可以采用IE的独门秘技IE shadow滤镜来实现还算凑合的盒阴影效果。

如下图:

滤镜代码如下:

解释为:颜色为纯黑,偏移模糊为4像素,方向为90度,180度。

Direction值为0阴影在上侧,为90阴影在右侧,为180阴影在下侧,为270阴影在左侧。

三. 在使用IE shadow滤镜时我们可能会遇到下面的问题:

相关滤镜代码如下:

在对文字的容器应用滤镜时发现它的展示效果跟text-shadow类似。那如果解决,可以加个白色背景色即可。

代码更新如下:

最终展示效果:

赞一个,哈哈。

相关生成工具:http://samples

作者  | 2013-9-9 11:39:31 | 阅读(558) |评论(1) | 阅读全文>>

[置顶] css3实现有意思的效果

2012-6-11 16:25:22 阅读363 评论2 112012/06 June11

这些有的是转发的效果,有的是参考其他页面完成的效果,如有涉及“版权”的问题,请各位亲,直接联系我哟~~ 鼠标移到图片上,实现图片的光照效果(纯属自定义) http://jsfiddle.net/hszy00232/VMEgc/

作者  | 2012-6-11 16:25:22 | 阅读(363) |评论(2) | 阅读全文>>

[置顶] 实战中关于CSS的总结

2009-1-5 19:39:43 阅读1368 评论10 52009/01 Jan5

新增:

微清浮动hack:

.cf:after{

content:"";

display:table;

clear:both;

}

.cf{

*zoom:1;

}

1.如果利用<img>标签把图片放进表格单元里面,并注意到在图片下方有不需要的空间,那么设置它的display属性为block.

2.text-align可以被继承,vertical-align属性不会被继承

3.html提供<colgroup>和<col>标签相应地表示列组合和独立的列。

表格中的每个列都包括一个<col>标签,可以用类或ID来识别它们。只有两组属性对这些标签起作用:width和background属性。

<colgroup>

    <col id="brand"/>

    <col id="price"/>

    <col id="power"/>

</colgroup>

4.IE6.0兼容支持透明背景

/* 以前的兼容 */ .transparent_class { -ms-filter:"progid:DX

作者  | 2009-1-5 19:39:43 | 阅读(1368) |评论(10) | 阅读全文>>

[置顶] javascript实战总结

2010-5-31 16:08:05 阅读695 评论2 312010/05 May31

使用appendChild将<tr>元素直接增加到<table>中,则在IE中这一行并不出现,但在其他浏览器中却会显示出来。对此的解决之道是,将<tr>元素增加到表的<tbody>元素中,这种解决办法在所有浏览器中都能正确工作。 IE不能使用setAttribute正确地设置class属性。对此有一个跨浏览器的解决方法,即同时使用setAttribute("class", "new- ClassName") 和setAttribute("className","newClassName")。 在IE中不能使用setAttribute设置style属性。最能保证浏览器兼容的技术不是<element>.setAttribute("style, "font-weight:bold;"),而是<element>.style.cssText = "font- weight:bold;"。

XHR对象使用时对浏览器的判断

var xmlHTTP;

if(window.XMLHttpRequest){

xmlHTTP=new XMLHttpRequest();

}else{

try{xmlHTTP=new ActiveXObject("MSXML2.XMLHTTP.6.0")}catch(e){}

try{xmlHTTP=new ActiveXObject("MSXML2.XMLHTTP")}catch(e){}

作者  | 2010-5-31 16:08:05 | 阅读(695) |评论(2) | 阅读全文>>

IOS7.1 移动端safari浏览器新meta标记:minimal-ui

2014-3-25 12:13:44 阅读243 评论0 252014/03 Mar25

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

测试URL:http://darkblue.sdf.org/camera-roll/

效果如图:

 加上标志之后:

需要注意:目前之前IOS7.1中的safari浏览器支持,其他浏览器会报如下的错误

The key "minimal-ui" is not recognized and ignored.

作者  | 2014-3-25 12:13:44 | 阅读(243) |评论(0) | 阅读全文>>

使用css实现元素的渐显效果

2013-12-30 19:09:55 阅读176 评论0 302013/12 Dec30

实现内容的渐显展开的小技巧,因为元素的height:auto时,动画效果是不生效的,所以我们使用max-height来代替。方案来自Lea Verou推荐的小技巧:http://jsfiddle.net/leaverou/zwvNY/ 。

这里的max-height值需要注意设置时要趋近于真实值,因为max-height的高度影响动画的速度,可以通过Media Query来对不同分辨率下进行优化设置。

DEMO

初始时:

p{max-height:0px; color:rgba(0,0,0,0); overflow:hidden;};

结束时:

p{max-height:260px;color:rgba(0,0,0,.6);}

添加transiton:

p{ transition:max-height 0.5s linear 0s,color 0.3s linear 0.6s; }

作者  | 2013-12-30 19:09:55 | 阅读(176) |评论(0) | 阅读全文>>

移动端实现标题文字的截断

2013-12-27 18:35:38 阅读170 评论0 272013/12 Dec27

适用场景

当屏幕分辨率为320X500时模块标题效果如下:

当屏幕分辨率为480X500时模块标题效果如下:

也就是当屏幕分辨率大时显示的文字多,分辨率小时显示文字少,同时需要保证这一部分始终完全显示。

实现方式

方案一: DEMO 来自@蒋轩哲

为整个容器 和 标题文字容器 添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;  保证内容在一行内显示。效果如下,我们需要显示的网站标识同时也被省略掉了,这时我们接着改进

为标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%,这时我们发现网站标识被挤到了下面

为网站标识容器添加 display:inline-block;margin-left:-6em; 通过设置负margin让我们网站标识可以出显示在标题行里

为标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 通过设置box-sizing属性值为border-box,把padding-right值占用的位置计算到了标题文字容器里,注意:padding-right的值正好是网站标识容器margin-left的调整的值。调整完后的效果如下:

作者  | 2013-12-27 18:35:38 | 阅读(170) |评论(0) | 阅读全文>>

【翻译】如何使用JavaScript控制CSS Animations和Transitions

2013-10-23 13:56:25 阅读714 评论0 232013/10 Oct23

源文:http://css-tricks.com/controlling-css-animations-transitions-javascript/

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子。我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程。

有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期。

CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画,而且其交互效果比大多数JavaScript库更高效。

So,让我们快点开始吧!小伙伴们都等不及了!

注意:Animations(动画)和Transitions(过渡)是不同的

CSS Transitions(过渡)被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终需要的值;而

作者  | 2013-10-23 13:56:25 | 阅读(714) |评论(0) | 阅读全文>>

360极速浏览器6.5新增渲染模式的配置方式

2013-9-24 15:40:30 阅读321 评论0 242013/09 Sept24

 最新6.5版本,增加了这个逻辑:

在Head中添加一行代码:

<meta name="renderer" content="webkit|ie-comp|ie-stand">

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用极速模式,兼容模式,IE模式打开。

下次打开网页生效  

作者  | 2013-9-24 15:40:30 | 阅读(321) |评论(0) | 阅读全文>>

【翻译】10个非常节省时间的CSS整理工具

2013-9-23 11:32:52 阅读424 评论0 232013/09 Sept23

源文:http://www.sitepoint.com/terrific-time-saving-css-tools/

The benefits of having clean, organized CSS are numerous. A site with immaculate CSS will load more quickly, appear more prominently in search results, and serve as a stellar testament of your professionalism for future clients. Everyone from the everyday visitor to the most scrutinous fellow designer will benefit from your diligent, clean CSS markup.

整洁,组织良好的CSS有很多好处。一个干净整洁的CSS的站点将被加载的更快,展现在搜索引擎结果中更加突出,并且在未来的客户端中也能得以很好的展示。从每天的访问者到资深的设计师同事都将从你的辛勤成果整洁的CSS标签中获益。

But, cleaning up your CSS from countless design iterations and changes

作者  | 2013-9-23 11:32:52 | 阅读(424) |评论(0) | 阅读全文>>

字体是个深坑

2013-9-9 15:01:24 阅读210 评论0 92013/09 Sept9

来源:http://yuguo.us/weblog/computer-fonts/

今天在解决字体平滑问题时找到的一篇文章。感觉不错收集到此。

如图,左边是12号的Arial字体,右边是12号的宋体,为啥他们一个有边缘半透明一个没有呢?

如图,上面的是Chrome下的48号图标字体,下图是49号,为啥下面的明显比上面平滑呢?

如图,IE渲染图标的时候为什么垂直方向比水平方向更平滑呢?

有什么CSS属性可以让字体变得平滑呢?

当我脑中浮现出这些问题的时候,辣就是一个深坑啊有木有!两个小时查了80+个英文站,结论如下:

outline和bitmap

简单的说,字体格式分三类其中两大类分别是outline的和bitmap的,就是矢量和点位图。点位图字体是常用语Linux系统的一种老式字体,对于每个固定的font-size都会储存每一个文字的点位图片。矢量字体就是常用的opentype和truetype之类了,字体储存的是矢量信息,所以字体设置不同的font-size的时候都可以缩放。

outline字体可以内嵌bitmap

The 'EBSC' table provides a mechanism for forcing the TrueType scaler to use a particular

作者  | 2013-9-9 15:01:24 | 阅读(210) |评论(0) | 阅读全文>>

HTML5新属性DownLoad简介

2013-5-3 11:40:55 阅读443 评论0 32013/05 May3

今天看到蒋捷宇的一篇文章是讲html5下载属性,原文地址:http://blog.csdn.net/hfahe/article/details/8877015 。正好项目中也有类似的场景,正好拿来用。^ - ^

HTML5这个DownLoad的属性使用很简单

1. 首先,download属性是专门用在a标签的,并且a标签要设置相应的href属性,指定要下载的链接地址。

<a href="test.mp3" download>下载</a>

浏览点击链接,你就可以把test.mp3文件保存到本地了,文件名称是test.mp3。

2. 这时如果想在下载时指定保存文件的名称,可以通过下面的方式实现

<a href="test.mp3" download="你好.mp3">下载</a>

这时需要注意的是:需要指定文件的类型,如:你不能写在download="你好",否则下载时会保存成未指定格式的文件。应该写成download="你好.mp3"。

3. 你也可以通过脚本来设置链接的相应download属性

<a href="test.mp3">下载</a> $('a').attr('download','你好.mp3');

作者  | 2013-5-3 11:40:55 | 阅读(443) |评论(0) | 阅读全文>>

关于Emmet的使用

2013-3-29 13:49:34 阅读338 评论0 292013/03 Mar29

来源:http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/

如果想更改默认模板:

可以在Preferences->Browse Packages..-> Emmet -> emmet -> snippets.json 进行修改

HTML Abbreviations(HTML缩写! or html:5

html:5 or ! for an HTML5 doctype

html:xt for an XHTML transitional doctype

html:4s for an HTML4 strict doctypeEASILY ADD CLASSES, IDS, TEXT AND ATTRIBUTES

p.bar#foo

<p class="bar" id="foo"></p>

h1{foo}

<h1>foo</h1>

a[href=#]

<a href="#"></a>

NESTING

作者  | 2013-3-29 13:49:34 | 阅读(338) |评论(0) | 阅读全文>>

css rem相关

2013-3-25 11:47:47 阅读418 评论1 252013/03 Mar25

rem和em区别:

em:依据最近父元素的font-size值来计算本身的大小

rem:依据root元素的font-size值来计算本身的大小(浏览器支持:IE8+,mobile和平板,chrome,FF等)

vm:1/100th of viewport width.

Demo1:根据不同的链接选择不同的显示文字大小 http://runjs.cn/detail/5sacmcac

Demo2:根据不同的浏览器大小调整页面元素大小 http://runjs.cn/detail/f5lw0mcs

来源:http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/

作者  | 2013-3-25 11:47:47 | 阅读(418) |评论(1) | 阅读全文>>

photoshop安装host设置

2013-3-4 12:29:59 阅读245 评论0 42013/03 Mar4

127.0.0.1 activate.adobe.com

127.0.0.1 practivate.adobe.com

127.0.0.1 ereg.adobe.com

127.0.0.1 activate.wip3.adobe.com

127.0.0.1 wip3.adobe.com

127.0.0.1 3dns-3.adobe.com

127.0.0.1 3dns-2.adobe.com

127.0.0.1 adobe-dns.adobe.com

127.0.0.1 adobe-dns-2.adobe.com

127.0.0.1 adobe-dns-3.adobe.com

127.0.0.1 ereg.wip3.adobe.com

127.0.0.1 activate-sea.adobe.com

127.0.0.1 wwis-dubc1-vip60.adobe.com

127.0.0.1 activate-sjc0.adobe.com

cs5,序列号:

1328-1898-5292-5951-8970-1350

1328-1312-2469-1233-5471-5415

1407-1774-6464-0961-5577-3797   对的!

1325-1558-5864-4422-1094-1126

1325-1958-5864-4422-1094-1178

作者  | 2013-3-4 12:29:59 | 阅读(245) |评论(0) | 阅读全文>>

查看所有日志>>

 
 
 
 
 
 
 
 

北京市 东城区 天蝎座

 发消息  写留言

 
前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com
 
近期心愿能够快速尽其所知,学其所不能,从而完成事情并远超期望。
博客等级加载中...
今日访问加载中...
总访问量加载中...
最后登录加载中...
 
 
 
 
 

天气

 
 
模块内容加载中...
 
 
 
 
 

日志分类

 
 
日志分类列表加载中...
 
 
 
 
 
 
 
模块内容加载中...
 
 
 
 
 
 
 
模块内容加载中...
 
 
 
 
 

新浪微博

 
 
模块内容加载中...
 
 
 
 
 
 
 
列表加载中...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2014

创建博客 登录  
 加关注