相关搜索 >> css

  • 0309利用css3-animation来制作逐帧动画阅读(6869)条2016/3/9 21:14:30

    css3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。最近在新的项目中,用了大量的css3动画,但是真的沉淀下来仔细的去深入css3动画的各个属性发现还是很深的,这里就写下关于帧动画steps属性的理解我们知道css3的animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-function其中1-7大多都有介绍,但是...阅读全文

    Taget:css3 animation 动画 

  • 1028CSS定位属性之间的相互作用 阅读(5183)条2015/10/28 17:27:41

    1. 引言原文:bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT译者:爱前端,乐分享的FedFun,前端痴王海庆的博客。译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为主,不当之处敬请指正。阅读建议5分钟。2. 正文在定位元素时,我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性,一些特殊的值组合会覆盖其他属性的应用,这些组合有:display: n...阅读全文

    Taget:css 

  • 0618移动端开发,几个你可能不知道的CSS单位属性阅读(7405)条2015/6/18 21:04:06

    1. rem"em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以根(即“html”)元素的单位大小为基准来设置当前元素的单位大小,所以不管当前元素是任意子节点,一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的,这里的 “em” 和 “rem”...阅读全文

    Taget:移动 css rem em 

  • 0519前端人员必看CSS命名规范阅读(9125)条2015/5/19 14:55:28

    作为前端的设计人员,对于CSS的接触,就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解:所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样式库 /css/ui业务类的CSS是指和具体产...阅读全文

    Taget:css 命名 技巧 

  • 0516CSS3的background-size优化Sprites图显示实例阅读(6345)条2015/5/16 11:05:42

    本篇主要是讲css3如何使用background-size与sprites同时使用技巧。运行查看效果时别忘了用支持CSS3 的浏览器查看.ie9+,chrome,firefox,...一、background-size使用方法 可以创建一张Sprites图,这张图既有普通分辨率图像,又有高分辨率下的图像?你可以,但你还是要面对,你的用户在一个较慢的带宽下下载一个大图的烦恼。你也要同时面对IE9以下的浏览器不支持background-size的麻烦问题。你最好还是分别为高分辨率和普通分辨率创建不同...阅读全文

    Taget:css3 sprite 技巧 

  • 0813css之input hover,focus伪类特效阅读(22965)条2014/8/13 9:08:21

    记得以前为了兼容ie6,ie7等低版本不支持css伪类,不得不用JS去做效果。现在IE6,7使用的人越来越少了,我们是时候应该抛弃它们了(使用JS控制文本框特效)。CSS伪类可以很好的做到这点只需要几行代码就可以了。而且是全局性的,不需要每个文本框跟按钮去添加样式。一劳永逸,够爽的吧。下面就开始介绍。IE6 IE7 IE8(Q) 不支持如”:focus,:hover”等伪类特效,所以我们的特效是基于支持伪类的浏览器中才能看到的特效。支持键盘控制一样可...阅读全文

    Taget:css 伪类 focus 特效 

  • 0806CSS3打造一组质感细腻丝滑的按钮阅读(6667)条2014/8/6 9:53:05

    CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果。  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。HTML效果如下: 这些精美的效果用到了 CSS3 RGBA、box-shadow(阴影)、border-radius(边框圆角)和 linear-gradient(线性渐变),为了便于阅读,功能介绍代码如下:...阅读全文

    Taget:css3 按钮 

  • 0401css让网页变灰兼容IE/ff/chrome阅读(10369)条2014/4/1 16:24:19

    今天在chrome用百度看到【马航最后通话内容】就点进去了,发现谷歌浏览器的图片颜色都变成灰色的了。但是今天不是讨论马航,而是讨论一个前端站长的技术问题—css让网页变灰兼容IE/ff/chrome。好奇的我用debug查看了下。代码如下:html{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicIma...阅读全文

    Taget:css 灰色 图片 

  • 0326关于css3边框的radius和image用法的详解阅读(7697)条2014/3/26 9:16:58

    一、圆角边框:IE9.0以前版本不支持 border-radius: 接受8个属性,前四个为x轴,后四个为y轴,以斜杠划分x轴、y轴,即border-radius:左上较 右上角 右下角 左下角 / 左上角  右上角  右下 角  左下角  ;(x轴/y轴 ),如:border-radius: 100px 0 100px 0/100px 0 100px 0。 顺序图: 原理图:   原理:     以四个角a,b,c,d 为起点,横向为x轴,纵向为y轴,以左上角x轴100px,y轴1...阅读全文

    Taget:css3 边框 背景 

  • 0318让网站的图片变成灰色效果兼容所有主浏览器阅读(10863)条2014/3/18 14:25:15

    以前有写过用 【HTML5&jQuery指向时图片从灰度变成彩色】 的文章,不兼容跨域的网站图片,所以今天看到有篇文章支持多浏览器图片变灰度的效果。就把上一篇文章改进一下。希望在前端努力的朋友可以借鉴一下。兼容:兼容Firefox 3.5+, Opera 15+, Safari, Chrome, and IE。效果图如下:(因为本人虚拟机不支持SVG文件的打开,所以只能你自已手动复制内容到本地运行!)  源代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM...阅读全文

    Taget:css 灰色 图片 

  • 0312Web开发者不容错过的10段CSS代码阅读(7207)条2014/3/12 13:54:03

     Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。  本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。  1. CSS Resets  网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片...阅读全文

    Taget:css web 开发 

  • 0304实现CSS3动画的工具、特效和教程指南阅读(7941)条2014/3/4 10:24:32

    CSS3的动画能够实现动画从一个CSS样式配置过渡到另一个。动画由两部分组成,描述了CSS动画和一组关键帧指示动画风格的开始和结束状态。  CSS 动画 工具Tridiv Animate.css Anima animo.js CSS3 Animation Cheat Sheet Ceaser Magic CSS3 Animations Stylie Sencha Animator CSS3 Keyframes Animation Generator Morf.js CSS 动画教程及特效Animated 3D Bar Chart with C...阅读全文

    Taget:css3 教程 特效 

当前第  2  页 / 共  9  页  总共108条记录  

12345678