一起CSS

当前位置:一起CSS

用CSS滤镜制作圆角

日期:2008-12-16 分类:CSS

今天来用 CSS滤镜来制作圆角效果。正如你所知道的,CSS滤镜只有 IE 浏览器支持,所以这种方法不能真正的用到实际当中,所以就当做是了解一下咯。

首先来看一个例子,点击这里查看(用 IE 浏览器喔)。

看了上面的例子,也许你就知道制作的原理了。我们只用《一张图片实现圆角》例子中圆圈图片的1/4(左上部分): ,放 4 张,对相应的图片进行相应的翻转,然后定位到父容器的相应位置,就实现了圆角。

代码实现

XHTML代码:

<div id="box">
<h3>CSS滤镜制作圆角</h3>
<img class="img1" src="images/yuan9.jpg" />
<img class="img2" src="images/yuan9.jpg" />
<img class="img3" src="images/yuan9.jpg" />
<img class="img4" src="images/yuan9.jpg" />
</div>

CSS代码:

*{
margin:0;
padding:0;
}
#box{
position:relative;
width:400px;
margin:20px auto;
border:1px solid #000;
}
img{
position:absolute;
}
.img1{
left:-1px;
top:-1px;
}
.img2{
right:-1px;
top:-1px;
filter:fliph;/*水平翻转*/
}
.img3{
bottom:-1px;
left:-1px;
filter:flipv;/*垂直翻转*/
}
.img4{
right:-1px;
bottom:-1px;
filter:fliph flipv;/*水平垂直翻转*/
}
h3{
padding:20px 0;
text-align:center;
}

查看效果

和《一张图片实现圆角》一样,如果父容器的高度为基数,圆角在 IE6 里下方也会出现一条横线。

查看:806 评论:没有评论 标签:,

hoverbox

日期:2008-12-15 分类:CSS

前两天在的 Nathan Smith 的博客上看到他的 hoverbox ,觉得非常的精彩。这是一个图片集,当鼠标移动到每张小图片上,就会有一张大图片出现。他的制作原理是:在标签 a 里放两张一样的图片,第一张图片设置成较小的尺寸,第二张先隐藏,当鼠标移动到第一张图片上时,就让第二张图片显示。原文地址和例子地址如下:

原文地址:http://sonspring.com/journal/hoverbox-image-gallery

例子地址:http://host.sonspring.com/hoverbox/

效果预览:

从上面的例子可以看到,为了兼容 IE6 ,用了两张样式表。我在想:能不能只用一张样式表?我把他的两张样式表合在一起后,在 IE6 、IE7 、FF 、opear 中浏览没有任何问题,然而在 Chrome 中去没有效果了。我就在想:能不能修改修改,只用一张样式表,并且能在上述所有浏览器中实现效果。经过多次修改实验后,终于实现了。我给第二张图片套了一个 span 标签,CSS 代码也做了一定的修改。详细例子请点击这里查看

原先我一直都认为 CSS 没有逻辑性,所以不会有太大的灵活性或可变性(不知道用词是否恰当),但现在却越来越觉得:CSS 虽然是死的,但人是活的。活生生的人有各种各样不一样的想法。就如的这个例子,要制作这种效果,我们一般会想到 javascript ,但他却突破常规,完全只用 CSS 。

=======华丽的分割线=========================================

读者“老鼠”提出上面修改的例子不兼容 IE8 beta 2 ,所以特意装上了 IETester 进行查看,看到确实不行。在 IE8 beta 2 里的效果是:鼠标第一次移动到小图片上的时候,效果正常,大图片出现在了指定的位置。然而第一次之后,大图却跑到浏览器左上角去了,似乎第一次之后,大图的绝对定位是以浏览器窗口为基准。经过检查之后,发现是 .img1{display:block} 导致的,原本此属性是为了修复 img 3px bug 的,没想到却导致在 IE8 beta 2 里出现异常(不知道这算不算 IE8 的 bug),让人不能理解。既然这条属性有问题,那就换一种解决办法,改成 .img1{vertical-align:top} ,次属性也能修复 img 3px bug ,并且使例子在 IE8 beta 2 里正常。修复后的例子请点击这里查看

再次感谢“老鼠”的测试!(2008.12.18)

查看:835 评论:6

一张图片实现圆角

日期:2008-12-12 分类:CSS

一张图片就能实现圆角?是什么样的图片?怎样实现?

其实这张图片是一个小圆圈,如下面的例子将要使用的图片为 10 * 10 大小的图片: ,太小了是吧,不过已经够了。

基本思路

准备四个小容器,分别放小圆圈图片的左上、右上、左下、右下四个部分,然后再分别定位到父容器的四个角上。

