常用的几个CSS前端效果 更轻松的写页面

王小优
王小优
王小优
231
文章
0
评论
更多
2015年12月3日 评论 1,908 6647字阅读22分9秒

本文收集了20多个常用的CSS效果，在写页面的时候可以直接使用，不用再一遍一遍的做无用功了，大大提高了开发效率。

做页面需要一定的CSS基本功，虽然现在有很多成熟的框架如Bootstrap等，我们轻松的就就可以做出一些页面效果。但是掌握每一个常见效果的写法还是很重要的，下面整理出一些常见的CSS前端效果，让你更轻松的写页面。

常用的几个CSS前端效果 更轻松的写页面

1、禁止选择文本

  1. body {
  2. -webkit-touch-callout: none;
  3. -webkit-user-select: none;
  4. -khtml-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. }

2、在可打印的网页中显示URLs

  1. @media print {
  2. a:after {
  3. content: " [" attr(href) "] ";
  4. }
  5. }

3、深灰色的点击渐变按钮

  1. .graybtn {
  2. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  3. -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  4. box-shadow:inset 0px 1px 0px 0px #ffffff;
  5. background:-webkit-gradient( linear, left top, left bottombottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
  6. background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
  7. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
  8. background-color:#ffffff;
  9. -moz-border-radius:6px;
  10. -webkit-border-radius:6px;
  11. border-radius:6px;
  12. border:1px solid #dcdcdc;
  13. display:inline-block;
  14. color:#777777;
  15. font-family:arial;
  16. font-size:15px;
  17. font-weight:bold;
  18. padding:6px 24px;
  19. text-decoration:none;
  20. text-shadow:1px 1px 0px #ffffff;
  21. }
  22. .graybtn:hover {
  23. background:-webkit-gradient( linear, left top, left bottombottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
  24. background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
  25. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
  26. background-color:#d1d1d1;
  27. }
  28. .graybtn:active {
  29. position:relative;
  30. top:1px;
  31. }

4、网页顶部盒阴影

  1. body:before {
  2. content: "";
  3. position: fixed;
  4. top: -10px;
  5. left: 0;
  6. width: 100%;
  7. height: 10px;
  9. -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  10. -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  11. box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  12. z-index: 100;
  13. }

5、在可点击的项目上强制手型

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

6、CSS3鲜艳的输入（边框渐变）

  1. input[type=text], textarea {
  2. -webkit-transition: all 0.30s ease-in-out;
  3. -moz-transition: all 0.30s ease-in-out;
  4. -ms-transition: all 0.30s ease-in-out;
  5. -o-transition: all 0.30s ease-in-out;
  6. outline: none;
  7. padding: 3px 0px 3px 3px;
  8. margin: 5px 1px 3px 0px;
  9. border: 1px solid #ddd;
  10. }
  12. input[type=text]:focus, textarea:focus {
  13. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  14. padding: 3px 0px 3px 3px;
  15. margin: 5px 1px 3px 0px;
  16. border: 1px solid rgba(81, 203, 238, 1);
  17. }

7、三角形列表项目符号

  1. ul {
  2. margin: 0.75em 0;
  3. padding: 0 1em;
  4. list-style: none;
  5. }
  6. li:before {
  7. content: "";
  8. border-color: transparent #111;
  9. border-style: solid;
  10. border-width: 0.35em 0 0.35em 0.45em;
  11. display: block;
  12. height: 0;
  13. width: 0;
  14. left: -1em;
  15. top: 0.9em;
  16. position: relative;
  17. }

8、内部CSS3盒阴影

  1. #mydiv {
  2. -moz-box-shadow: inset 2px 0 4px #000;
  3. -webkit-box-shadow: inset 2px 0 4px #000;
  4. box-shadow: inset 2px 0 4px #000;
  5. }

9、外部CSS3盒阴影

  1. #mydiv {
  2. -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  3. -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  4. box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  5. }

10、@font-face模板

  1. @font-face {
  2. font-family: 'MyWebFont';
  3. src: url('webfont.eot'); /* IE9 Compat Modes */
  4. src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  5. url('webfont.woff') format('woff'), /* Modern Browsers */
  6. url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
  7. url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  8. }
  10. body {
  11. font-family: 'MyWebFont', Arial, sans-serif;
  12. }

