Lucifr换上新logo [CSS]

上次做logo还是改tarski那个模板的时候,对设计一窍不通的lucifr来说真是头大。新的logo也是差强人意。先凑合着用吧。

用到的两个字体都是免费的,“lucifr”和“beta”都用的是Anivers regular,后面的小字部分用的是Delicious bold&italic。

有的网站加logo就直接写到header里,用<img>标签,lucifr还是喜欢写到css里,弄成背景图片,鼠标hover之后有个变亮的效果,实际上就是用两张图片,一张上相应元素的透明度调至50%。所用的CSS如下:

#logo a {
background:transparent url(../images/logo_3.gif) no-repeat scroll 0pt 50%; /*这里的logo_3.gif用的是透明度50%的那张*/
border:medium none;
color:transparent !important; /*把原本文字变成透明,似乎只有ff3支持这个transparent,所以还要用到下面的这个*/
text-indent:-999999px;/*用了这个,在IE和Opera里文字就不会显示出来啦*/
display:block; /*block显示,这样就能定义大小了*/
font-size:73px; /*字体可以设大一些,点击logo的时候就能回到主页了*/
height:78px;
width:370px;
}

#logo a:hover {
background:transparent url(../images/logo_2.gif) no-repeat scroll 0pt 50%; /*这里的logo_2.gif用透明度100%的鼠标移到上面后就有变亮了的效果了*/
}

Lucifr

Read more posts by this author.

Beijing, China http://lucifr.com