常用的几个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 topleft bottombottomcolor-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 topleft bottombottomcolor-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. positionfixed;
  4. top: -10px;
  5. left: 0;
  6. width: 100%;
  7. height10px;
  8. -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  9. -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  10. box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  11. z-index: 100;
  12. }

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

  1. a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
  2. cursorpointer;
  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. outlinenone;
  7. padding3px 0px 3px 3px;
  8. margin5px 1px 3px 0px;
  9. border1px solid #ddd;
  10. }
  11. input[type=text]:focus, textarea:focus {
  12. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  13. padding3px 0px 3px 3px;
  14. margin5px 1px 3px 0px;
  15. border1px solid rgba(81, 203, 238, 1);
  16. }

7、三角形列表项目符号

  1. ul {
  2. margin: 0.75em 0;
  3. padding: 0 1em;
  4. list-stylenone;
  5. }
  6. li:before {
  7. content"";
  8. border-colortransparent #111;
  9. border-stylesolid;
  10. border-width: 0.35em 0 0.35em 0.45em;
  11. displayblock;
  12. height: 0;
  13. width: 0;
  14. left: -1em;
  15. top: 0.9em;
  16. positionrelative;
  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. srcurl('webfont.eot'); /* IE9 Compat Modes */
  4. srcurl('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. }
  9. body {
  10. font-family: 'MyWebFont', Arialsans-serif;
  11. }

11、CSS3渐变模板

  1. #colorbox {
  2. background#629721;
  3. background-image: -webkit-gradient(linear, left topleft 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. backgroundurl('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 { colorblue; }
  2. a:visited { colorpurple; }
  3. a:hover { colorred; }
  4. a:active { coloryellow; }

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. }
  6. /* Smartphones (landscape) ----------- */
  7. @media only screen and (min-width : 321px) {
  8. /* Styles */
  9. }
  10. /* Smartphones (portrait) ----------- */
  11. @media only screen and (max-width : 320px) {
  12. /* Styles */
  13. }
  14. /* iPads (portrait and landscape) ----------- */
  15. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  16. /* Styles */
  17. }
  18. /* iPads (landscape) ----------- */
  19. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  20. /* Styles */
  21. }
  22. /* iPads (portrait) ----------- */
  23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  24. /* Styles */
  25. }
  26. /* Desktops and laptops ----------- */
  27. @media only screen and (min-width : 1224px) {
  28. /* Styles */
  29. }
  30. /* Large screens ----------- */
  31. @media only screen and (min-width : 1824px) {
  32. /* Styles */
  33. }
  34. /* iPhone 4 ----------- */
  35. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  36. /* Styles */
  37. }

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. overflowhidden;
  3. displayinline-block;
  4. vertical-alignbottombottom;
  5. animation: ellipsis 2s infinite;
  6. content"\2026"/* ascii code for the ellipsis character */
  7. }
  8. @keyframes ellipsis {
  9. from {
  10. width2px;
  11. }
  12. to {
  13. width15px;
  14. }
  15. }

18、制造模糊文本

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

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

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

20、背景渐变色

  1. button {
  2. background-image: linear-gradient(#5187c4#1c2f45);
  3. background-sizeauto 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. colorred;
  3. }
  4. :-moz-placeholder {
  5. colorred;
  6. }
  7. ::-moz-placeholder{
  8. colorred;
  9. }
  10. :-ms-input-placeholder {
  11. colorred;
  12. }
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
CSS样式表属性最佳书写顺序是怎样的? CSS

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

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

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

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

发表评论

匿名网友 填写信息

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