11、CSS3渐变模板

  1. #colorbox {
  2. background: #629721;
  3. background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
  4. background-image: -webkit-linear-gradient(top, #83b842, #629721);
  5. background-image: -moz-linear-gradient(top, #83b842, #629721);
  6. background-image: -ms-linear-gradient(top, #83b842, #629721);
  7. background-image: -o-linear-gradient(top, #83b842, #629721);
  8. background-image: linear-gradient(top, #83b842, #629721);
  9. }

12、CSS3全屏背景

  1. html {
  2. background: url('images/bg.jpg') no-repeat center center fixed;
  3. -webkit-background-size: cover;
  4. -moz-background-size: cover;
  5. -o-background-size: cover;
  6. background-size: cover;
  7. }

13、锚链接伪类

  1. a:link { color: blue; }
  2. a:visited { color: purple; }
  3. a:hover { color: red; }
  4. a:active { color: yellow; }

14、图片边框偏光

  1. img.polaroid {
  2. background:#000; /*Change this to a background image or remove*/
  3. border:solid #fff;
  4. border-width:6px 6px 20px 6px;
  5. box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
  6. -webkit-box-shadow:1px 1px 5px #333;
  7. -moz-box-shadow:1px 1px 5px #333;
  8. height:200px; /*Set to height of your image or desired div*/
  9. width:200px; /*Set to width of your image or desired div*/
  10. }

15、通用媒体查询

  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen
  3. and (min-device-width : 320px) and (max-device-width : 480px) {
  4. /* Styles */
  5. }
  7. /* Smartphones (landscape) ----------- */
  8. @media only screen and (min-width : 321px) {
  9. /* Styles */
  10. }
  12. /* Smartphones (portrait) ----------- */
  13. @media only screen and (max-width : 320px) {
  14. /* Styles */
  15. }
  17. /* iPads (portrait and landscape) ----------- */
  18. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  19. /* Styles */
  20. }
  22. /* iPads (landscape) ----------- */
  23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  24. /* Styles */
  25. }
  27. /* iPads (portrait) ----------- */
  28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  29. /* Styles */
  30. }
  32. /* Desktops and laptops ----------- */
  33. @media only screen and (min-width : 1224px) {
  34. /* Styles */
  35. }
  37. /* Large screens ----------- */
  38. @media only screen and (min-width : 1824px) {
  39. /* Styles */
  40. }
  42. /* iPhone 4 ----------- */
  43. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  44. /* Styles */
  45. }

16、跨浏览器透明

  1. .transparent {
  2. filter: alpha(opacity=50); /* internet explorer */
  3. -khtml-opacity: 0.5; /* khtml, old safari */
  4. -moz-opacity: 0.5; /* mozilla, netscape */
  5. opacity: 0.5; /* fx, safari, opera */
  6. }

17、用CSS动画实现省略号动画

  1. .loading:after {
  2. overflow: hidden;
  3. display: inline-block;
  4. vertical-align: bottombottom;
  5. animation: ellipsis 2s infinite;
  6. content: "\2026"; /* ascii code for the ellipsis character */
  7. }
  8. @keyframes ellipsis {
  9. from {
  10. width: 2px;
  11. }
  12. to {
  13. width: 15px;
  14. }
  15. }

18、制造模糊文本

  1. .blurry-text {
  2. color: transparent;
  3. text-shadow: 0 0 5px rgba(0,0,0,0.5);
  4. }

19、包裹长文本 文本过长自动换行不会穿破盒子

  1. pre {
  2. whitewhite-space: pre-line;
  3. word-wrap: break-word;
  4. }

20、背景渐变色

  1. button {
  2. background-image: linear-gradient(#5187c4, #1c2f45);
  3. background-size: auto 200%;
  4. background-position: 0 100%;
  5. transition: background-position 0.5s;
  6. }
  7. button:hover {
  8. background-position: 0 0;
  9. }

21、内容可编辑（contenteditable="true"）

  1. <ul contenteditable="true">
  2. <li>悼念遇难香港同胞 </li>
  3. <li>深圳特区30周年</li>
  4. <li>伊春空难</li>
  5. </ul>

22、输入框改变placeholder字体颜色

  1. ::-webkit-input-placeholder {
  2. color: red;
  3. }
  4. :-moz-placeholder {
  5. color: red;
  6. }
  7. ::-moz-placeholder{
  8. color: red;
  9. }
  10. :-ms-input-placeholder {
  11. color: red;
  12. }
若文章图片、下载链接等信息出错，请在评论区留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
CSS样式表属性最佳书写顺序是怎样的？ CSS

CSS样式表属性最佳书写顺序是怎样的？

混乱的CSS属性书写顺序会对网页的加载渲染造成影响，拖慢页面加载速度。一个规范的CSS属性书写属性也是网页优化的组成部分，值得每一位前端爱好者重视。 这段时间稍微整理了一下之前写的样式表，就来说下CS...
2015年12月16日 2,611 评论
一段CSS代码让你的广告位“立起来” CSS

一段CSS代码让你的广告位“立起来”

很多网站上都会投放广告，但一般情况下广告都不那么“好看”，如果我们对广告位稍微进行美化，说不定能出人意料呢。 广告对于网站来说一直是一把双刃剑，既能给网站带来利益又很有可能影响用户体验，特别是广告联盟...
2015年12月6日 1,891 评论
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: