<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>菠萝筐 &#187; CSS</title>
	<atom:link href="http://www.blook.org.cn/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.blook.org.cn</link>
	<description>网罗网络精华</description>
	<lastBuildDate>Tue, 17 Jan 2012 02:39:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>30个精选的CSS技术和实例</title>
		<link>http://www.blook.org.cn/30-css-techniques-and-examples/</link>
		<comments>http://www.blook.org.cn/30-css-techniques-and-examples/#comments</comments>
		<pubDate>Sat, 30 Jan 2010 01:00:24 +0000</pubDate>
		<dc:creator>carlgreat</dc:creator>
				<category><![CDATA[技术荟萃]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.blook.org.cn/?p=1114</guid>
		<description><![CDATA[1.Hoverbox 图片集 一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。 2.高级CSS菜单 一款很有创意且复杂的CSS导航方案。 3.滑动影集 手风琴效果的影集，悬停便可拉伸图片。 4.Lightbox幻灯片 题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。 5.图片的阴影效果 在A List Apart上的一个关于图片效果Demo的讨论文章“CSS Drop shadows“. 6.跨浏览器多页式影集 悬停标签改变分类，悬停缩略图显示放大图。 7.CSS照片放大 使用简单的图片和background-position属性来进行调解。 8.CSS gallery layout—smells like a table 模仿表格布局，但使用的是列表。图集是流式宽度。 9.Sticky Footer 仅使用了很少XHTML的静态页脚。 10.whatever: hover 模仿Windows开始菜单的CSS导航菜单。 11.纯CSS手风琴效果 使用div和:hover伪类的手风琴效果，这个效果可以垂直显示也可以水平显示。 12.使用PNG和背景色的可扩展按钮 13.Pushbutton Links 链接在不使用图片的情况下看起来像个按钮。 14.含固定Header的可卷动表格 表格的标题被固定的优秀长表格。 15.CSS内容遮盖 当你悬停在图片上时，div容器会显示更多文字。 16.CSS样式表格版本2 一个使用背景图片且非常漂亮，被语义化标记的表格。 17.PNG遮盖 另一种为图片添加圆角的方法。（圆角、边框、阴影） 18.利用CSS为超链接添加提示 关于为不同类型的链接添加图标的简单教程。 19.简单的CSS圆角边框 仅适用了一张图片和很少的几行代码及标记。 20.Sitemap Celebration [...]]]></description>
			<content:encoded><![CDATA[<h3>1.<a title="Hoverbox Image Gallery" href="http://sonspring.com/journal/hoverbox-image-gallery">Hoverbox 图片集</a></h3>
<p>一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。<br />
<a href="http://host.sonspring.com/hoverbox/" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090026ezP.jpg" alt="CSS-实例" width="270" height="108" /></a></p>
<h3>2.<a href="http://www.webdesignerwall.com/tutorials/advanced-css-menu/" target="_blank">高级CSS菜单</a></h3>
<p>一款很有创意且复杂的CSS导航方案。<br />
<a href="http://www.webdesignerwall.com/tutorials/advanced-css-menu/" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090027p8f.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>3.<a href="http://www.cssplay.co.uk/menu/gallery3l" target="_blank">滑动影集</a></h3>
<p>手风琴效果的影集，悬停便可拉伸图片。<br />
<a href="http://www.cssplay.co.uk/menu/gallery3l" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090027yce.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3><span style="text-decoration: line-through;">4.<a title="Bite Size Standards - Supercharge your image borders" href="http://bitesizestandards.com/bites/supercharge-your-image-borders">Lightbox幻灯片</a></span></h3>
<p>题为”<a title="Supercharge your image borders" href="http://bitesizestandards.com/bites/supercharge-your-image-borders">Supercharge your image borders</a>“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。<br />
<a href="http://bitesizestandards.com/files/97/index.html#c" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/0900281oN.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>5.<a href="http://www.wubbleyew.com/tests/dropshadows.htm" target="_blank">图片的阴影效果</a></h3>
<p>在A List Apart上的一个关于图片效果Demo的讨论文章“<a title="A List Apart - CSS Drop shadows" href="http://www.alistapart.com/articles/cssdropshadows/">CSS Drop shadows</a>“.<br />
<a href="http://www.wubbleyew.com/tests/dropshadows.htm" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090029PeO.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>6.<a title=" CSSplay - Cross Browser Multi Page Photograph Gallery" href="http://www.cssplay.co.uk/menu/lightbox.html#Portraits">跨浏览器多页式影集</a></h3>
<p>悬停标签改变分类，悬停缩略图显示放大图。<br />
<a href="http://www.cssplay.co.uk/menu/lightbox.html#Portraits" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090030vT2.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>7.<a href="http://www.simplebits.com/notebook/2003/08/22/css_photo_zoom.html" target="_blank">CSS照片放大</a></h3>
<p>使用简单的图片和background-position属性来进行调解。<br />
<a href="http://www.simplebits.com/bits/photo_zoom.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090030NS5.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3><span style="text-decoration: line-through;">8.<a title="Dnevnik eklektika - CSS gallery layout—smells like a table" href="http://dnevnikeklektika.com/en/css-gallery-layout-en">CSS gallery layout—smells like a table</a></span></h3>
<p>模仿表格布局，但使用的是列表。图集是流式宽度。<br />
<a href="http://dnevnikeklektika.com/css/en-gallery/" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090031MyQ.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>9.<a title="Ryan Fait - Make a Footer Stick to the Bottom of the Page" href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/">Sticky Footer</a></h3>
<p>仅使用了很少XHTML的静态页脚。<br />
<img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090032KEM.gif" alt="CSS-实例" width="450" height="180" /></p>
<h3>10.<a title=" hover" href="http://www.xs4all.nl/%7Epeterned/csshover.html">whatever: hover</a></h3>
<p>模仿Windows开始菜单的CSS导航菜单。</p>
<h3>11.<a href="http://www.cssnewbie.com/css-only-accordion/" target="_blank">纯CSS手风琴效果</a></h3>
<p>使用div和:hover伪类的手风琴效果，这个效果可以垂直显示也可以水平显示。<br />
<a href="http://www.cssnewbie.com/example/css-only-accordion/vertical.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090033i5t.gif" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>12.<a href="http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors" target="_blank">使用PNG和背景色的可扩展按钮</a></h3>
<p><a href="http://monc.se/kitchen/stew/buttons/btn.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090033ulV.gif" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>13.<a title="MikeCherim.com - Pushbutton Links" href="http://mikecherim.com/gbcms_xml/news_page.php?id=31#n31">Pushbutton Links</a></h3>
<p>链接在不使用图片的情况下看起来像个按钮。<br />
<a href="http://mikecherim.com/experiments/css_pushbutton_links.php" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090034Q7I.gif" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>14.<a href="http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html" target="_blank">含固定Header的可卷动表格</a></h3>
<p>表格的标题被固定的优秀长表格。<br />
<a href="http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/0900354Xy.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>15.<a href="http://snook.ca/archives/html_and_css/content_overlay_css/" target="_blank">CSS内容遮盖</a></h3>
<p>当你悬停在图片上时，div容器会显示更多文字。<br />
<a href="http://snook.ca/testing/anton-test.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090035jKB.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>16.<a href="http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/" target="_blank">CSS样式表格版本2</a></h3>
<p>一个使用背景图片且非常漂亮，被语义化标记的表格。<br />
<a href="http://veerle.duoh.com/sandbox/csstutorials/tablesv2/table2.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090036FWZ.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>17.<a href="http://sonspring.com/journal/png-overlay" target="_blank">PNG遮盖</a></h3>
<p>另一种为图片添加圆角的方法。（圆角、边框、阴影）<br />
<a href="http://host.sonspring.com/png_overlay/" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090037OQT.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>18.<a href="http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html" target="_blank">利用CSS为超链接添加提示</a></h3>
<p>关于为不同类型的链接添加图标的简单教程。<br />
<a href="http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/0900377Xi.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>19.<a href="http://www.modxcms.com/simple-rounded-corner-css-boxes.html" target="_blank">简单的CSS圆角边框</a></h3>
<p>仅适用了一张图片和很少的几行代码及标记。<br />
<a href="http://www.modxcms.com/simple-rounded-corner-css-boxes.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090038TW7.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>20.<a title="Zab Design - Sitemap Celebration" href="http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html">Sitemap Celebration</a></h3>
<p>使用嵌套列表的树形导航，很适合网站地图页面。</p>
<h3>21.<a href="http://bitesizestandards.com/bites/easy-cross-browser-transparency" target="_blank">简单的跨浏览器幻灯片</a></h3>
<p>不使用JavaScript实现透明度技巧（但是以不符合XHTML验证为代价）<br />
<a href="http://bitesizestandards.com/files/77/cross-browser-transparency-example.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090039deM.gif" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>22.<a href="http://www.htmldog.com/examples/images3_3.html" target="_blank">圆角2</a></h3>
<p>流式跨度和高度的圆角div。<br />
<a href="http://www.htmldog.com/examples/images3_3.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090039WAt.gif" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>23.<a href="http://www.maxdesign.com.au/presentation/percentage/" target="_blank">使用背景图片百分比来创建图表</a></h3>
<p>条线图使用列表&lt;li&gt;。<br />
<a href="http://www.maxdesign.com.au/presentation/percentage/" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/0900402BQ.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>24.<a href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55" target="_blank">CSS柱状图:实例</a></h3>
<p>3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。<br />
<a href="http://applestooranges.com/goodies/css-for-bar-graphs/" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090041Tug.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>25.<a href="http://www.pmob.co.uk/pob/animated.htm" target="_blank">动态翻转简单头</a></h3>
<p>箭头会平滑的跟随鼠标移动，没有使用一丁点JavaScript和gif动画。<br />
<a href="http://www.pmob.co.uk/pob/animated.htm" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090041oqs.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>26.<a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/" target="_blank">基于CSS的表单模板</a></h3>
<p><a href="http://nidahas.com/sandbox/form_template.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/09004257o.gif" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>27.<a href="http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm" target="_blank">CSS图片文本结合技巧</a></h3>
<p>使用了空白div来让文本能围绕背景图中的图像显示。<br />
<a href="http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090043u4Y.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>28.<a href="http://www.cssplay.co.uk/opacity/fadein.html" target="_blank">使用CSS实现淡入效果的图片</a></h3>
<p>这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。<br />
<a href="http://www.cssplay.co.uk/opacity/fadein.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090044J0I.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>29.<a href="http://www.tjkdesign.com/articles/css%20pop%20ups/6.asp" target="_blank">纯CSS弹出效果</a></h3>
<p>一个在IE5(Mac)上也能正常工作的弹出技巧。<br />
<a href="http://www.tjkdesign.com/articles/css%20pop%20ups/6.asp" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090045fmD.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<h3>30.<a href="http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/" target="_blank">使用CSS实现文本渐变效果</a></h3>
<p>使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。<br />
<a href="http://www.webdesignerwall.com/demo/css-gradient-text/" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090045rgd.jpg" alt="CSS-实例" width="450" height="180" /></a></p>
<p><a href="http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090046wlt.gif" alt="CSS-实例" width="450" height="180" /></a></p>
<p><a href="http://www.xs4all.nl/%7Epeterned/examples/cssmenu.html" target="_blank"><img src="http://www.blook.org.cn/wp-content/uploads/auto_save_image/2010/01/090046YhI.gif" alt="CSS-实例" width="450" height="180" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blook.org.cn/30-css-techniques-and-examples/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

