当前的文章分类为: 前端开发

Hello CSS! 和图片说Bye Bye

25

July

2013

在一次聊天中讨论到如何利用CSS来制作一个按钮,不但能自适应宽高,并且还要在不实用图片的情况下,让按钮有类似“外描边”、“内描边”和圆角的效果,并且兼容IE6、IE7。所以今天特地花了点时间来做这个。

当完成以后,发现单纯的按钮有点单调,就想加点ICON来美化一下。可既然按钮都是用CSS来完成,那ICON还用图片来显示,是否有些背道而驰,所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下,也加入一些CSS3属性,起到渐进增强的目的,让“高级用户”能够得到更好的呈现效果。

这样做的好处在于按钮和图标颜色都能通过CSS来调整,维护起来比较方便。还有就是CSS的渲染速度比较快,同时还减少了HTTP请求量。

不过,并不是说用CSS必定比图片好,关键还是要根据实际环境和需求,合理使用才是关键。

本例兼容:IE6-10、Chrome、Safari、Opera。 [ 查看全文... ]

jQuery Slider Gallery(滑动相册 带拖动按钮)

12

July

2013

以前做过个项目,需求是做一个图片集(图片相册),其中有个小功能是底部带拖动按钮,拖动按钮相册列表一起滚动。当初单独做个拖动按钮没什么问题,问题不知道怎么让上面的内容随着这滚动条一起等比例的滚动,后来这块是由我同事帮忙写的。所以空下来便研究一下,把思路理清自己写个试试,结果比想象中的要简单很多。

当前版本:v1.2
兼容:IE6+、Firefox、Chrome、Safair [ 查看全文... ]

图片、文字水平垂直居中(兼容各浏览器)

02

July

2013

图片水平垂直居中、文字(多行文字)水平垂直居中,这是个老生常谈的问题,也经常有人提及这个问题,至此写个案例作为备忘。

主要用到的CSS属性就是display:table-cell[指定对象作为表格单元格。类同于html的td标签]。应用与已知外层容器宽高,但内部图片大小和文字数量未知的情况。

注:使用display:table-cell的时候,当前元素不支持margin和position属性,这个问题往往容易被人忽略。 [ 查看全文... ]

Ublue jQuery Image Scroll(无缝滚动)

27

June

2013

一直懒得写这个效果,但有需求就必须有供应。最近正好有项目需要这东西,所以就把之前写的插件拿来改了下,作为一个单独的插件,等以后有时间再把2个插件合并起来吧。

功能和描述(v1.0):
1.图片无缝左右滚动
2.经过图片显示/隐藏标题(可选)
3.自动循环滚动(可选)
3.鼠标经过停止滚动
4.单个页面可以重复使用
5.兼容IE6+、Chrome、Firefox、Safari、Opera [ 查看全文... ]

自定义新浪微博分享按钮样式

24

June

2013

新浪开放平台虽然有分享按钮的组件(http://open.weibo.com/sharebutton)并且提供了两种格式的应用方法:WBML和JS,但还是无法据自己的需求做到自定义样式。

为了解决该问题,我们首先来看下新浪所生成的JS代码:

<script type="text/javascript" charset="utf-8">
(function(){
     var _w = 32 , _h = 32;
     var param = {
          url:location.href,
          type:'1',
          count:'', /**是否显示分享数,1显示(可选)*/
          appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
          title:'', /**分享的文字内容(可选,默认为所在页面的title)*/
          pic:'', /**分享图片的路径(可选)*/
          ralateUid:'', /**关联用户的UID,分享微博会@该用户(可选)*/
          language:'zh_cn', /**设置语言,zh_cn|zh_tw(可选)*/
          dpc:1
     }
     var temp = [];
     for( var p in param ){
          temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
     }
     document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://service.weibo.com/staticjs/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
})()
</script>

[ 查看全文... ]

box-shadow和filter:drop-shadow的区别

06

June

2013

在CSS3中,box-shadow和filter:drop-shadow,都能实现阴影效果。乍看之下几乎没有任何区别:Demo1,可事实上并非如此。

最常见的情况,不知各位有没遇到过在某个带阴影的元素上,通过伪类添加一个箭头。此时会遇到一个蛋疼的情况,那就是所添加的箭头没有阴影。对此,我们通常会理解为这是两个“元素”所以没有很正常,但如果再给这箭头添加阴影,可能会导致两个元素的阴影重叠,影响效果。而filter:drop-shadow的最大优点,就是能够识别一个元素的轮廓和透明度:Demo2 [ 查看全文... ]