01/10/2005

通过CSS定义控制Flickr的显示效果

Post @ 11:15 in 样式设计 - CSS

css-flickr.jpg
Flickr提供了一个叫Flickr Badge的功能，通过嵌入javascript将Flickr中的图片方便的显示在自己的Blog或网站上。这也是Blogger们喜欢的功能，不过Flickr默认的几种显示效果都不太好，我通过CSS重新进行了定义，缩小了图片显示的尺寸并增加了半透明效果，设置如下：（效果见下面）。


首先在Flickr Badge获得javascript代码并添加到页面html中，并添加CSS DIV "flickrimg"：（注意：下面的代码设置图片显示数目为8，raw=1）

<div class="flickrimg"> <script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=44124380209@N01&count=8&display=latest&name=0& size=square&raw=1"></script> </div>

在CSS文件中添加对"flickrimg"的定义：


div.flickrimg {
margin: 10px;
}

div.flickrimg a {
float: left;
padding: 0;
margin: 0 5px 5px 0;
opacity: .5;
}

div.flickrimg a:hover {
opacity: 1;
border: none;
}

div.flickrimg a img {
height: 40px;
width: 40px;
}

其中"div.flickrimg"控制容器的位置，边距，"div.flickring a img"控制图片大小。可根据自己的需要修改。按照上面的方法便能随心所欲的控制Flickr显示效果和半透明效果，效果如下：

 

Comment guidelines


TrackBack

TrackBack URL for this entry:
http://blog.timetide.net/cgi-bin/mt/mt-tb.cgi/825