本例展示了一个纯css渐变的效果.其兼容IE6以上浏览器等各主流浏览器: 案例效果:查看演示 代码如下: css: *{margin:0;padding:0;} .linear{ width:100%; height:600px; background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafa…

体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇到图片颜色和需求不符,当时就在想如果用纯css能够改变图片颜色就好了,这样的话就不用让UI重新给图片了,现在看来其实是可以实现的,原理就是利用CSS3的滤镜(filter)属性.你想的没错,就是类似PS中的滤镜. filter属性介绍: filter 属性定义了元素(通常是<img>)的可视效果(…

上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话) 写在前面的前面 前几天讲解了自己用纯CSS绘制银色MacBook Air的详细过程,由于篇幅较长就分了两部分介绍,今天我将其合二为一方便大家查看,该文章用Markdown+少量的html编辑. 同时在用markdown的过程中发现,一些markdown…

开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现一条阴影: 对于两侧的列在滚动的过程中,静止不动,吸附在边界的问题,通常 CSS 使用 position: sticky 即可解决. 但是对于滚动过程中才出现的阴影(滚动容器内的内容没有贴边,则阴影出现,贴边,则阴影消失),之前的做法一直都是需要借助 JS 完成的. 那么,有没有纯 CSS 能够实现…

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣…

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸…

经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完后我就觉得很不对劲,虽然JS代码也很简单,但是这么小的一件事还得拿JS搞这么多乱七八糟的? 然后去网上看到张鑫旭大神的一篇关于利用CSS实现loading状态时三个点的动态效果的文章,在评论区看到一位朋友的评论:利用text-shadow也可以实现打点效果,突然对这个很感兴趣,自己做来试试. 1.首…

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"…

颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & HSLA 颜色名 十六进制色 个人最喜欢的一种颜色表达方式. 十六进制颜色是这样规定的:#RRGGBB,其中的RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介于 0 与 FF 之间. 生成随机颜色: function getRandomColor() { return '…

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co…