文章关键字 ‘border’

CSS前景背景自动配色技术简介

2018年11月18日,星期日

智能配色

CSS越来越强,现在已经可以实现根据不同的背景色显示不同的前景色进行匹配了,例如右图GIF图片所示,背景色一开始深色,文字颜色为白色,当背景色逐渐变淡的时候,文字颜色也从原来的白色变成黑色了,同时边框也显示出来了,以便有更好的识别度。如何实现的呢?去文中一探究竟吧~

阅读全文…

妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

2018年08月30日,星期四

本文内容如题,介绍几个实现渐变虚线框的方法,介绍虚线滚动动画,实线滚动边框动画的实现,所有这些方法都是纯CSS实现,就算这些动画效果你实际项目用不到,但是其大开眼界的实现原理相信也会给你有所启示的。

一如既往,有demo实例,有源代码展示,和必要的截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 linear-gradient线性渐变实现虚线等简单实用图形

2017年10月27日,星期五

我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的。

当然我们实际开发的时候,是不会使用CSS3渐变来模拟一张图片的,更多是用来生成一些简单实用的图形。

本文就将通过实现虚线,三角以及加号减号等案例,展示下CSS3 linear-gradient线性渐变要图形生成技巧。

阅读全文…

Chrome opacity非1时border-radius圆角边框剪裁问题

2017年10月19日,星期四

border-radius:50%可以让元素正方形元素表现为正圆,如果元素设置了border边框,则会表现为一个正圆圈圈,但有时候,border边框的这个圈圈会在边缘处发生剪裁,不是一个完美的圈圈了,这是如何发生的呢?

阅读全文…

jquery.guide.js新版上线操作向导镂空提示jQuery插件

2017年05月18日,星期四

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样……

阅读全文…

解决文字和text-decoration:underline下划线重叠问题

2016年11月23日,星期三

CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会和中文文字的下边缘搞在一起,英文的话甚至直接穿越,看起来就比较香菇蓝瘦。

有没有什么办法让下划线不要靠得这么近,或者文字可以完整清晰地显示呢?

有,方法还不少……

阅读全文…

基于CSS color属性的静态UI组件重构策略

2016年11月18日,星期五

技术的发展往往会带来相应的思维方式上的转变,这样才能相辅相成,发挥新技术的潜力,如果还是使用以前的思维模式,怎么说呢,有着劳斯莱斯加着92#汽油在跑的感觉。

传统的实现,包括现在移动端几乎所有的实现套路都是下面这样的,无论是标签还是按钮,都是先设定一个基础类名,写下基本样式,然后不同的颜色重新命名一个状态类名,覆盖默认的边框色或者背景色或者文字颜色,是什么颜色就写什么颜色。

但,实际上,如果采用基于color重构UI组件的策略,则可能会有意想不到的裨益……

阅读全文…

HTML可访问性fieldset,legend元素及CSS布局应用

2016年11月12日,星期六

本文主要介绍平时用的不多的,尤其现在的小伙伴很少关注的fieldset和legend元素,从可访问性以及CSS布局这块展示这两个元素的作用,价值以及应用场景。希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tips: IE7,IE8浏览器纯CSS实现正圆角效果

2016年07月6日,星期三

CSS3 border-radius可以轻易实现圆还有圆角效果,然而,需要IE9+浏览器才行。移动端自然不成问题,但是众多(尤其面向C侧)PC页面是至少需要兼容IE8的,那有没有什么办法可以让IE7, IE8也支持圆角呢?

很久很久以前介绍过一个名为PIE的东西可以实现IE7,IE8的圆角。然后,本文再介绍一个使用纯CSS实现IE7,IE8浏览器正圆角的例子……

阅读全文…

腾讯微云黑色遮罩引导蒙版更好的CSS实现方式

2016年03月7日,星期一

网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。

然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:

为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。

我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片……

阅读全文…