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

投稿   雅兮网  2018-01-31 07:35:55  160 人阅读  10 条评论

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

CSS技巧:常用的几个CSS前端效果 更轻松的写页面 海纳百川 第1张

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. }

历史上的今天:

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,   ,  
原文地址:https://www.iyaxi.com/2018-01-24/1681.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!

 发表评论


  1. 西枫里博客
    西枫里博客 【进士】 @回复

    源站上的已经被拷走了 [阴险]

  2. 唯心寒辞
    唯心寒辞 【书童】 @回复

    [赞] 我一看CSS就头皮发麻

  3. 学习笔记Blog
    学习笔记Blog 【进士】 @回复

    CSS大牛,求包养!求带走! [威武] [囧]

  4. 明月登楼
    明月登楼 【尚书】 @回复

    真实CSS大牛呀!厉害!我是一看CSS代码就抓瞎了!

  5. 叶少侠
    叶少侠 【小白】 @回复

    有用,可惜没效果图,先尝试一下!

  6. worthpin
    worthpin 【书童】 @回复

    附上效果图就更好了。

  7. 无广告主页
    无广告主页 【小白】 @回复

    收藏了!

  8. 靠谱学生兼职网
    靠谱学生兼职网 【进士】 @回复

    恩, 有技术真好,这些代码其实我看了很头痛的

  9. 菊
    【举人】 @回复

    人工置顶

  10. 手机赚钱
    手机赚钱 【举人】 @回复

    技术贴,顶起