Lucifr换上新logo [CSS]

// 2008年06月22日 // 絮絮叨叨 // 14条留言 »

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

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

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

下载: logo.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%的鼠标移到上面后就有变亮了的效果了*/
}
分享或收藏本文：
  • Twitter
  • Buzz
  • Google Bookmarks
  • del.icio.us
  • 收藏到鲜果
  • QQ书签
  • 豆瓣九点
  • 豆瓣
  • 新浪微博
  • 人人网
  • 开心网
  • DigLog
  • 百度搜藏
  • Live
  • Yahoo! Bookmarks
  • Tumblr
  • Facebook
  • Add to favorites
  • email

相关文章

推荐文章

“Lucifr换上新logo [CSS]”已被14人占领

  1. Yacca 童鞋说：

    2008年06月22日16点13分

    牛逼的…我图简单 直接一张图…

    回复

    Lucifr 童鞋回复说:

    Yacca的新Logo也很漂亮，其实设置这样的效果也不是很难，yacca也可以试试看效果

    回复

  2. Black-Xstar 童鞋说：

    2008年06月22日19点15分

    漂亮，我没有logo。

    回复

    Lucifr 童鞋回复说:

    Black-Xstar是用大字体加上负数的letter-spacing做出的效果啊，学了一招！

    回复

    Black-Xstar 童鞋回复说:

    在这个不是我弄得，是主题自带的
    作者是underone，呵呵

    话说我不是很会CSS+DIV的……

    回复

    Lucifr 童鞋回复说:

    我也是一知半解的，离了firebug的话什么都做不了

    回复

  3. schuen 童鞋说：

    2008年06月23日01点48分

    很好看的logo呢

    回复

    Lucifr 童鞋回复说:

    谢谢，呵呵~~

    回复

  4. 小墨 童鞋说：

    2008年06月23日10点11分

    我跟yacca一样，直接弄张图了~呵呵~

    回复

    Lucifr 童鞋回复说:

    小墨的网站也是简约风格的，关键还是内容~

    回复

  5. 路过的骗子 童鞋说：

    2008年06月23日13点51分

    订阅地址在哪里呢？没找到啊

    回复

    Lucifr 童鞋回复说:

    不好意思，IE下有些问题，顶部的订阅栏没显示出来。还在修改。请先用这个地址订阅吧:
    http://feed.feedsky.com/lucifr

    回复

  6. anliu 童鞋说：

    2008年06月24日23点23分

    还说一窍不通,这么懂了,不过我试了你的LOGO没有变亮效果,不知道是不是浏览器的原因,我用的IE

    回复

    Lucifr 童鞋回复说:

    我不懂的或是一知半解的太多了，这篇里的css代码原来发表时也有瑕玼，谦虚一些总是好的。

    是浏览器的问题，在Opera和Firefox里应该都没问题，IE is a pain ass…TOT

    回复

留句话再走？

Spam Protection by WP-SpamFree

↑