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

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

1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色 单个颜色实现 hover 和 active 时的明暗变化效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

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

本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) /*建立一个带圆角矩形*/ .pesudo{ position: relative; margin-top:80px; width: 120px; height:120px; border-radius:1em; background:#00aabb; cursor:pointer; } /*用bef…

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

最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class="home-entry-box relative clearfix"> <span class="home-entry-box-arrow"></span> <ul class="pull-left"> <li…

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

一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设置相对定位. html代码 <div id="underline"></div> css样式 #underline{ width: 200px; height: 50px; background: #ddd; margin: 20px; position: rela…

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

原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设置相对定位. html代码 <div id="underline"></div> css样式 #underline{ width: 200px…

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

 原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的边框border属性实现复选框的外框,before伪元素的content值可为unicode字符集,这样就可以设置checkbox中选中状态,可以实现勾选效果.五角星效果.多边形效果等等. 代码: <html> <head> <style> * { font-size: 1…

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

给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS伪元素 css中伪元素有四个,分别是:first-line,:first-letter,:before,:after.其中前两个分别选择的是目标元素内第一行文本和第一个字母,可以为其添加多余样式. 而最常用的就是:before和:after,这两个伪元素与前两个的用法不同,而用处也更大. :before,:a…

利用伪元素:after清除浮动

一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE*/ } .clearfix:after{ display:block; content:"";/*设置为空或者"."都可以*/ height:0; clear:both; overflow:hidden; visibility:hidden; } 二.应用场景 比如一…

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

最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> -----------------------以上为背景------------------------------ 正方形当然很好做,但是右侧突出来的小角标就得自己想办法了.所以,既然没有到有,自然是用上了CSS中的伪元素. 这个形状跟我们平时经常遇到的小气泡和下拉栏差不多 平常实现我们常是通过添加小的icon来实…

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

效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn{ width: 80px; line-height:…