智能晾衣杆_晾衣绳社交书签–仅CSS的社交书签教程

智能晾衣杆

View demo 查看演示 Download Source 下载源

Today we will create a fancy social bookmarking solution which will not require any JavaScript – it is only CSS based.

今天，我们将创建一个精美的社交书签解决方案，它不需要任何JavaScript –仅基于CSS。

We will hang up some rotated social bookmark icons on a clothesline and put a cute Tweetie sitting on top of it. This will just be an example and, of course, you are encouraged to add the social bookmarks that you find relevant to your page. This solution is just a showcase and might be way too big for some tastes.

我们将在晾衣绳上挂起一些旋转的社会书签图标，并在其顶部放一个可爱的Tweetie。 这仅是示例，当然，我们鼓励您添加与页面相关的社交书签。 该解决方案只是一个展示，可能对于某些口味来说太大了。

In this tutorial you will learn about

在本教程中，您将学习

1. absolute positioning of elements
   元素的绝对定位
2. using background images
   使用背景图片
3. using negative positioning values
   使用负定位值
4. social bookmark links for static pages and for WordPress
   静态页面和WordPress的社交书签链接

Ok, let’s start with the markup.

好的，让我们从标记开始。

1. HTML (1. The HTML)

The Markup will consist of a div that contains the social bookmark icons as links. Each link will have a span inside which will be the clothes pin “holding” the icon. Additionally, the main div will contain a div for the clothesline itself:

标记将由一个div组成，该div包含社交书签图标作为链接。 每个链接内部都有一个跨度，该跨度将是“固定”该图标的晾衣夹。 此外，主div将包含晾衣绳本身的div：

<div class="cl_container">
	<div class="cl"></div>
	<a class="digg" href="http://digg.com/submit?phase=2&url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>
	<a class="tech" href="http://www.technorati.com/faves?add=http://http://www.tympanus.net/Clothesline_Tutorial/"><span></span></a>
	<a class="mixx" href="http://www.mixx.com/submit?page_url=http://http://www.tympanus.net/Clothesline_Tutorial/"><span></span></a>
	<a class="stumble" href="http://www.stumbleupon.com/submit?url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>
	<a class="reddit" href="http://reddit.com/submit?url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>
	<a class="twitter" href="http://twitthis.com/twit?url=http://http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"></a>
</div>

The links are all specific for the according service and usually it is required to provide the URL and the title of the website. In this case, we provided static information. If you want to contact the services from you WordPress blog, you can add some PHP code to dynamically set the URL and title of the article that you are posting. For that, you will need to replace the URL and, if needed, the title with the PHP function that provides the URL and title of the article:

这些链接都是特定于相应服务的，通常需要提供URL和网站标题。 在这种情况下，我们提供了静态信息。 如果要从WordPress博客联系服务，则可以添加一些PHP代码来动态设置要发布的文章的URL和标题。 为此，您将需要用提供URL和文章标题PHP函数替换URL，并在需要时替换标题：

• URL: <?php echo get_permalink() ?>

  网址： <?php echo get_permalink() ?>

• Title: <?php the_title(); ?>

  标题： <?php the_title(); ?> <?php the_title(); ?>

You can use a service like iFeedReaders to create all the links for you.

您可以使用iFeedReaders之类的服务来为您创建所有链接。

2. CSS (2. The CSS)

The main container will have relative positioning because we want to be able to use it somewhere on a webpage:

主容器将具有相对位置，因为我们希望能够在网页上的某处使用它：

.cl_container{
	width:100%;
	height:190px;
	position:relative;
	background:transparent url(../images/cl.png) repeat-x 0% 40px;
}

The container will have a repeated background image which will be the clothesline. The horizontal position shall be 0 which means that it will be left and the vertical position will be 40px which means that the image will be 40px from the top. Now, we will define the link elements and all their common properties:

容器将具有重复的背景图像，该图像将成为晾衣绳。 水平位置应为0，这意味着它将向左，垂直位置为40px，这意味着图像将从顶部开始为40px。 现在，我们将定义链接元素及其所有公共属性：

.cl_container a{
	width:130px;
	height:130px;
	position:absolute;
	top:32px;
	outline:none;
	opacity:0.8;
}
.cl_container a:hover{
	opacity:1.0
}

