《每个设计师都应该掌握的50个css代码段》31~35段

雨点打透心脏的1/2处 2022-01-16 02:07 195阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

### 31.css3文本框高亮    ###

input[type=text], textarea {
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid #ddd;
    }
      
    input[type=text]:focus, textarea:focus {
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid rgba(81, 203, 238, 1);
    }

[Code Source][]

我非常喜欢这段基本的非常好用的css代码，因为它弥补了浏览器的缺陷。chrome和safari浏览器用户知道表单边框是多么烦人。在你的样式表中添加这段内容能让你基本的输入元素焕然一新。

### 32.基于文件类型的链接样式 ###

/* external links */
    a[href^="http://"] {
        padding-right: 13px;
        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: 18px;
        background: url('acrobat.png') no-repeat center right;
    }

[Code Source][Code Source 1]

尽管这段相当晦涩难懂，但我爱死它的创意了！你可以使用css选择器和工具图标作为背景图像来决定链接的文件类型。它们可以是各种协议（HTTP, FTP, IRC, mailto）或者仅仅是文件类型本身（mp3, avi, pdf）。

### 33.使用代码外层 ###

pre {
        white-space: pre-wrap;       /* css-3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }

[Code Source][Code Source 2]

这个典型的pre标签用于展示大的代码块。这是一段预格式化文本，你会在Notepad和Textedit中发现它们，除非你经常留意到冗长的代码产生的水平滚动条。css代码块会**注意到所有的pre标签**而不破坏容器内部。

### 34.使用可点击项目上的手型光标 ###

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
        cursor: pointer;
    }

[Code Source][Code Source 3]

有很多默认可点击的html元素不总是显示手型指针光标。这套css选择器让你可以设置许多关键元素上的指针，当然也少不了使用 **.pointer**类。

### 35.页面顶端阴影 ###

body:before {
        content: "";
        position: fixed;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
     
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        z-index: 100;
    }

[Code Source][Code Source 4]

不同于一些令人愉悦的美学，开发人员可能不会很好地使用这段代码，但是我非常喜欢它独特的作用！仅仅是添加一小段css代码就可以让你的主体元素**显示从页面顶端向下的渐变的黑色阴影**。

转载于:https://my.oschina.net/hiYoHoo/blog/404662

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220115/2f96d2335b59439691c387ee293a0cfe.png
[Code Source]: https://css-tricks.com/snippets/css/glowing-blue-input-highlights/
[Code Source 1]: http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/
[Code Source 2]: http://css-tricks.com/snippets/css/make-pre-text-wrap/
[Code Source 3]: http://css-tricks.com/snippets/css/give-clickable-elements-a-pointer-cursor/
[Code Source 4]: http://css-tricks.com/snippets/css/top-shadow/