CSS3
front_end_fan
互联网公司缺的是技术过硬又精通业务的工程师,缺的是真正能解决实际业务问题的人,缺的是复合型的人才。
展开
-
CSS特殊样式(六) box-shadow实现纸张的曲线投影效果
总结:1、box-shadow属性,存在兼容性问题使用时需: -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0,转载 2017-07-24 17:01:09 · 3492 阅读 · 0 评论 -
使用CSS3制作倾斜导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果。导航条是梯形形状的。背景区域的毛玻璃效果。把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。用语言来描述原创 2017-09-12 12:29:26 · 2660 阅读 · 0 评论 -
css中伪元素before或after中content的特殊用法attr
前言今天主要讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果!知识点回顾关于伪类及伪元素,我前面文章已经经过。content除了上面的用法之外,还可以如下写:content: attr(data-haorooms);获取哪个属性。我们就是利用这个知识点。纯css制作精美鼠标移上去显示tips效果看如下案例:html代码如下:<div class="haorooms">原创 2017-09-12 09:11:42 · 7008 阅读 · 0 评论 -
css扫光效果总结,css文字扫光,css图片扫光
前言我录制的慕课网视频一直没有上线,慕课网的消息说是可能加入就业课程或者系列课程。有可能年底上线,我等的花儿都谢了!因此,我昨天在看慕课网时,发现他们确实改版了,实战页面有图片扫光效果,地址我就不列了!感觉这个效果还蛮不错,其实,我之前也做过类似的效果。今天借着这个引子,来和大家一起探讨一下图片的扫光效果吧!思路其实扫光的思路都是一样的,不外乎是表层一个动态的光,从左往右进行一个动画运动!但原创 2017-09-11 10:52:27 · 3295 阅读 · 0 评论 -
谈谈css的伪类和伪元素
前言今天主要谈谈css的伪类和伪元素。伪类和伪元素的理解官方解释伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。我自己的理解:伪类,类,class是一个类,就类似class原创 2017-09-11 10:42:21 · 611 阅读 · 0 评论 -
一些html5表单知识及EventUtil对象完善
前言这部分主要讲讲表单知识!表单知识1、Html5的autofocus属性。有个这个属性,我们不用js就能自动把焦点移动到相应的字段。例如:<input type="text" value="" autofocus />2、获取选择的文本今天我主要说一下如何获取文本框中选择的数值。html5中增加了两个属性:selectionStart,selectionEnd,可以获取开始的选原创 2017-09-11 10:31:25 · 409 阅读 · 0 评论 -
canvas绘制圆环进度条出现模糊效果解决方案
问题近期用canvas绘制了圆环进度条,但是进度条出现周围模糊的现象,针对这种现象,网上搜了搜,有人提问,但是貌似没有很好的解决方案,针对这种情况,提出几种解决方案,仅供参考!模糊效果如下:解决方案针对这种情况,我提出几种解决思路。一、运用hidpi-canvas-polyfill 的js进行解决HiDPI Canvas Polyfill 是针对设备提出的canvas高清解决方案,首先引入转载 2017-09-11 10:13:59 · 2098 阅读 · 0 评论 -
常用浏览器私有属性小技巧
更改输入框文字placeholder颜色::-webkit-input-placeholder { color: orange;}::-moz-input-placeholder { color:orange;}::-ms-input-placeholder { color: orange;}::input-placeholder { color: orange原创 2017-09-19 08:10:07 · 805 阅读 · 0 评论 -
重温Flex布局
Flex布局,可以简便、完整、响应式地实现各种页面布局。浏览器支持:得到所有浏览器的支持。(注:Flex布局将成为未来布局的首选方案)一. Flex布局的概念:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。div{ display: flex;}/*行内元素*/div{ display: inline-fl原创 2017-09-18 15:55:41 · 724 阅读 · 1 评论 -
漂亮的css文字效果
效果图:css文字效果* { padding: 0; margin: 0; text-align: center;}body { padding-bottom: 200px;}div { font-size: 36px;}.header-item { line-height: 4;}.box1 { co原创 2017-09-14 09:25:40 · 7131 阅读 · 0 评论 -
8款纯CSS3搜索框
效果图: 8款纯CSS3搜索框 * { box-sizing: border-box; } body { margin: 0; padding: 0; backgroun原创 2017-09-14 08:52:54 · 9049 阅读 · 0 评论 -
jQuery滑动tab选项卡
先上最终效果:需求分析: 1.选项卡菜单数量不固定,菜单内容不固定,导致了单个菜单和整体的宽度都是未知的, 2.第一个需求导致滑块宽度也是不固定的 3.为了让交互效果更好,滑块需要添加过度动画对滑块的需求导致滑块和菜单的html结构必须分离,并使用了jQuery的offset方法获取并设置位置,所有的div都使用了相对定位。 本案例的TAB选项卡可以比较方便的拓展、重复使用,只需修改少量值就原创 2017-09-13 18:15:38 · 2293 阅读 · 0 评论 -
CSS的单位及css3的calc()及line-height百分比
单位介绍说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了。然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等等,那现在对这些单位分别做一下详细的介绍吧。em做前端的应该对em不陌生,不是原创 2017-09-05 09:42:29 · 3010 阅读 · 0 评论 -
CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径转载 2017-08-22 10:33:24 · 678 阅读 · 0 评论 -
CSS3 Generator在线工具
相信有不少人在写CSS3新属性的时候否会遇到这样的问题:1、这个是不是新属性,有些属性搞不清是不是css3新增的? 2、确定了是css3新增的属性,但是为了解决浏览器兼容性问题,应该加哪些前缀? 3、css3新属性毕竟用的不是很多,有时候会忘记或者敲错时至今日,我才发现一款在线工具,以上问题都可以迎刃而解。—— CSS3 Generator有了CSS3 Generator,妈妈再也不用担心我的C原创 2017-08-21 15:13:40 · 3935 阅读 · 1 评论 -
table表头斜线
一、代码<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post"><!DOCTYPE html><br><html> <br><head> <br><meta http-equiv="Conten原创 2017-10-17 14:43:27 · 9539 阅读 · 1 评论