The width and height of the elements should be the size of the images that you are using. These ones are pretty big. The top position will be 32px since we want the icons to look like they are attached to the clothesline. Only for the cool browsers we say that the opacity is 0.8 initially and 1.0 when hovering. This will create a neat effect. (You might as well use this filter property for IE: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80), if you really really need to…)

元素的宽度和高度应为所使用图像的大小。 这些很大。 顶部位置为32像素，因为我们希望图标看起来像是附加在晾衣绳上的样子。 仅对于出色的浏览器，我们说的不透明度最初是0.8，而悬停时是1.0。 这将产生整洁的效果。 (如果确实需要，最好将这个过滤器属性用于IE：filter：progid：DXImageTransform.Microsoft.Alpha(opacity = 80)。)

The icons will have the following properties:

图标将具有以下属性：

a.digg{
	left:22px;
	background:transparent url(../images/digg_koi.png) no-repeat top left;
}
/* each around plus 168px*/
a.tech{
	left:190px;
	background:transparent url(../images/technorati_koi.png) no-repeat top left;
}
a.mixx{
	left:359px;
	background:transparent url(../images/mixx_koi.png) no-repeat top left;
}
a.reddit{
	left:529px;
	background:transparent url(../images/reddit_koi.png) no-repeat top left;
}
a.stumble{
	left:698px;
	background:transparent url(../images/stumble_koi.png) no-repeat top left;
}

And the pin (which is the span inside of the link elements) will have the following style:

引脚(链接元素内部的跨度)将具有以下样式：

.cl_container a span{
	width:17px;
	height:44px;
	position:absolute;
	background:transparent url(../images/pin.png) no-repeat top left;
	top:-20px;
	left:55px;
}

We need to position the pin in the middle of the surrounding link element which is 130 pixels wide and so we set left to 55px. Since we positioned the clothesline image in the middle of the main container, we need to pull the pins “up”. We do that by giving a negative top value of -22px. Of course, we could have positioned the whole main container differently and avoid using this negative value now, but it shows how you can simply use negative values when it comes in handy. In other scenarios you can profit of negative margins and positioning because, instead of moving more elements around, you can adjust just one single element by giving it a negative positioning or margin.

我们需要将图钉放置在周围链接元素的中间，该元素的宽度为130像素，因此将其设置为55px。 由于我们将晾衣绳图像放置在主容器的中间，因此我们需要将销钉“向上”拉出。 我们通过给出负的-22px最大值来做到这一点。 当然，我们可以以不同的方式放置整个主容器，现在避免使用此负值，但是它显示了如何在方便时简单地使用负值。 在其他情况下，您可以从负边距和定位中获利，这是因为您无需向周围移动更多元素，而是可以通过给它一个负定位或边距来调整单个元素。

And last, but not least, we add the style of cute Tweetie:

最后但同样重要的是，我们添加了可爱的Tweetie样式：

a.twitter{
        left:800px;
	width:160px;
	height:160px;
	top:-85px;
	background:transparent url(../images/twitter.png) no-repeat top left;
}

The Twitter bird needs to be pulled up in order to make it look like he sits on top of the rope. So, we say top:-85px.

Twitter鸟需要拉起才能使其看起来像坐在绳子上一样。 因此，我们说top：-85px。

And that’s it!

就是这样！

The resources for this tutorial can be found here:

本教程的资源可以在这里找到：

• The clothesline pins and the idea for the clothesline: http://dragonartz.wordpress.com/2008/10/29/polaroid-frames-vector-set/

  晾衣绳针脚和晾衣绳的想法： http : //dragonartz.wordpress.com/2008/10/29/polaroid-frames-vector-set/

• The iconpack by Koi Design on DeviantArt: http://koidesign.deviantart.com/art/koidesign-social-icon-pack-135276528

  Koi Design在DeviantArt上的图标包： http ://koidesign.deviantart.com/art/koidesign-social-icon-pack-135276528

• The Twitter bird by talented Gopal Raju: http://www.productivedreams.com/free-twitter-bird-icon-set/

  才华横溢的Gopal Raju创作的Twitter鸟： http ： //www.productivedreams.com/free-twitter-bird-icon-set/

Please get the icon sets there since I am not allowed to redistribute them like this (I cannot provide them in the downloadable zip file).

请在那里获得图标集，因为不允许我像这样重新分发它们(我无法在可下载的zip文件中提供它们)。

Happy new year and enojy!!!

新年快乐，enojy！

翻译自: https://tympanus.net/codrops/2010/01/02/clothesline-social-bookmarking/

智能晾衣杆