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

2019独角兽企业重金招聘Python工程师标准>>>

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

尽管这段相当晦涩难懂，但我爱死它的创意了！你可以使用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

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

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

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

Code Source

有很多默认可点击的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

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

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