CSS3 制作按钮

最近在学习CSS3,利用CSS3的text-shadow/box-shadow/border-radius和background gradient 属性就可以写出很多漂亮的图案,减少图片加载的时间。

自己试着写了一个简单的小按钮:

设计图如下:

button_design

效果:

See the case study

代码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<a id="css_button" href="#">See the case study </a>

圆角和圆形靠border-radius实现,渐变的背景色依靠background gradient,三角形则依靠border来实现。

a标签需要有block属性,否则IE下的背景渐变无法显示。IE下效果的确不如FF、Chrome。

 

按钮的设计参考http://ohmedia.ca/这一网站。

 

twitter 框架资源

文档:

http://wrongwaycn.github.com/bootstrap/docs/index.html

表单设计器:

http://bootstrap-forms.heroku.com/

拖拽表单元素,修改默认值,组成表单,生成代码。

资源整合:

http://www.dedecms.com/knowledge/web-based/html/2012/1129/17106.html

例:http://exacttarget.github.com/fuelux/

http://gregfranko.com/jquery.selectBoxIt.js/?buffer_share=d9cb8

http://exacttarget.github.com/fuelux/#pillbox

http://arthurgouveia.com/prettyCheckable/

 

photoshop制作星星闪烁动画

这里主要记录动画的部分哦,下载笔刷和新建画布的部分就不说了。

前段时间想在自己的页面里做一个星星闪烁的动画,网上找了一下, 有很多类似的教程,很多讲得非常详细,我这里记录一下自己制作过程遇到的问题和一些关键点。

1.下载星星笔刷,新建一个300×300的画布,拉了一个黑白的渐变做背景色并且画上星星。

新建画布

新建画布

2.打开动画面板,并且保证动画面板处于帧动画模式。

打开动画面板

打开动画面板

3.新建一个帧,把星星的透明度调成40%,当然这个值可以根据自己的需要调整。

新建帧

新建帧

4.当点击播放的时候,基本的动画已经有了,但是这个动画是没有过渡的,接下来要创建过渡。注意设置的值,要添加的帧的值根据需要修改,数字越大,动画的速度越慢

创建过渡

创建过渡

5.选中最后的一帧,再按一下动画过渡帧按钮,设置过渡为第一帧。动画就可以从头到尾平缓地过渡了。动画做好后ctrl+shift+alt+s储存为web所用格式,选gif格式。

最后一个过渡

最后一个过渡

6.效果图:

star

star

 

做星星闪烁的效果需要注意一点,因为图像保存为GIF格式,质量会下降,有时甚至到了没法用的地步。例如,如果一个透明背景的PNG格式图片或是一个透明背景的图层用来修改透明度实现动画,导出的gif图片上的星星会像素化,变成颗粒状,非常不自然。所以建议制作时做一个完整的带背景的图片。

像素化

像素化

jquery实现的mouseover效果

虽然CSS很容易实现a标签以及其他标签的mouseover效果,用:hover这个伪类就可以,但是工作当中发现还是有不方便之处,先不说IE6不支持除了a标签的伪类,如果一个网站很多个页面,并且每个页面上有很多个按钮需要mouseover的效果,那么需要写很多次css。

后来朋友给写了一个jquery插件,直接调用就可以实现mouseover,可用在html各种标签上。

插件代码:

(function($){
    $.fn.overButton = function() {
        return this.each(function(){
            var over_height = $(this).height();
            var over_img =  $(this).css('background-image') != 'none'?$(this).css('background-image')+' no-repeat':'url('+$(this).attr('over-img')+') no-repeat'
            $(this).css({
                height:over_height,
                background:over_img
            }).hover(function(){
                $(this).css({
                    backgroundPosition:'0 -' + over_height + 'px'
                });
            },function(){
                $(this).css({
                    backgroundPosition:'0 0'
                });
            });
        });
    }
})(jQuery);

只要给需要效果的元素上加一个 class=”hover”, 调用方法:

$(function(){
	$(".hover").overButton();
})

控制导航条随滚动条固定于页面顶部 javascript

导航栏随着滚动条的滚动,固定浮于页面顶部:

