你所选择的标签为: CSS

Hello CSS! 和图片说Bye Bye

Hello CSS! 和图片说Bye Bye

25

July

2013

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

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

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

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

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

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

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

02

July

2013

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

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

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

jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

18

December

2012

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到。

其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已。

首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行。

HTML CODE:

<div id="header">Default header. No absolute and fixed.</div>
<div id="topToolbar">Fixed at the top of the Toolbar.</div>
<div id="content">
	<p>此处省略1000字...</p>
</div>
<div id="bottomToolbar">Fixed at the bottom of the Toolbar. By Bluesdream.com</div>

[ 查看全文... ]

CSS3 制作3D旋转球体

CSS3 制作3D旋转球体

28

November

2012

今天的例子中,我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。

对于preserve-3d,这里要说明的是,它只影响这个元素的子元素(二级元素),孙元素(三级元素)如果也想拥有3D模式,那么就必须给它的上级元素(父元素)也添加preserve-3d。

box-sizing是我们平时比较少接触到的属性,其分辨有2个值content-box和border-box。
content-box:此属性表现为标准模式下的盒模型(当我们设置元素的width和height时,它的宽度不包括border和padding。例:width:100px; border-width:10px; 元素实际宽度为220px;)
border-box:此属性表现为怪异模式下的盒模型(和content-box相反,它的宽度包含border和padding。例:width:100px; border-width:10px; 此时的border相当于内边距,元素实际宽度仍为200px;)

好了,接下来我们就看例子吧:
[ 查看全文... ]

CSS3 绘制Windows 8 logo

CSS3 绘制Windows 8 logo

27

November

2012

今天的内容非常简单,但有个比较关键的属性:perspective(透视)。所有元素都是放置在z=0的平面上perspective属性设置镜头到元素平面的距离(学过AUTOCAD的童鞋应该很容易理解吧)。是不是还有点云里雾里呢?我们来举个例子,想想你从天上俯看一座金字塔。镜头到元素平面的距离,就是塔的顶部(视点)和地面(Z-平面)之间的距离。

HTML CODE:

<div class="wrapper">
	<div class="logo"></div>
	<div class="logo_text">Windows 8</div>
</div>

[ 查看全文... ]

jQuery Parallax Scrolling Website(视差滚动网站制作)

jQuery Parallax Scrolling Website(视差滚动网站制作)

23

November

2012

唠叨一下:
一直没时间去研究视差滚动的内容,乍看之下还觉得挺难、蛮麻烦的,不知道你有没有同感?我在度娘找了半天,也没找到什么有用的资料(起码我没找到,要么就是写的像天书一样,没精力去折腾)谷歌么自从X8大以来,一直处于悲剧状态。这两天正好空闲下来,就又去找了下相关的资料。不看不知道,一看吓一跳,顿时恍然大悟,原来那么简单。。。

什么是视差滚动?
视差滚动(Parallax Scrolling)视差滚动是一个二维动画制作过程,创建一个动画前景层的速度比背景层深度的幻觉。简单的说,就是让多个层面的东西(如果你有接触过PS或FLASH,应该很容易理解"层"这个概念),以不同的速度移动,形成立体的运动效果。举个例子,当你坐在行驶中的汽车内,看着窗外近景的树木,再看远处的山或事物,你会发觉树移动的很快,而远处的事物却移动的很慢。视差滚动使用相同的原则来误导人们眼睛,以为他们所观察到的3D场景。具体描述,可以查看维基百科 Parallax scrolling [ 查看全文... ]

无觅相关文章插件,快速提升流量