黑马程序员技术交流社区

标题: 【广州前端】- CSS小技巧 [打印本页]

---

作者: AngularBaby    时间: 2018-1-15 17:15
标题: 【广州前端】- CSS小技巧


1、 快速黑白图像Demo：Demo：
[mw_shl_code=html,true]    <img class="desaturate" src="./timg.jpg">[/mw_shl_code]
[mw_shl_code=css,true]/* 让类名为 desaturate 的 img 显示黑白色 */
img.desaturate {
            filter: grayscale(100%);
        }
[/mw_shl_code]


2、 巧用 :not( ) 方法选择
Demo：
[mw_shl_code=html,true]    <ul class="nav">
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
    </ul>[/mw_shl_code]
[mw_shl_code=css,true]
/* 常规写法 */
        .nav li {
            border-bottom: 1px solid #ccc;
        }

        .nav li:last-child {
            border-bottom: none;
        }
[/mw_shl_code]
[mw_shl_code=css,true]/* 使用 :not( ) 写法 */
        .nav li:not(:last-child) {
            border-bottom: 1px solid #ccc;
        }

[/mw_shl_code]

3、 纯CSS写三角形Demo：
[mw_shl_code=html,true]    <div class="arrow"></div>[/mw_shl_code]
[mw_shl_code=css,true]
div.arrow {
            margin: 10px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #2f2f2f;
            /* 默认向上 */
            /* 向右 */
            /* transform: rotate(90deg); */
            /* 向下 */
            /* transform: rotate(180deg); */
            /* 向左 */
            /* transform: rotate(-90deg); */
        }
[/mw_shl_code]

4、 文本渐变
Demo：
[mw_shl_code=html,true]  <h2 data-text="今天天气不错">今天天气不错</h2>
[/mw_shl_code]
[mw_shl_code=css,true]
h2[data-text] {
            position: relative;
        }

        h2[data-text]::after {
            content: attr(data-text);
            z-index: 10;
            color: #e3e3e3;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
        }
[/mw_shl_code]
5、 文本毛玻璃效果
Demo：
[mw_shl_code=html,true]    <p class="blur">您吃了吗</p>[/mw_shl_code]
[mw_shl_code=css,true]
.blur {
            color: transparent;
            text-shadow: 0 0 3px rgb(0, 0, 0);
        }
[/mw_shl_code]
本贴所有 Demo案例 ，可以下载附件查看

点击查看更多精彩前端资源

点击有惊喜

css技巧.zip

2018-1-15 17:42 上传

点击文件名下载附件

955.51 KB, 阅读权限: 10, 下载次数: 8

售价: 1 黑马币  [记录]

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2