图片示意:

圆角

代码实现

XHTML代码:

<div id="container">
<h1>一张图片实现圆角</h1>
<b class="lt"></b>
<b class="rt"></b>
<b class="lb"></b>
<b class="rb"></b>
</div>

四个 b 为小容器,不要管它们,放上去就是了。

CSS代码:

*{
margin:0;
padding:0;
}
#container{
position:relative;
margin:20px auto;
padding:20px;
width:400px;
height:50px;
border:1px solid #000;
}
b{
position:absolute;
width:5px;
height:5px;
font-size:0;
background-image:url(images/yuan8.jpg);
background-repeat:no-repeat;
}
.lt{
left:-1px;
top:-1px;
background-position:left top;
}
.rt{
right:-1px;
top:-1px;
background-position:right top;
}
.lb{
left:-1px;
bottom:-1px;
background-position:left bottom;
}
.rb{
right:-1px;
bottom:-1px;
background-position:bottom right;
}
h1{
text-align:center;
font-size:24px;
}

查看效果

这种方法似乎很完美,但遗憾的是:如果父容器(本例为 #container)的高度为基数时,在 IE6 里下方会出现一条横线,如下图:

所以,如果使用这种方法,就要控制好父容器,使它的高度为偶数。

另外:由于 IE 默认行高,b{height:5px} 会没有效果,所以加上了 font-size:0 消除了这个 bug ,虽然 overflow:hidden 也可以消除这个 bug ,但本例中不适合用这种方法,否则在 IE 中下半部分的圆角会没有效果或效果不完美(IE bug 真多 -_-!)。

查看:1,372 评论:5 标签:,

让搜索更友好

日期:2008-12-8 分类:用户体验

站内搜索功能是网站必不可少的,它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成,默认的情况下,在各个浏览器的效果不一样,甚至计算机系统主题的不同,也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好,我们对它进行“加工”,让它在各种环境下都显示一致的效果,而且还给访问者提示。

搜索功能的 XHTML 代码一般如下:

<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="keyword" id="keyword" />
</label>
<label>
<input type="submit" name="put-in" id="put-in" value="搜索" />
</label>
</form>

默认情况下,在各个浏览中的效果如下图:

给它加上样式:

*{
margin:0;
padding:0;
}
form{
position:relative;
margin:20px;
}
input{
position:absolute;
border:1px solid #00CCFF;
background:#fff;
}
#keyword{
width:150px;
height:24px;
padding-left:2px;
line-height:24px;
color:#bbb;
}
#put-in{
width:50px;
height:26px;
left:150px;
}

加上样式之后,在各个浏览器中的效果都如下图:

我们再给它添加提示:在 XHTML 代码中,给文本框加上默认的文字 value="请输入关键字" ,然后再加上 javascript 代码,使用户用鼠标点击文本框时,默认的文本消失,能够直接输入关键字。

javascript代码:

window.onload = function(){
var wordinput = document.getElementById("keyword");
wordinput.onfocus = function(){
this.value = "";
this.style.color = "#000"
}
wordinput.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
this.style.color = "#bbb"
}
}
}

相关解释:

onfocus —— 元素聚焦时触发的事件

onblur —— 元素失去焦点时触发的事件

至此,制作完成。查看效果

查看:643 评论:1 标签:,

上下两张图片CSS圆角

日期:2008-12-7 分类:CSS

与无图 CSS 圆角相比,上下两张图片 CSS 圆角就比较容易制作了,即用切图软件把圆角的上半部分、下半部分分别切出来,然后放到网页中。效果图如下:

CSS圆角

圆角上半部分和下半部分图片:

CSS圆角上半部分

CSS圆角下半部分

上下两张图片和中间元素的左右边框就组成了完整的圆角。

例子代码

XHTML代码:

<div id="box">
<div id="top"></div>
<div id="content"><h1>有图CSS圆角</h1></div>
<div id="bottom"></div>
</div>

XHTML代码不一定要这样写,您可以根据您的实际情况写出更有语义的XHTML代码,这里这样写是为了更好的理解这种制作方法。

CSS代码:

*{
margin:0;
padding:0;
}
#box{
width:415px;
margin:20px auto;
}
#top{
height:5px;
overflow:hidden;
background:url(images/top.gif);
}
#bottom{
height:5px;
overflow:hidden;
background:url(images/bottom.gif);
}
#content{
border-left:1px solid #000;
border-right:1px solid #000;
}
h1{
font-size:16px;
padding:20px;
text-align:center;
}

查看效果

#top 放圆角上半部分图片,#bottom 放圆角下半部分图片,#content 设置左右边框,合起来就成了完整的圆角。

查看:644 评论:没有评论 标签:,

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved