1.颜色小tip知识

　　在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色

　　在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色

单个颜色实现 hover 和 active 时的明暗变化效果

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>单个颜色实现 hover 和 active 时的明暗变化效果</title>
  6.      <style type="text/css">
  7.          a {
  8.              text-decoration: none;
  9.          }
  10.          .rubby {
  11.              position: absolute;
  12.              left: 50%;
  13.              top: 50%;
  14.              transform: translate(-50%,-50%); /*触发层叠上下文*/
  15.              width: 260px;
  16.              text-align: center;
  17.              padding: 40px;
  18.              font-size: 200%;
  19.              font-weight: bolder;
  20.              background-color: #00aabb;
  21.              color: #fff;
  22.              cursor: pointer;
  23.              border-radius: 1em;
  24.          }
  25.  
  26.          .rubby:before {
  27.              position: absolute;
  28.              left: 0;
  29.              top: 0;
  30.              right: 0;
  31.              bottom: 0;
  32.              border-radius: 1em;
  33.              background-color: rgba(255,255,255,.2);
  34.              z-index: -1;
  35.          }
  36.          .rubby:hover:before {
  37.              content: "";
  38.          }
  39.          .rubby:after {
  40.              position: absolute;
  41.              left: 0;
  42.              top: 0;
  43.              right: 0;
  44.              bottom: 0;
  45.              background-color: rgba(0,0,0,.3);
  46.              border-radius: 1em;
  47.              z-index: -1;
  48.          }
  49.          .rubby:active:after {
  50.              content: "";
  51.          }
  52.  
  53.      </style>
  54.  </head>
  55.  <body>
  56.      <a href="#none" class="rubby">.Rubby</a>
  57.  </body>
  58.  </html>

文章转载

【CSS进阶】伪元素的妙用--单标签之美

转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果的更多相关文章

  1. Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...

  2. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  3. 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

  4. 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

  5. 利用伪元素before实现自定义checkbox样式

     原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...

  6. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  7. 利用伪元素:after清除浮动

    一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...

  8. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  9. 纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果

    效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html ...

随机推荐

  1. dede在php7上空白

    最近想看一本小说,想采集回来看,结果发现除了dedecms支持php7.0,其他主流cms基本上都不支持php7.0 在本地win7上调试了一遍,没有问题,放到linux服务器上的时候,发现打开任何页 ...

  2. 我的SQL总结---未完待续

    我的SQL总结---未完待续 版权声明:本文为博主原创文章,未经博主允许不得转载. 总结: 主要的SQL 语句: 数据操作(select, insert, delete, update) 访问控制(g ...

  3. salesforce 零基础学习（四十九）自定义列表分页之使用Pagination实现分页效果 ※※※

    上篇内容为Pagination基类的封装,此篇接上篇内容描述如何调用Pagination基类. 首先先创建一个sObject,起名Company info,此object字段信息如下: 为了国际化考虑 ...

  4. Referenced file contains errors (http://www.springframework.org/schema/context). For more information, right click on the message in the Problems

    spring 配置文件的DTD或schema出问题,一般两种情况: 1.当前网络环境不稳定,按住ctrl+"http://www.springframework.org/schema/con ...

  5. XE2：查看Extended Events收集的数据

    SQL Server 使用Target来存储Events,Target 能够将Events存储到File中(扩展名是 xel),或 memoy buffer 中(Ring Buffer),Event ...

  6. Android调用系统相机功能

    在常规应用开发过程中,我们经常会使用到手机的相机功能,通过调用系统相机方便快捷的帮助我们实现拍照功能,本篇我将带领大家实现一下,如何通过调用系统相机实现拍照. 第一种:调用系统相机拍照,通过返回的照片 ...

  7. 应用程序框架实战十四:DDD分层架构之领域实体（基础篇）

    上一篇,我介绍了自己在DDD分层架构方面的一些感想,本文开始介绍领域层的实体,代码主要参考自<领域驱动设计C#2008实现>,另外参考了网上找到的一些示例代码. 什么是实体 由标识来区分的 ...

  8. 安装nginx

    [yum安装nginx] yum clean all(这步不执行会出现no more mirrors to try错误) cd /etc/yum.repos.d/ vi nginx.repo 填写 [ ...

  9. 使用phpstorm来进行svn提交

    macbook上找一款好用的免费的SVN真是难呀,要么就是非常模糊的画面,本想用Xcode的,但是折腾了一会想打开一个php项目文件夹,不会搞.最后想还是用phpstorm吧.没想到还挺好用的. 首先 ...

  10. Spring对事务管理的支持的发展历程--转

    原文地址:http://www.iteye.com/topic/1123049 1.问题 Connection conn = DataSourceUtils.getConnection(); //开启 ...