divFix:
function fixDiv(div_id,offsetTop){var offsetTop=arguments[1]?arguments
[1]:0;var Obj=$(‘#’+div_id);var ObjTop=Obj.offset().top;var
isIE6=$.browser.msie && $.browser.version == ’6.0′;if(isIE6)
{$(window).scroll(function(){if($(window).scrollTop()<=ObjTop){Obj.css
({‘position’:’relative’,’top’:0});}else{Obj.css
({‘position’:’absolute’,’top’:$(window).scrollTop()+offsetTop+’px’,’z-
index’:1});}});}else{$(window).scroll(function(){if
($(window).scrollTop()<=ObjTop){Obj.css
({‘position’:’relative’,’top’:0});}else{Obj.css
({‘position’:’fixed’,’top’:0+offsetTop+’px’,’z-index’:1});}});}

前端笔记

HTML:

1.html5声明:<!DOCTYPE HTML>

2.flash背景透明:

火狐:在embed标签中,添加属性wmode=”Transparent”

IE:在object标签中间,添加<param name=”wmode” value=”Transparent” />

3.html标签<marquee></marquee>可以实现字幕滚动。

完整:<marquee id=”affiche” align=”left” behavior=”scroll”
bgcolor=”#FF0000″ direction=”up” height=”300″ width=”200″ hspace=”50″
vspace=”20″ loop=”-1″ scrollamount=”10″ scrolldelay=”100″
onMouseOut=”this.start()” onMouseOver=”this.stop()”>

4.有两次发现IE浏览器下文档模式总是被解析成杂项,今揪出凶手,原来是页面
头部的声明多了一些没有用的东西,这些东西即使被注释掉也会影响整个页面。

 

CSS:

1.text-shadow:

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[
颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]…或者text-
shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X
Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…例:text-shadow: 0
1px 1px #fff;

2.背景线性渐变:

内核类型写法Webkit(Chrome/Safari):-webkit-linear-gradient()/-webkit-
gradient();

Gecko(Firefox):-moz-linear-gradient();

Presto(Opera):-o-linear-gradient();

Trident(IE):-ms-linear-gradient();

W3Clinear-gradient()

IE:

filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#fafafa’,endColorstr=’#eaeaea’);

例:

background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient
(linear,center top,center bottom,from(#fff),to(#333));background:-
webkit-linear-gradient(#fff,#333);background:-o-linear-gradient
(#fff,#333);background:-ms-linear-gradient
(#fff,#333);background:linear-gradient(#fff,#333);

全:

background:linear-gradient(bottom,#ccc 0,#f0f0f0
100%);background:-o-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-moz-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-webkit-
linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-ms-linear-gradient
(bottom,#ccc 0,#f0f0f0 100%);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#f0f0f0′,endColorstr=’#cccccc’)

3.IE6下line-height属性失效是由于文字中包含img、input、select、textarea
、button、object等标记造成的。

给与文字相连接的img、input、textarea、select、object等元素加以css样式:
margin: (所属line-height-自身高度)/2px 0;
vertical-align:middle;

4.css雪碧在线制作网站

css sprite: http://css-sprit.es/

5.a标签伪类顺序:

a:link {color: #000;}
a:visited {color: #F00;}
a:hover{color: #0F0;}
a:active {color: #00F;}

顺序不正确有可能会导致设置失效。

6.css3.0 对象旋转属性:

-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

-moz-transition:all 0.2s ease-in-out 0s (设置旋转方式和时间)

7.IE6 IE7下,当父元素的直接子元素或者下级子元素的样式拥有
position:relative属性时,父元素的overflow:hidden属性就会失效。只要给父级元素添加position:relative即可。

8.IE6下,<b>最新时评</b>用text-indent:-999em把文
字隐掉,b设置为display:block,height:20px;还需要定line-height:20px; 否
则,b的高度以默认行高计算,不受height的影响。(标签内必须有文字,否者
line-height也会失效)

9.IE6下绝对定位的div无法遮盖select解决办法:

在需要遮盖select的那个div放入一个空的iframe:
<div><!–[if lte IE 6]><iframe></iframe><![endif]–></div>
iframe样式:
iframe{

display:none;
display:block;
position:absolute;
top:0;
left:0;
z-index:-1;
width:3000px;
height:3000px;
}

10.设置阴影:

box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow属性至多有6个参数设置,他们分别取值:
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如
果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为
“inset”时,其投影就是内阴影;
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,
则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对
象的底部,反之其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴
影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延
展扩大,反之值为负值是,则缩小
阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览
器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就
是透明,建议不要省略此参数。

仅兼容:IE9 firefox3.5 chrome2.0 opera10.6 safari4

11.IE6浮动产生双边距的问题,在浮动元素的css里加display:inline即可解决。

12.当给浮动元素的父级div设置overflow:hidden时,IE6下是不起作用的,因为
IE6下必须有固定高度宽度这一属性才会起作用,需要给元素添加height:100%即
可!

13.display:inline-table;
子元素浮动,父级元素闭合,避免overflow:hidden造成的子元素浮出父级时被隐
藏。
#main { width:700px;display:inline-table ;position:relative;
top:20px;left:300px;}
#main #left {width:233px;float:left;position:relative;top:0;left:-
230px;}
#main #right { float:left;width:428px;position:relative;top:0px;left:-
230px;}
<div id=”main”>
<div id=”left”></div>
<div id=”right”></div>
</div>
14.IE6中PNG格式图片不能显示透明背景,改用GIF透明背景图。
15.color:red; /* 所有浏览器都支持 */

color:red !important;/* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red;/*IE7支持*/
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8、IE9支持 */
color:red\0; /* IE8、IE9支持 */
color:red\9\0;/*IE9支持*/

/* webkit and opera */
@media all and (min-width: 0px){ div{color:red;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-
webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
@-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest
firefox */
}

/*针对safari 3+, chrome 1+, opera9+, ff 3.5+浏览器*/
body:nth-of-type(1)div { color:red;}?9;
<!–[if lt IE 7 ]> <html> <![endif]–>
<!–[if IE 7 ]> <html> <![endif]–>
<!–[if IE 8 ]> <html> <![endif]–>
<!–[if IE 9 ]> <html> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html> <!–<![endif]–>
<!?[if IE 7]> = 等于 IE7

<!?[if lt IE 8]> = 小于 IE8(就是 IE7 或以下了啦)

<!?[if gte IE 8]> = 大于或等于 IE8

<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了

16.
Chrome和Safari中,li一定要定宽度,否则无法浮动。
IE6中的li边框无法显示。

17.一直对同一行里的两个部分左右分开难以驾驭。
a: 用一个标题标签(h1、h2…),里面放一个p标签,一个span标签,两个左右
浮动;

18.设置背景透明度:
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
19.当<li><a href=”#”></a></li>浮动,overflow:hidden不起作用,要隐藏溢出
的内容,先定li宽和高,a标签display block,li标签white-space:nowrap;
display:block;/*内联对象需加*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与
overflow:hidden;一起使用。*/
text-overflow:clip/*不显示省略标记*/

20.当h标签内有a标签和其他元素,图片直接放在a标签里,会导致其他元素无法垂
直居中,可以将图片设置为a标签的背景,设定好a标签的宽高,display:inline
-block;

21.css写边框圆角:
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-radius表示所有的角;但是IE8及以下版本都不支持

22.今天才发现,a标签display设为block是可以只设高度不设宽度的,好了,以
后导航mouseover的效果不用纠结了

23.CSS解压缩:http://tool.lu/css/

24. css设置英文全部大写:text-transform:uppercase;

全部小写:text-transform: lowercase

首字母大写:text-transform:capitalize

25.简单的清除链接虚线框的办法:

a:focus{ outline:none;}

不过这种办法兼容性不是很好

JAVASCRIPT

1.弹出框背景宽高度控制
$(“#popup_mask”).css({
“width” : $(document).width(),
“height”: $(document).height(),
opacity:0.5
}).show();

2. js获取当前时间

<SCRIPT LANGUAGE=”JavaScript”> <!–var now= new Date();var
year=now.getYear();var month=now.getMonth()+1;var day=now.getDate();var
hour=now.getHours();var minute=now.getMinutes();var
second=now.getSeconds(); alert(year+”-“+month+”-“+day+”
“+hour+”:”+”:”+minute+”:”+second); –> </SCRIPT>
23.js代码压缩工具:http://javascriptcompressor.com/,css代码压缩工具:
http://www.csscompressor.com/

3.在文本输入栏中,如果加入了提示,加入onMouseOver=”this.focus

()”onFocus=”this.select()” 可以直接选中提示文本:

<textarea name=textarea wrap=virtual rows=2
cols=22onMouseOver=”this.focus()” onFocus=”this.select()”>站长之家
www.chinaz.com</textarea>

鼠标移入提示文字消失:<input type=text name=”address” size=19value=”站
长之家 www.chinaz.com”onFocus=”this.value=””>