最新的 Javascript 和 CSS 应用技巧荟萃
jopen 12年前
<div id="OSChina_News_30877" class="NewsContent TextContent NewsType2"> <p>随着前端技术的发展，javascript和css在 网站和web应用中展现出强大的统治力，特别是随着HTML5和CSS3的标准的成熟，我们可以使用javascript和css开发出你想都没有想到过 的特效和动画，在今天的这篇文章中，我们将介绍一组相关CSS和javascript的强大教程和插件，希望大家喜欢！</p> <h2><span style="text-decoration:underline;">CSS动画和过渡效果</span></h2> <p>随着CSS3标准的来到，CSS过渡效果和动画效果常常应用到互动的用户体验中，设计师可以通过CSS创建出令人惊叹的效果和体验，这里我们将挑选最棒的特效，希望大家能够从中受益。</p> <h3><a title="使用jQuery和CSS3创建一个全屏幕幻灯效果" href="/misc/goto?guid=4958347599247986531" target="_blank">使用jQuery和CSS3创建一个全屏幕幻灯效果</a></h3> <p><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/23a41cd25c977d73f13c352fda1c7ae3.jpg" width="520" height="282" /></p> <h3><a title="gbin1.com" href="/misc/goto?guid=4958347600067370650" target="_blank">分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果</a></h3> <p>介绍一个使用jQuery实现的缩略图逼近效果。主要的想法是当鼠标接近缩略图后，当前的缩略图会放大，并且周围相邻的缩略图也会相应变大一些，当你移动鼠标时，会影响移动方向上的缩略图大小变化</p> <p><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/319cf715d0e081210b6af8d84abab00a.bmp" width="520" height="290" /></p> <h3><a href="/misc/goto?guid=4958347600864631236">互动的CSS3光线效果</a></h3> <p>使用3D变形，CSS梯度和Mask来来实现的光线效果，使用box-shadow和transform实现的阴影。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347600864631236"><img class="alignnone size-full wp-image-133580" title="Interactive CSS3 Lighting Effects" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/d2e70b905b834a06dd19d641be1118a8.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347602384302690">CSS3 12面体</a></h3> <p>一个超棒的实验12面体，使用CSS变形和js脚本生成</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347602384302690"><img class="alignnone size-full wp-image-133504" title="CSS3 Dodecahedron" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/93536dfd2f0c7d70d529c3a0a073116f.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958346891307100925">CSS 3D 光线引擎</a></h3> <p>一个使用webkit对象实现的JavaScript类库可以添加简单的光线效果到DOM元素，同时你也可以添加其它引擎</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958346891307100925"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/f27a69c17eb16b205170aeac25234b4c.jpg" width="581" height="432" /></a></p> <h3><a href="/misc/goto?guid=4958347605398486819">3D Thumbnail Hover Effects With CSS</a></h3> <p>使用CSS3 3D变形生成的折叠效果，超棒并且整洁的动画效果</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347605398486819"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/a35b0b77ccf5eb36a6dcc173e3fe9849.jpg" width="498" height="317" /></a></p> <h3><a href="/misc/goto?guid=4958347606932087845">Slide In Image Boxes</a></h3> <p>当悬浮对象后创建滑进效果</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347606932087845"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/0abdd57a71d24473591682be48b5dfd1.jpg" width="500" height="278" /></a></p> <h3><a href="/misc/goto?guid=4958347608458930216">CSS3 bitmap graphics</a></h3> <p>使用CSS生成的bitmap图形，没有图片，没有canvas，没有其他标签，使用CSS梯度来生成界面</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347608458930216"><img class="alignnone size-full wp-image-133568" title="Pure CSS3 Bitmap Graphics" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/2520837eb911de01ecb4ae230c584f3a.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347609989861186">Paperfold CSS</a></h3> <p>一个折叠效果的留言插件。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347609989861186"><img class="alignnone size-full wp-image-133623" title="Paperfold CSS" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/7f5783022e55fe6bd6e89691a2c8fdb0.jpg" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347611523186173">Beercamp: An Experiment With CSS 3D</a></h3> <p>一个帮助你了解SVG和CSS能够实现什么效果的文章。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347611523186173"><img class="alignnone size-full wp-image-133655" title="Beercamp: An Experiment With CSS 3D" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/48bb8ee6c3deb3a05e97e1b2dcc999e9.jpg" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347613070200758">Covers: A JS / CSS Experiment</a></h3> <p>使用CSS和javascript生成的音乐封面</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347613070200758"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/5f66ae38b1c368c2e5eec94fca6426f0.jpg" width="498" height="412" /></a></p> <h3><a href="/misc/goto?guid=4958347614595567305">Animation on Apple’s page</a></h3> <p>apple网站的iPhone 4S页面上应用的效果</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347614595567305"><img class="alignnone size-full wp-image-133349" title="An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/9dbdf5e17d30552381a6dee9a7af72ca.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958323708108492546">Experimental animations for image transitions</a></h3> <p>一个3d图形过度效果，使用CSS3动画和jQuery</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958323708108492546"><img class="alignnone size-full wp-image-133576" title="Experimental CSS3 Animations for Image Transitions" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/e486d2eea9ec4f5db795f9b5c1a363b2.jpg" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347617587205302">Maintaining CSS style states using “infinite” transition delays</a></h3> <p>这个演示允许你使用d-pad来移动角色，没有使用任何javascript。主要效果使用无限的过渡效果延迟。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347617587205302"><img class="alignnone size-full wp-image-133473" title="Maintaining CSS Style States using “Infinite” Transition Delays" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/f32c490b1c0e00af6879dc73ac7c1e09.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347619124700487">CSS 3-D clouds</a></h3> <p>使用js和CSS3变形创建的3D云</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347619124700487"><img class="alignnone size-full wp-image-133478" title="CSS3D Clouds" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/84fe3e632781876e74fcc6be807dd0db.jpg" width="500" height="281" /></a></p> <h3><a href="/misc/goto?guid=4958347620657016045">动画弹出个人信息框</a></h3> <p>使用css过渡来实现的动画弹出profile菜单</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347620657016045"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/797d9f36c6732cc6bbec8dddb529b89f.jpg" width="500" height="220" /></a></p> <h3><a href="/misc/goto?guid=4958340505014003950">CSS3 scrolling effects</a></h3> <p>各种滚动效果的类库，例如，curl，波浪，反转，飞行等等，使用CSS3和js实现。</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958340505014003950"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/a1df58f746bcfe8f5d0405fc85430666.jpg" width="540" height="350" /></a></p> <h3><a href="/misc/goto?guid=4958347623665802738">Spin those icons with CSS3</a></h3> <p>一个简单的创建干净并且滚动的社交图标的文章</p> <h3><a href="/misc/goto?guid=4958347624483786160">Scrolling the Z Axis with CSS 3D Transforms</a></h3> <p>如何创建z-scroll效果的文章</p> <h2 id="practical"><span style="text-decoration:underline;">实用的CSS技巧</span></h2> <h3><a href="/misc/goto?guid=4958347625285226458">CSS3 Family Tree</a></h3> <p>不使用flash或者javascript，而只使用CSS显示组织结构和家族图谱的演示 ，拥有悬浮效果。一定要看看这个文章<a href="/misc/goto?guid=4958347626088386065">Introduction to CSS Pseudo Element Hacks</a>.</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347625285226458"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/5d2b1f9af71962086f4468170df04130.jpg" width="500" height="240" /></a></p> <h3><a href="/misc/goto?guid=4958347627630904985">iOS-style popover</a></h3> <p>一个简单的生成ios选择框及其悬浮效果的技巧。</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347627630904985"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/330788c9b48005efcd833bfc7eddc8dd.jpg" width="500" height="249" /></a></p> <h3><a href="/misc/goto?guid=4958347629161638027">Timeline-Style Comments</a></h3> <p>一个干净并且简单的技巧来展示时间轴类型的留言方式</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347629161638027"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/1d53d8d7e83307e487d85219514056b2.jpg" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347630701236033">CSS Table Grid</a></h3> <p>非常棒的一个用来对齐列的技巧。</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347630701236033"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/7c5b3d676743543ad661665951d72577.gif" width="494" height="324" /></a></p> <h3><a href="/misc/goto?guid=4958347632225593830">Confirmation Feedback Buttons</a></h3> <p>这个文章介绍了如何根据不同状态来创建按钮的技巧。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347632225593830"><img class="alignnone size-full wp-image-134763" title="Confirmation Feedback Buttons" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/6327f03b0986f1b553cfcdd006fbf8a6.png" width="500" height="300" /></a></p> <h3 class="showcase"><a title="最新的Javascript和CSS应用技巧荟萃" href="/misc/goto?guid=4958347633755793884" target="_blank">纯CSS实现的3D简洁按钮设计</a></h3> <p><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/ebe1ece50a2472d1678baa6f06a73aef.jpg" width="520" height="253" /></p> <h3><a title="分享来自Zocial的72个超棒免费CSS3按钮" href="/misc/goto?guid=4958347634546075629" target="_blank">分享来自Zocial的72个超棒免费CSS3按钮</a></h3> <p><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/18de339bf9b536ee0a1a025558319897.jpg" width="520" height="2080" /></p> <h3><a href="/misc/goto?guid=4958347635340132574">A calendar in CSS3 and jQuery</a></h3> <p>一个帮助你使用一些jQuery动画创建CSS3日历的教程。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347635340132574"><img class="alignnone size-full wp-image-133365" title="A clean calendar in CSS3 & jQuery : Finishing Touch" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/36dcf12de14b360f03c65120da327159.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347636874224006">Outdenting properties for debug CSS</a></h3> <p>学习如何debug CSS，一个简单的技巧就是标志一个CSS属性做为临时属性或者debug属性，然后将它添加到0列中去。</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347636874224006"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/2345179486bb5704b3f7949cbbe541e7.jpg" width="498" height="246" /></a></p> <h3><a href="/misc/goto?guid=4958347638397461197">Show Markup in CSS Comments</a></h3> <p>如何添加一些基本的标签到CSS注释中去的一篇文章</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347638397461197"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/82f89645a0f18c95d4d2a452cca0da93.jpg" width="423" height="343" /></a></p> <h3><a href="/misc/goto?guid=4958347639927554055">Selectively displaying data</a></h3> <p>这个技巧展示了如何选择性的显示内容，并且添加响应式的断点来创建响应式的，复杂的多列表。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347639927554055"><img class="alignnone size-full wp-image-134768" title="Selectively displaying data" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/357bd0f62c71df420a741bdf4e630358.gif" width="500" height="332" /></a></p> <h3><a href="/misc/goto?guid=4958347641462956982">Remove Margins for First/Last Elements</a></h3> <p>如果你想删除顶端或者左边的margin，或者右边，下面的magin，你可以使用:first-child和:last-child</p> <h3><a href="/misc/goto?guid=4958347642256139662">CSS Diagnostics Stylesheet</a></h3> <p>一个非常有用的代码片段帮助你debug你的CSS，或者找到HTML中的错误</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347642256139662"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/e08af3b7edba55de01b94a0aee20053b.jpg" width="498" height="250" /></a></p> <h3><a href="/misc/goto?guid=4958347643783111195">Radio Buttons With Two-Way Exclusivity</a></h3> <p>学习:empty伪类选择其和jQuery，保证当你点击一个radio按钮的时候，其他列都关闭</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347643783111195"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/15d04d0fc7e15e622b4b6a71312eafaa.jpg" width="336" height="291" /></a></p> <h3><a href="/misc/goto?guid=4958347645308019455">Tabbed Navigation With CSS</a></h3> <p>一个优雅的带有下拉菜单的tab导航菜单 ，没有javascript。非常干净的解决方案。</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347645308019455"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/783872764659de3b18a2c75f9061d292.jpg" width="500" height="241" /></a></p> <h3><a href="/misc/goto?guid=4958347646834273966">Menu With Notification Badges With CSS</a></h3> <p>一个实用的代码片段用来生成带有通知标识的导航菜单。</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347646834273966"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/2c85948e26cfbded75a59836ef6ab7ff.jpg" width="511" height="190" /></a></p> <h3><a href="/misc/goto?guid=4958347648364226397">Styling based on sibling count (slides)</a></h3> <p>一个超棒的基于sibling计算的样式。非常实用的技巧。</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347648364226397"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/548812b6bb5c7c8d7f019cdf501894a8.jpg" width="501" height="267" /></a></p> <h3><a href="/misc/goto?guid=4958347649916021170">Stuff you can do with the “Checkbox Hack”</a></h3> <p>使用checkbox hack技术，你可以使用一个连接label和checkbox来控制其它页面元素 。</p> <h3><a href="/misc/goto?guid=4958347650712490674">CSS3 非死book Buttons</a></h3> <p>Nicolas Gallagher开发了一套不同颜色的非死bookCSS按钮，大家也可以看看<a href="/misc/goto?guid=4958347651520512976">CSS3 Social Sign-In buttons</a>和<a href="/misc/goto?guid=4958347652331059089">Free Social CSS3 Buttons</a></p> <h3><a href="/misc/goto?guid=4958347653139695197">油Tube Popup Buttons</a></h3> <p>这篇文章讲解了如何创建缺省状态的油Tube按钮，拥有非常简单的细微边框斜面并且:hover和:focus时展示</p> <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347653139695197"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/ffd6b8e8fedddaa486727863b3985729.jpg" width="371" height="387" /></a></p> <h3><a href="/misc/goto?guid=4958347654666669634">Centering in the Unknown</a></h3> <p>Chris教你如何实现居中web设计，对于父元素越了解，你就约容易的实现居中。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347654666669634"><img class="alignnone size-full wp-image-133358" title="Centering in the Unknown" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/54491d72c268d8b1bb66f54ec71484be.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347656196093711">Micro Clearfix: Force Element To Self-Clear its Children</a></h3> <p>Chris Coyier 教你几个常用技巧来强制自清理子元素，包含了Nicolas Gallagher的代码片段</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347656196093711"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/fe8377df35268264f6ea6363d0c25b73.jpg" width="500" height="285" /></a></p> <h3><a href="/misc/goto?guid=4958347657717284538">Conditional CSS</a></h3> <p>一个非常不错的技巧帮助你条件式的加载内容。</p> <h3><a href="/misc/goto?guid=4958347658512503612">* { box-sizing: border-box } FTW</a></h3> <p>一旦你开始在CSS混合匹配各种不同单位， 例如，使用%来设定宽度，em设定padding，px设定border，你肯定遇到box-model问题，你可以使用box-sizing:broder-box来解决，这个IE8支持。</p> <h3><a href="/misc/goto?guid=4958347659323838772">Multiple Attribute Values</a></h3> <p>如何不使用class来处理多属性值</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347659323838772"><img class="alignnone size-full wp-image-133562" title="Multiple Attribute Values" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/ea273220e7c215248daecd84c241a7d6.jpg" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347660851663107">Diagonal CSS Sprites</a></h3> <p>使用diagonal来创建sprite。</p> <h3><a href="/misc/goto?guid=4958347661641616051">Double Click in CSS</a></h3> <p>有没有方法在mobile上检测是否是tap还是双击？阅读这篇文章你就可以了解！</p> <h3><a href="/misc/goto?guid=4958347662442644299">Replacing the -9999px hack (new image replacement)</a></h3> <p>用来隐藏文本的代码</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347662442644299"><img class="alignnone size-full wp-image-133456" title="Replacing the -9999px hack (new image replacement)" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/0078de93ad8b78751eaadb451484edff.jpg" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347663967237043">Fighting the Space Between Inline Block Elements</a></h3> <p>如何处理inline元素间的小空间，这里chris coyier将讲解几个小窍门</p> <h3><a href="/misc/goto?guid=4958347664775090040">CSS pointer-events and a pure CSS3 animating tooltip</a></h3> <p>pointer-event属性允许你指定鼠标如何和元素接触的互动方式。看看我们什么时候可以使用它。</p> <h3><a href="/misc/goto?guid=4958347665564237726">Anatomy of a mobile-first responsive Web design</a></h3> <p>一个来自Brad Frost的如何设计超棒响应式设计的文章 。如何开始？你需要执行什么样的功能？如何使用本地存储和appcache来优化？</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347665564237726"><img class="alignnone size-full wp-image-134767" title="anatomy of a mobile-first responsive web design" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/1d48cc304b8bcaa8a9c31d3ba90e74f4.png" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347667099382321">SouthStreet Progressive Enhancement Workflow</a></h3> <p>超棒的响应式设计相关工具。你绝对会用的到！</p> <h2 id="navigation"><span style="text-decoration:underline;">CSS实现的悬浮效果和导航菜单</span></h2> <p>这里我们收集最新的CSS悬浮和导航特效，希望大家能够喜欢！</p> <h3><a href="/misc/goto?guid=4958347667892775051">分享5个来自tympanus的超炫图片幻灯效果和教程</a></h3> <p>Tympanus是一个超酷的前端技术博客，经常发布超酷的前端特效教程，今天小编我给大家推荐五个超酷的幻灯效果，希望大家能有机会用在自己的网站和项目中</p> <p><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/24dd3dcd39b30eea6dc0ec0c86bd9277.jpg" width="520" height="282" /></p> <h3><a href="/misc/goto?guid=4958347668699171681">Circle Navigation Effect With CSS3</a></h3> <p>一个气泡式的CSS3导航</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347668699171681"><img class="alignnone size-full wp-image-133581" title="Circle Navigation Effect with CSS3" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/73015b6ee8208628983acd0ba4d84002.jpg" width="498" height="309" /></a></p> <h3><a href="/misc/goto?guid=4958347670227466890">Create a CSS3 Image Gallery With a 3D Lightbox Animation</a></h3> <p>扩展使用CSS的lightbox画廊，添加了一些hover特效，3D内容旋转 ，全部使用CSS</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347670227466890"><img class="alignnone size-full wp-image-133357" title="Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/1451691581581ba588cd4748be0935e7.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958331317384246188">3D Gallery With CSS3 and jQuery</a></h3> <p>一个纯3D实现的画廊。 <a title="3d画廊 - gbin1.com " href="/misc/goto?guid=4958347672492892331" target="_blank">这里查看中文教程 </a></p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958331317384246188"><img class="alignnone size-full wp-image-133515" title="3D Gallery with CSS3 and jQuery" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/492d8ad84e83cfc01d5f598ecc3203b8.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958199242652802516">Creative CSS3 animation menus</a></h3> <p>Mary lou展现给你超酷的导航菜单特效。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958199242652802516"><img class="alignnone size-full wp-image-133350" title="Creative CSS3 Animation Menus" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/c454e9f369b85b8dda3a3347328d0e9b.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958335382163839352">How to spice up your menu with CSS3</a></h3> <p>另外一个超酷的悬浮特效，这里<a title="20120320menuwithcss3" href="/misc/goto?guid=4958347676228809731" target="_blank">查看中文教程 </a></p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958335382163839352"><img class="alignnone size-full wp-image-133512" title="How to spice up your menu with CSS3" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/3cc7a3a47ec87532ac7b0b5cfd3bc302.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347677776961392">Create a zoomable user interface</a></h3> <p>如何使用css transform来创建一个可缩放的CSS3界面</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347677776961392"><img class="alignnone size-full wp-image-133584" title="Create a zoomable user interface with CSS3" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/4baddd3e9ec19430b7b35f5b18cd0cae.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347679294037858">Flipboard Navigation</a></h3> <p>一个实验性的页面布局</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347679294037858"><img class="alignnone size-full wp-image-134761" title="Flipboard Page Layout" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/c3b8afb5e0cc2cbb32adbbb318e02660.png" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347680823918030">Multi-direction hover</a></h3> <p>不同方向的hover效果展示</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347680823918030"><img class="alignnone size-full wp-image-133503" title="Multi-direction hover" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/e943d3e2e0d5ffd06717dae2eb578132.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347682350088598">Experimental Hover Effects</a></h3> <p>悬浮效果的实验性展示</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347682350088598"><img class="alignnone size-full wp-image-133346" title="Share JavaScript, HTML5 and CSS" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/57ae7e985097bbc9acfd45c855746434.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347683862585644">Over-the-top hover effect</a></h3> <p>CSS和js技巧用来创建顶层的悬浮效果，使用transfomr-origin和transform-style属性及其3D属性。</p> <h3><a href="/misc/goto?guid=4958336093522345715">Accordion With CSS3</a></h3> <p>来自Mary lou的accordion文章，使用纯CSS3实现。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958336093522345715"><img class="alignnone size-full wp-image-133466" title="Accordion with CSS3" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/a13282be8446bd799e013465bf48cc12.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347686128547151">Expanding Text Areas Made Elegant</a></h3> <p>一个可自动扩展的textarea实现</p> <h3><a href="/misc/goto?guid=4958325133159098633">Filter Functionality With CSS3</a></h3> <p>使用CSS3实现的过滤特效</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958325133159098633"><img class="alignnone size-full wp-image-133565" title="Filter Functionality with CSS3" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/e7a43041181cefc64485f2d775579a55.jpg" width="498" height="298" /></a></p> <h3><a href="/misc/goto?guid=4958347688396690185">An accessible, keyboard-friendly custom select menu</a></h3> <p>一个新的方式来实现更强的可用性。</p> <h2 id="visual"><span style="text-decoration:underline;">视觉技巧</span></h2> <p>我们在web开发中使用很多图片和视觉元素来创建特定的效果，使用CSS3，我们不但能够提高加载速度，也可以是的视觉效果更加突出！</p> <h3><a href="/misc/goto?guid=4958347689194640948">Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements</a></h3> <p>创建一个图片叠加效果的特效</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347689194640948"><img class="alignnone size-full wp-image-133629" title="Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element" alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/f8695f2555f5336d9c3ec768f8157a37.jpg" width="500" height="300" /></a></p> <h3><a href="/misc/goto?guid=4958347690724252609">CSS3 Unfold Map with Pins</a></h3> <p>一个CSS3实现地图标示的代码片段。</p> <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347690724252609"><img alt="最新的 Javascript 和 CSS 应用技巧荟萃" src="https://simg.open-open.com/show/d43745dbad16a275c005b60f9d1895d3.jpg" width="526" height="302" /></a><br /> <br /> 转载自: <a href="/misc/goto?guid=4958347692242815584" rel="nofollow" target="_blank">http://www.gbin1.com/technology/css/20120706-js-css-tips/</a> </p> </div>