欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

实用的60个CSS代码片段

程序员文章站 2024-01-08 10:18:40
...

1、垂直对齐


如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3Transform,可以很优雅的解决这个困惑:

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用这个技巧,从单行文本、段落到box,都会垂直对齐。目前浏览器对Transform的支持是需要关注的,
Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性

2、伸展一个元素到窗口高度


在具体场景中,你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,
我们需要伸展顶层元素:htmlbody:

html, 
body {
    height: 100%;
}

然后将100%应用到任何元素的高

div {
    height: 100%;
}

3、基于文件格式使用不同的样式


为了更容易知道链接的目标,有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标,对不同的资源使用不同的图标或图片:

a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

效果演示

4、创建跨浏览器的图像灰度


灰度有时看起来简约和优雅,能为网站呈现更深层次的色调。在示例中,我们将对一个SVG图像添加灰度过滤:

svg xmlns="http://www.w3.org/2000/svg">
    filter id="grayscale">
        feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    filter>
svg>

上一篇:

下一篇: