简明现代魔法 -> CSS层叠样式表

CSS模拟技能冷却效果

巧用div的边框厚度实现这种效果

显然这种效果不复杂,一张背景图片,加上前面带有透明度的多边形图层,在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形?在IE下可以用VML,其他浏览器可以用Canvas等等。虽然行的通,但都不是最简单的。仔细分析下,该效果本质就是若干个三角形拼接而成。而三角形,如果你熟悉CSS2的话,一定在哪个地方见过。。。

发布于 2011-03-15 分类:csszone

CSS放大镜的制作

放大镜或是狙击镜那样的效果

图片放大,这是一个比较容易的效果了。当然,今天说的可不是简简单单的在一个框里放大,而是一个圆。就像放大镜或是狙击镜那样,只有圆圈里的放大,圈外的当然还是原来的图片。这是不是很不可思议? 当然不是。做过Flash的也许会脱口而出:套个蒙版就是了。可惜CSS不是Flash,没有那一套。我们只有从CSS里面慢慢挖掘。

发布于 2011-03-03 分类:csszone

三栏自适应布局的CSS设计

两种方案介绍

题目:在页面上有三个块,左右块的宽度高度固定,中间块宽度撑满在左右块之间,然后中间块的宽度可以跟着浏览器的变化而变化。这种设计的好处是可以铺满整个浏览器,不管你使用哪种分辨率。很多网站都在使用这种CSS布局,比如博客园 www.cnblogs.com。

发布于 2011-02-18 分类:csszone

CSS网页宽度的几个方案

设计网页的时候,确定宽度是一件很苦恼的事

设计网页的时候,确定宽度是一件很苦恼的事。以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;最大的分辨率是3360x1050,天知道是什么设备。一张网页要在大小如此悬殊的各种屏幕上,都呈现令人满意的效果,难度可想而知。

发布于 2011-01-16 分类:csszone

你应该了解的几个CSS3特性

CSS3不遥远,你需要去了解它

CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些 效果,但了解它们还是必须且很有趣味性的。CSS3中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

发布于 2011-01-05 分类:csszone

你真的理解CSS的float吗

更深入地了解CSS的浮动

CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动。但仅仅是如此吗?No!要注意以下几点。

发布于 2011-01-03 分类:csszone

完美解决浮动问题的CSS hack

Clear:both其实是有瑕疵的

原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。但这种办法就是最好了的吗?我这么说,当然答案就不是了。可以采用通过Hack实现。

发布于 2011-01-03 分类:csszone

CSS的一些缩写总结

灵活使用它们可以让你的CSS文件体积更小

background 简写属性在一个声明中设置所有的背景属性,border 简写属性在一个声明设置所有的边框属性,font 简写属性在一个声明中设置所有字体属性,list-style 简写属性在一个声明中设置所有的列表属性。灵活使用它们可以让你的CSS文件体积更小。

发布于 2010-12-13 分类:csszone

三列布局页面的CSS设计

两列定宽中间自适应的结构布局

探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要。无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset。将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。我们知道在IE6.0以及IE7.0是使用了一个has layout的概念。

发布于 2010-10-11 分类:csszone

制作一个人性化的CSS按钮

一个经常看到的很好看的按钮

这个教程将要教会你使用css来制作非常好看的按钮(包括不同的点击状态)。动态的按钮节省了您大量的花在画图的时间。其实你也可以制作出来这样漂亮的按钮的,只需要跟着我们的教程就可以了。

发布于 2010-10-05 分类:csszone

CSS Sprites技术使用心得

让你对CSS Sprites有个清楚的认识

Sprite是每个前端工程师处理图片的基本技能。有些工程师昵称这项技能为“雪碧”,可见大家对这个东西的关爱程度。所谓图片的sprite技术,就是把网站用到的小图片整合在一张比较大的“地图”上,然后在页面容器里对这张“地图”采用背景图片定位的方式来调用此处需要用到的那张小图片的位置。

发布于 2010-09-29 分类:csszone

CSS解析机制的优先级

了解CSS的优先级机制是很重要的

选择器都有一个权值,权值越大越优先;当权值相等时,后出现的样式表设置要优于先出现的样式表设置;创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;继承的CSS 样式不如后来指定的CSS 样式;在同一组属性设置中标有“!important”规则的优先级最大;

发布于 2010-09-25 分类:csszone

IE中CSS渲染与其它浏览器的差异

浏览器兼容需要对IE的工作模式有所了解

由于IE系浏览器对标准的支持不够好,导致Web开发中经常需要去处理浏览器兼容性问题,特别有些莫名其妙的问题很让人头疼。如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。之所以说是一般情况是因为可以使用!important来改变这种顺序,比如外部样式如果某个样式项使用了!important来提高优先级,其优先级将比内联样式高。

发布于 2010-09-25 分类:csszone

CSS Sprites技术介绍

这个优雅的技术,最好能用上就用上吧

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏、视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要同时保持画面流畅。“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上。

发布于 2010-09-22 分类:csszone

IE6盒模型双倍边距测试

IE6盒模型没问题

网上很多资料都说IE6的盒子模型有问题,其实是IE5的盒子模型有问题,IE6的没问题。实验1:验证width、padding、border;实验2:验证 IE6 双倍边距bug;实验3:IE6 双倍边距出现的情况。

发布于 2010-08-28 分类:csszone
 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们