文章列表
莫卓颖 于 1年前发表 4205 3 1
背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。本文将会试图探讨完成这个简单需求的方法。 方案一 实现思路:为元素中预先设置边框,边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。 兼容问题:无 实现代码: HTML结构 <ul class="parent"> <li></li><li></li></ul> CSS .parent{ width: 500px; background: #000; overflow: hidden; } .parent li{ width: 200px; background: red; border: 2px solid #000; margin-right: 2px; height: 200px; float: left; } .parent li:hover{
1年前
CSS/重构
结一 于 1年前发表 11190 2 8
本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3动画也不是什么新技术,既然是要搞定它,好歹我们也得先看下别人做的一些东西吧,所以在此先向各位推荐几个比较好用的动画库: * animate.css [https://github.com/daneden/animate.css/] * effeckt [http://h5bp.github.io/Effeckt.css/] * hover.css [http://ianlunn.github.io/Hover/] * animatable [http://leaverou.github.io/animatable/] 关于CSS3动画不得不说的几个属性 看完上面那些动画库,心痒就不如行动了。 说起css3动画,有一个属性我们绝对避不开了,那就是 transform 这个属性,而如果要搞点高级的3d特效,那还有两个比较容易混淆的东西 perspective 和 preserve-3d ,下面我们简单说明关于这些的一些疑难点。
1年前
CSS/重构
刘志龙 于 1年前发表 1665 5 1
最近在学习sass,从sass新手的角度做一个简单的总结,总结的不对的地方期望各位大大们能多多指点,本文是针对sass3.4做的一个总结~ 一、变量篇 1.1 变量的使用 sass的变量以$开头,类似php里变量的写法  $blue : #1875e7;  div {   color : $blue;  } 上面那个例子是把变量用在属性值上,如果要用在选择器或属性名上呢?如果我们简单的这样写: $name: test; $attr: border; p.$name { $attr-color: red; } 编译出错了,正确使用方式应该是用 #{} 包裹,上面的这个例子正确用法是: $name: test; $attr: border; p.#{$name} { #{$attr}-color: red; } 了解了变量的简单使用,要用好变量,息息相关的就是作用域了。 1.2 变量的作用域 sass支持局部变量和全局变量。定义在选择器内的我们称为局部变量,反之为全局变量。简单的在sass3.4中看一个例子 $width: 10px; .wrap{
1年前
CSS/重构
结一 于 1年前发表 9535 8 6
相信写css的人都会遇到下面的问题: * 糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点... * 而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地方用了,还是其他地方都用了? 于是就有了下面的做法: * 最后终于被逼出了个class,简洁也好,中英混搭也罢,看着一头雾水也没关系,反正最后页面显示出来的。 * 这个class应该是只有这个地方用到,我可以放心写。上线之后。如果没问题,则暗自自我欣赏,看吧问题就这么简单,分分钟搞定呀;如果冲突了,则无限感慨,哎,改的时候我就隐隐不安啊,妈蛋,深坑,这是谁写的,谁写的!!! * 不好,这个class说不定其他地方也用到了,我得加个限制范围,加个父元素?要不重新再命名个class吧,比较保险。最后如果没问题则表示还好比较机智,怎么说哥也是混过的,还是有几斤几两的;如果有问题则表示防不慎防啊,这也太太太坑了吧。 由此可见,class的命名真不是一件简单的事,尤其还要兼顾可辨别性与可读性。 CLASS命名到底有多难
1年前
CSS/重构
何璇 于 1年前发表 1606 0 0
font-carrier [http://purplebamboo.github.io/font-carrier/] 是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当然unicode也是支持的font.setSvg('我',fs.readFileSync('./test/svgs/circle.svg').toString()) //也可以使用setGlyph可以设置更多信息font.setGlyph('我',{ glyphName:'我', horizAdvX:'1024',//设置这个字形的画布大小为1024svg:fs.readFileSync('./test/svgs/circle.svg').toString() }) 上面是其官方的接口阐述,我们在网站中使用Iconfont一般都是通过unicode的: @font-face{ font-family:"webfont"; src:url("./fonts/webfont.eot");
1年前
CSS/重构
结一 于 1年前发表 2112 0 1
“人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》 如果重构分里子与面子的话,那么html应该是负责里子的,而css就是负责面子了。在上篇 html结构的拆与合 [http://imweb.io/topic/55ea599844d58914555d5e57] 说了html之后,我们继续来说下css,这次我们从可变与不变的角度分析。 一个面试题 首先这是一个面试题,其次反正我是没做过这个面试题,最后忘了是哪个厂的面试题。 具体的要求我忘了,大概的意思就是要这个内容在视窗内垂直方向居中,以图片为参考,文字上下延伸,上面文字多了向上撑开,下面文字多了向下撑开,图片大小固定,文字多少不固定(红线是我加的,作为垂直方向的中间线,以辅助说明)。这里文字属于可变因子,而图片属于固定因子。 一个面试题 [http://7tszky.com1.z0.glb.clouddn.com/FoKseYaJvlSxysiP3B-wVDzR2tD9] 思路分析
1年前
CSS/重构
结一 于 1年前发表 2609 0 0
写下这篇标题的时候,脑海中突然闪过《三国演义》的纲领——天下大势分久必合合久必分。也许html结构也如是,总是在拆拆合合中演绎着一段段神奇的故事。 玩过七巧板的都知道,虽然看起来只有七块,但随便拼装下就是一份不一样的惊喜。而对于重构也一样,常用的标签也就那么几个,但是经过一番拼凑就会呈现出不一样的美。 闲话暂且不表,先来个本文思路来源的实例。 断续进度条 下面是一个进度条,估计大家大概一眼就可以看出这个进度条与普通的不一样,这个进度条是有缺失区域的,有点像被老鼠偷吃了,断断续续的。 断续进度条 [http://7tszky.com1.z0.glb.clouddn.com/FoHmnbcTzMqPt08HXG9QTJSk8e1V] 这个原本是一个朋友发给我的,问我有什么好的建议,当时想了想也确实想不到什么好的办法,就只好说一个个切吧,那就是本文所说的拆了,结构如下: 底部灰色由progress的背景实现,其余每个done表示一个蓝色段,每个undo表示一个灰色段,各自设置对应的宽度 .progress .progress-done .progress-undo
1年前
CSS/重构
link ,除了分享,也是知识管理。 于 1年前发表 3932 0 1
街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border:[http://7tszky.com1.z0.glb.clouddn.com/Fg8OjQ3yHWrQyg0IA0kXG-GMn7uf] 从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的border-image: [http://7tszky.com1.z0.glb.clouddn.com/FmfBKPpD4hdPyvQFjaCHAFBco9Jp] 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 同样,在使用border-image时,将border设计为物理1px,如下: 样式设置: .border-image-1px{
1年前
CSS/重构
结一 于 1年前发表 4418 2 2
最近在做整站方面的优化,所以借此机会把一些经验思想记录汇总成文,总览如下图: HTML整站设计 [http://7tszky.com1.z0.glb.clouddn.com/Flxv0gMtMWPGj1eP5C4dYSSnWGPO] 整体结构 整体分为header,section-main和footer三大核心,而section-feature和section-postscript则根据需要增删。最外层为全屏背景的承载,中间的inner-center为居中内容 header.header.inner-center section.section-feature.inner-center // if section.section-main.inner-center section.section-postscript.inner-center // if footer.footer.inner-center 如主体内容为多个全屏交替,则使用多个section-name布局,如首页: header.header.inner-center
1年前
CSS/重构
结一 于 2年前发表 2532 3 1
由于业务关系,有幸参与 腾讯课堂app下载 [http://ke.qq.com/download/app.html] 页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知识积累及讨论交流。 区分浏览器 既然要实现高级浏览器与低级浏览器不同效果,所以必要的区分下浏览器,使用js给body添加class var lte9 = document.all && !window.atob; if(lte9){ //$('body').addClass('lte9'); document.documentElement.className += ' lte9' }else{ //$('body').addClass('modern'); document.documentElement.className += ' modern' } 全屏元素布局 背景图片(这个是不兼容的,可以通过js来解决,这里因为图片本身很大,所以直接忽略不兼容,设置background-position:
2年前
CSS/重构
结一 于 2年前发表 1662 5 0
一般来说,有重构的团队,工作流程是这样的:设计师出稿 > 重构转静态页面 > jser拉取数据实现交互等 …这样我们总是有静态页面在备份的,下次遇到修改什么的或者换一个人,还是可以由这个简单的静态页面熟悉下html结构。 而没有重构或一个人一条龙服务的,那就是:设计师出稿 > 边写页面边拉取数据实现交互…这种模式下,是不存在静态页面备份的,如果碰到修改什么或者换人,那看到的直接就是源代码中的各种逻辑判断,如果是你自己写的代码那恭喜你,如果不是的话要不就连猜带蒙要不就咬紧牙关啃吧,当然最后还是免不了各种bug。 最近因为改版一个模块,所以想去改善下这种方式,经过各种弯路,最后选择在scss文件中注释html结构。因为scss是按模块组织文件的,一个模块一个scss文件,所以这是非常合适的。 以 腾讯课堂 [http://ke.qq.com] 课程卡片模块为例:[http://7tszky.com1.z0.glb.clouddn.com/Fglzp9ltBn3EClXeuwDS8OnVrURd]
2年前
CSS/重构
黎腾 ,如果sea能带走我的哀愁 于 2年前发表 1963 4 0
[http://litten.github.io/assets/blogImg/chord1.jpg] 诚然,吉他有上千个和弦。世界上最厉害的吉他大师,也无法一眼辨识出所有的和弦。 更多时候,我们熟记几个基本的和弦,然后通过一定的计算法则,去推导其他的和弦。因而推导的逻辑就非常重要。 《吉他三月通》一书把这乐理洋洋洒洒说了一百多页,我想试着让事情简单一些。 最后,我们将逻辑实现成一个 小程序 [http://litten.github.io/assets/demo/chord/index.html] ,可以方便打印出想要推导的和弦。 ###音乐与数学的不同 在这之前,我们得谈点有趣的事情,它们都有共同的原因: * 为什么我们会觉得某首歌很“中国风”? * 为什么某些日本的传统音乐听起来很“诡异”? * 为什么钢琴要做成黑键白键,所有键都一样不行吗? 我们常用正整数:1、2、3、4、5、6、7 , 对应和弦:C、D、E、F、G、A、B, 对应音符:Do、Re、Me、Fa、So、La、Ti 每个正整数之间,都是相差1;而按频率高低排列的音符,由于历史原因,它们并不是等差数列。
2年前
CSS/重构