Google Custom Search
    Google
    Web GF
  ghostzhang > 发现、收集 > 10 astonishing CSS hacks and techniques
Ghostzhang
53.571%
disconnected
登录后回复主题 | 跳到回复

10 astonishing CSS hacks and techniques

... by Ghostzhang ... 30 月 13 天前 ... 1548 次点击
原文地址：http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

1 - Cross browser inline block

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<ul>
        <li>
                <div>
                        <h4>This is awesome</h4>
                        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
                </div>
        </li>
        <li>
                <!-- etc ... -->
        </li>
</ul> 
Source: Cross browser inline-block property

2 - Disable Textarea resizing for Safari

/ * Supports: car, both, horizontal, none, vertical * /
textarea }
      resize: none;
} 
3 - Cross browser rounded corners

.rounded{
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari */
} 
Source: Border-radius: create rounded corners with CSS!

4 - Cross browser min-height property

<?php selector {
  min-height:500px;
  height:auto !important;
  height:500px;
} 
Source: Min-height fast hack

5 - Image Rollover Borders That Do Not Change Layout

#example-one a img, #example-one a {
    border: none;
    overflow: hidden;
    float: left;
}

#example-one a:hover {
    border: 3px solid black;
}

#example-one a:hover img {
    margin: -3px;
} 
Source: Image rollovers that do not change layout

6 - Cross browser transparency

.transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
} 
Source: CSS transparency settings for all browsers

7 - Lighbox in pure CSS: No Javascript needed!
Source: Lightbox effect in pure CSS: No javascript needed!

8 - Cross browser pure css tooltips

<style type="text/css">
a:hover {
    background:#ffffff;
    text-decoration:none;} /*BG color is a must for IE6*/

a.tooltip span {
    display:none;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
}

a.tooltip:hover span{
    display:inline;
    position:absolute;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
}
</style>

Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>. 
Source: Easy CSS Tooltip

9 - Set color of selected text (Firefox/Safari only)
[img]http://www.cats
whocode.com/blog/wp-content/uploads/2009/03/text-selection.png[/img]

::selection {
    background: #ffb7b7; /* Safari */
}

::-moz-selection {
    background: #ffb7b7; /* Firefox */
} 
Source: Use CSS to Override Default Text Selection Color

10 - Add File Type Icons next to your links

<?php a[href^="http://"] {
    background:transparent url(../images/external.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
} 
Source: Add File Type Icons next to your links with CSS
有趣的PNG优化 | Google Chrome 浏览器支持的 CSS 选择器
创建新主题 ... RSS 2.0
目前这个主题还没有回复，或许你可以帮楼主加盖一层？
在回复之前你需要先进行登录
昵称
密码
回到顶部 | 发现、收集 | 返回 GF 首页 | 注册