Heluyao's Blog » CSS

纯css实现圆角带箭头的提示框效果(非css3)

heluyao — Fri, 30 Apr 2010 09:24:27 +0000

实现效果如下图：

这个方法并非我创，我也是以前在网上看到，记下了原理。今天有时间了，整理思路，写出代码！原文我不记得地址了，只记得原作者是google的前端工程师，方法很赞，尽管多了四个空标签(如果不要三角箭头，就只多了外层嵌套的两个标签)。

一般我处理圆角效果，都是弄一张图片，里面放4个角(或更多颜色的角)，利用浮动、相对定位再配合负margin来实现，也要多写空标签，而且是两对嵌套的标签(共4个)。这个方法固然好，毕竟用图片嘛，更美观，锐化效果要好。现在这个方法不用图片，从优化的角度分析，纯css不是更好吗！不过弊端还是有，只适合半径1-2像素的圆角，大了锯齿就出来啦～

.rc_box1,.rc_box2,.rc_box3 { display:inline-block; *display:inline; *zoom:1; position:relative; border-style:solid; border-color:#ddd;}
.rc_box2,.rc_box3 { border-width:0 1px; *left:-2px; background-color:#f3f3f3;}
.rc_box1 { border-width:1px; line-height:1.5;}
.rc_box2 { margin:0 -2px;}
.rc_box3 { margin:1px -2px; padding:0 6px;}
.ov1,.ov2 { position:absolute; left:44%; overflow:hidden; width:0; height:0; border-left:6px dotted transparent; border-right:6px dotted transparent;border-top:6px solid transparent;}
.ov1 { top:26px; border-top-color:#ddd;}
.ov2 { top:25px; border-top-color:#f3f3f3;}

如果需要实现多种颜色，那么可以将定义颜色的样式属性抽出来，单独弄一个类，比如灰色，新建个gary类，放在最外层标签上，控制好颜色。想实现几种就建几种。代码如下：

第一个div添加gray这个类：

以下css添加至样式表最后一行，再将前面控制颜色的属性删掉：

.gray,.gray .rc_box2,.gray .rc_box3 {border-color:#ddd;}
.gray .rc_box2,.gray .rc_box3 { background-color:#f3f3f3;}
.gray .ov1 { border-top-color:#ddd;}
.gray .ov2 { border-top-color:#f3f3f3;}

有序+发布时间+字数限制的新闻列表

heluyao — Fri, 30 Apr 2010 04:14:18 +0000

接手新项目，要写一个如上图的东西，简单做个说明：外层盒子固定宽度，文章标题字数超出即隐藏，并实现省略号(支持的浏览器)，日期位置跟随标题宽度。

难度不大，关键要了解各浏览器的特性。这个东西难点就在于时间元素上，我利用float+负margin来解决，兼容性也好，遗憾的是hack没少用，实属无奈啊！-_-!

下面贴出代码：

<div id="demo">
<ol class="clearfix">
   <li><a href="#@">方大同5月8日广州开唱不秀粤语最想和蔡琴合作a><span>2008-03-14span>li>
   <li><a href="#@">麻城杜鹃开的艳　奶茶歌声唱的亮a><span>2008-03-14span>li>
   <li><a href="#@">5月2日变形金刚助阵五月天a><span>2008-03-14span>li>
   <li><a href="#@">方大同5月8日广州开唱a><span>2008-03-14span>li>
   <li><a href="#@">刘若英上海个唱即将开演设计独特处处有看点a><span>2008-03-14span>li>
   <li><a href="#@">五月天玛莎低调避庆生a><span>2008-03-14span>li>
   <li><a href="#@">4月24日五月天厦门演唱会凛凛寒风激情不a><span>2008-03-14span>li>
   <li><a href="#@">任贤齐群星NOW翻成都小齐家族两次登台a><span>2008-03-14span>li>
   <li><a href="#@">周华健与群星NOW翻成都a><span>2008-03-14span>li>
   <li><a href="#@">刘若英《在一起》发片首周成绩亮眼a><span>2008-03-14span>li>
ol>
div>

#demo { font:12px/1.5 Arial;}
#demo ol { padding-left:23px; width:14em; background:url(num.gif) no-repeat 2px 6px;}
#demo li { clear:both; line-height:23px;}
#demo li a { float:left; _height:23px; _background:transparent; overflow:hidden; white-space:nowrap; _white-space:normal; max-width:14em; -o-text-overflow:ellipsis; text-overflow:ellipsis;}
#demo li span { float:left; _display:inline; _position:relative; width:70px; padding-left:10px; margin-right:-80px; font-size:11px; color:#999;}

css第4行， _background:transparent 解决IE6下“莫名”行高问题。

css第5行， _position:relative 解决IE6下该元素随外层宽度溢出隐藏。

css reset这里未提供，需自行添加。

用到图片一张：num.gif 打开后右键另存为！

补习:CSS盒模型

heluyao — Fri, 19 Mar 2010 08:42:03 +0000

正常盒模型：

实际显示宽度 = 设置的width或height + 边框 + 填充

IE 5.x及更前的版本：

实际显示宽度 = 设置的width或height(边框和填充被包含在里面)

怪异模式的IE8以下版本将使用IE5的盒模型，这点很重要，要记清了！

　　盒子宽度未定义且是静态(没有浮动)或者相对定位的，宽度为100%，边框和填充会向内推动，而不是向外扩展。若明确设置宽度为100%，那么则相反。

　　绝对定位盒子，没设置宽度，宽度则跟随内容自动缩放，只受相对定位的外层元素的宽度影响而换行，切记body是一个相对定位的盒子。

　　浮动盒子，没设置宽度，与绝对定位的盒子相似。不同点是受外层元素的宽度影响而换行（该元素不需要设置相对定位）。

　　块级元素，上下边界会重合，以数值较大一方为基准。浮动的块级元素不会有此问题。块级元素不能为内联元素的子元素。

　　内联元素，行与行之间的距离不受边界和填充的影响。不过，内联元素也是盒子，也有边距、填充、边框，只是变现得有点“反常”。

　　边界值可为负，填充值不可为负。

　　下节准备补习：浏览器模式(怪癖模式、标准模式、准标准模式)

笔记：文字排版行缩进

heluyao — Wed, 10 Mar 2010 09:50:20 +0000

做个笔记，具体实现效果看下面图片，偶不知如何用语言来描述了。具体原理偶也说不清了，反正能解决了问题就是王道。

text-indent: -12pt; margin-left: 12pt;

具体数值是随行内缩进的距离变动的，上图的距离需要12pt，距离越远数值也就跟随着越大，反之，亦然。

利用li配合list-style-type的decimal来实现固然简单，但是如果需要复制文字再粘贴后保留前面数值，那么就…

不规则形状导航

heluyao — Wed, 18 Nov 2009 07:40:19 +0000

这样的导航看起来挺复杂，做起来其实挺简单，只是IE6要用到滤镜来确保PNG的透明。万恶的IE6啊！

这里还用到inline-block，IE不支持inline-block，hack给inline，IE6下给定zoom也能解决，再利用负方向的margin值将透明部位重叠。

关键css:

display:inline-block; *display:inline; zoom:1; margin-left:-37px;

预览效果：不规则的导航条

下载文件：点击下载

利用css中transform属性实现3d

heluyao — Thu, 16 Jul 2009 06:02:36 +0000

先上PP，容易明白此文内容。

不需要用到脚本(js)，仅css中transform属性(firefox文档, safari文档)，适当设置“值”，就能实现很酷的3d效果。

浏览器支持：Safari 3.2+, Google Chrome, Firefox 3.5+

基本是个华而无实的效果了，呵呵！玩玩还是不错的！

html：

<div class="cube">
   <div class="topFace">
   <div>Contentdiv>
   div>
   <div class="leftFace">Contentdiv>
   <div class="rightFace">Contentdiv>
div>

css：

.cube {position: relative;top: 200px;}
.rightFace,.leftFace,.topFace div {
   padding: 10px;
   width: 180px;
   height: 180px;
}
.rightFace,.leftFace,.topFace {
   position: absolute;
}
.leftFace {
   -webkit-transform: skewY(30deg);
   -moz-transform: skewY(30deg);
   background-color: #ccc;
}
.rightFace {
   -webkit-transform: skewY(-30deg);
   -moz-transform: skewY(-30deg);
   background-color: #ddd;
   left: 200px;
}
.topFace div {
   -webkit-transform: skewY(-30deg) scaleY(1.16);
   -moz-transform: skewY(-30deg) scaleY(1.16);
   background-color: #eee;
   font-size: 0.862em;
}
.topFace {
   -webkit-transform: rotate(60deg);
   -moz-transform: rotate(60deg);
   top: -158px;
   left: 100px;
}

看个例子：

3d演示文档 – 注意：Safari 3.2+, Google Chrome, Firefox 3.5+才能显示正确效果

本来出处：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/

CSS3来啦！做点笔记

heluyao — Thu, 18 Jun 2009 08:50:40 +0000

首先在前端开发的角度BS一下IE8，说什么支持CSS3，现在看来，前端开发的同鞋们还得等IE9，甚至可能IE10！因为大部分它还是没有支持，不过还是有个“安慰奖”滴！

CSS3是个好东西，能支持它的浏览器都是好样的！Safari, Firefox, Opera(支持部分)。好久没做笔记了！

note:

这个css的升级，着实是帮了前端人员不小的“忙”，可惜的是浏览器们没赶上！不过，众多新加的功能中，个人认为真正有实用价值的也没几个！最有用的，当属“圆角(radius)”，其次“阴影(shadow)”、背景图像大小及数量(多背景)、嵌入字体(洋文的可能用得上)、透明度(opacity)、rgba等效果,剩下的就基本是华而无实了！最重要的，现在IE7、IE8都还和它们没“混熟”，默默期待吧！

笔记：CSS Selector

heluyao — Wed, 18 Feb 2009 04:06:27 +0000

这些CSS Selector，目前可能还不适合用在实际项目中。但是将来是肯定能开创一片天地的。只要IE6“倒下”！

CSS2：除IE6外当前主流浏览器都是支持滴！
A > B 匹配A的子元素B
A:first-child 匹配父元素的第一个子元素是A的A
A + B 匹配紧贴着A后面的B
A[property] 匹配含property属性的A
A[property="warning"] 匹配property属性完全等于warning的A(注意“完全等于”)
E[property~="warnging"] 匹配property属性包含warning的A(仅“包含”)

CSS3
A ~ B 匹配A以后的所有B，IE6不支持
A:empty 匹配空元素A，IE6、IE7不支持

详细请进：W3C Specification on CSS3 Selectors

CSS或js实现行间交替背景色效果

heluyao — Wed, 24 Sep 2008 07:48:45 +0000

　　本文介绍两种方法，都挺简单的，略懂前端的同志们都应该能理解的。

1.利用CSS控制行的属性：

下载: code.html

<style type="text/css">
ul { list-style:none; font-size:12px; line-height:20px; color:#666;}
ul li{background-color: expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');}
style>
<ul class="myul1">
<li>·河北作协副主席：我要给韩寒当爹真相li>
<li>·易建联：在美国去超市没有被认出来li>
<li>·徐友渔：买到假药举报无门的亲身经历li>
<li>·航天员如何在太空中吃饭上厕所(图) li>
<li>·90后大学生艳装军训雷晕教官(图)li>
<li>·北京报纸涨价便宜了谁li>
<li>·河北作协副主席：我要给韩寒当爹真相li>
<li>·易建联：在美国去超市没有被认出来li>
<li>·徐友渔：买到假药举报无门的亲身经历li>
<li>·航天员如何在太空中吃饭上厕所(图) li>
<li>·90后大学生艳装军训雷晕教官(图)li>
<li>·北京报纸涨价便宜了谁li>
ul>

　　通过判断奇偶数来确定li的背景颜色，很简单吧！

2.利用JS控制各行的交替背景。

下载: code2.html

<style type="text/css">
ul { list-style:none; color:#666; font-size:12px;}
.li01 { background:#EAF8FD; }
.li02 { background:#fff; }
style>
<ul id="list01">
<li>·河北作协副主席：我要给韩寒当爹真相li>
<li>·易建联：在美国去超市没有被认出来li>
<li>·徐友渔：买到假药举报无门的亲身经历li>
<li>·航天员如何在太空中吃饭上厕所(图) li>
<li>·90后大学生艳装军训雷晕教官(图)li>
<li>·北京报纸涨价便宜了谁li>
<li>·河北作协副主席：我要给韩寒当爹真相li>
<li>·易建联：在美国去超市没有被认出来li>
<li>·徐友渔：买到假药举报无门的亲身经历li>
<li>·航天员如何在太空中吃饭上厕所(图) li>
<li>·90后大学生艳装军训雷晕教官(图)li>
<li>·北京报纸涨价便宜了谁li>
ul>
<Script type="text/javascript">
objName=document.getElementById("list01").getElementsByTagName("li");
for (i=0;i<objName.length;i++){
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
Script>

　　两个方法都不错哦！值得推荐的！