文章列表
moonye 于 2年前发表 1545 0 0
##CSS3的3D变换 ###transfrom属性 attr des css level transform 向元素应用 2D 或 3D 转换。 3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。 3 backface-visibility 定义元素在不面对屏幕时是否可见。 3###@transfrom兼容性 IE10,firefox以及Opera支持@keyframe,而chrome和safari需要加浅醉-webkit-,IE9及早期IE版本是不支持的,所以这些功能一般是在移动端使用. ###一个demo 这个div会沿着Y轴旋转130deg div { transform: rotateY(130deg); } ###一个H5上的应用场景 实现一个旋转木马的效果,这里列出核心代码,完整的后续放在github上 ####核心是css代码
2年前
CSS/重构
黎清龙 于 2年前发表 1936 3 1
1. ICOFONT简介 什么是icofont?正如字面意思,就是图标字体,下面我给大家慢慢道来 web页面包含什么元素? * 文字 * 链接 * 流媒体 * 视频 * 音频 * 图片 * 背景图(大) * 插图(中,例如照片集,课程封面等) * 图标(小) 在所有包含ui的程序架构中,以上不同的ui元素在各种环境中都会遭遇到不同的问题,同时也都有与之对应的解决方案 icofont 就是一个解决【图标】问题的解决方案之一 1.1 图标问题 首先来看一下图标会有什么难题: * 图标的大小会变,在两种情况下: * 每次ui改版,那些厌倦一成不变喜欢尝鲜的设计师们总是会淘气地改变图标大小,图标一般是点缀其他事物,例如文字,有时候设计会把某个图标从一段描述文字改成标题的点缀,这时候图标就需要变大 * 自适应页面,整个页面的大小都在变,难道图标还能独善其身吗? * 图标会经常换,这点还是那些设计师的问题,他们说不好看要换,作为开发我们还能说什么?
2年前
CSS/重构
结一 于 2年前发表 4557 8 3
在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的一个宽或高,那么另一个值就会按照图片真实比例缩放,如 <img class="demo1" src="http://placehold.it/200x150" alt="" <img class="demo2" src="http://placehold.it/400x300" alt="" .demo1{ width: 100px;/* 只设置宽度,根据等比例缩放得到高度为75px */ } .demo2{ height: 150px; /* 只设置高度,根据等比例缩放得到宽度为200px */ } 图片因为本身存在宽高比,所以设置一个值,另一个值自动也就根据真实的比例对应上,但是如果是视频呢? 一般在响应式中,我们会要求视频的宽高比为16:9或4:3,这么一来就比较头大了。当用户改变浏览器宽度的时候(改变高度不考虑),视频的宽度变了,那么高度也得根据我们要求的16:9或4:3改变。 这里老外提供了一个很巧的方案: Creating Intrinsic Ratios for Video
2年前
CSS/重构
江源 ,非常让人头疼…… 于 2年前发表 1627 0 0
想让 markdown 高亮,找了点插件,比如 https://github.com/jonschlinkert/sublime-markdown-extended [sublime-markdown-extended] 可以让 代码块 高亮。但没有达到我想要的效果,我想让 markdown 的每个部分高亮,比如 # 标题 高亮。 然后找到了 sublime-monokai-extended [https://github.com/jonschlinkert/sublime-monokai-extended] 这个达到了我的效果,但是将整个的 color scheme 都改了,自然不行。 现在的问题是—— 在当前的 COLOR SCHEME 高亮 MARKDOWN 继续寻找,然后找了这个 markdown.xml [https://gist.github.com/CrazyApi/2354062] 按照上面说的,将代码复制到我的 Obsidian.tmTheme ,成功了。在现有 color scheme 上高亮了 markdown 。
2年前
CSS/重构
黎清龙 于 2年前发表 2415 3 1
这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容的前后添加内容,其实这没有什么前后的概念,如果应用了absolute的特性之后,你可以把这些伪元素放在任何位置,有了这两个伪元素,就代表每个元素都有两个助手可供使用,灵活运用它们的话将会得到很多有趣的实现,简化许多实现。 伪元素特性(目前已经遇到的) * 它不存在于文档中,所以js无法操作它 * 它属于主元素本身,有些伪类仅仅是代表元素内容的一部分,譬如:first-letter代表第一个字母;因此当伪元素被点击的时候触发的是主元素的click事件 * 块级元素才能有:before, :after,譬如img就不能设置,亦即某些元素是没有:before, :after的,只要知道一般的块级元素都可以用就行了 各种图标 利用这两个伪类,可以实现需要简单的图标,例如搜索的放大镜,叉叉,箭头等等 //视频播放图标 .course[data-type="2"] { .course__cover { &:before, &:after { content: '';
2年前
CSS/重构
结一 于 2年前发表 2227 3 4
一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况,因为比较难以描述,所以干脆使用了英文标题,要实现的效果如下: 第一个和第三个为正常不处理的情况,第二个和第三个是我们要实现的情况 [http://7tszky.com1.z0.glb.clouddn.com/FuHVM5gtpt-9u-4tmoRuBm-84n__] 以前因为要兼容ie7-,所以对结构比较有要求,实现起来也比较复杂。这里我们先讨论下ie8+的情况,然后在来讨论下更高级的flex实现。 IE8+ 实现思路为:设置body最小高度为100%,相对定位,然后空出底部的高度,关键是要设置盒模型box-sizing为border-box或padding-box,最后将footer绝对定位在底部即可。 html代码如下: <body ... <div class="footer"</div </body css代码如下: html{ height: 100%; }
2年前
CSS/重构
结一 于 2年前发表 1395 1 0
##为什么要用sass 在选择sass之前,我们先说下为什么要使用CSS Preprocessor。 大概两年前,CSS Preprocessor其实没有这么热,而了解sass,less,stylus的人也还没那么多(当时三者占比less还是拥有绝对优势的),但很多时候就是那么duang的一下,然后改变就发生了,就如html5&css3,仿佛一夜之间就遍地开花。当然这其中质变肯定是有道理值得去说道说道的。下面我们一起来对比下css和CSS Preprocessor(以sass为例),了解下其中的优劣。 CSS无层级嵌套机制 因为css无嵌套机制,所以造成层级方面的阅读及折叠方面极为不便,如下代码,使用scss就能更好的管理代码层级关系 // css .parent{} .parent .child{} // scss .parent{ .child{} } css本身缺少变量机制 举个最简单的例子,每个站点都有个主色,如果没有变量的话,我们只能每次使用都拷贝颜色,当然也有神人是可以把颜色的六位数记住,但多数肯定是记不住。下面以文本色及链接色为例: // css body{
2年前
CSS/重构
黎清龙 于 2年前发表 2952 4 0
前言 最近项目需要实现一个fixed标题栏的功能,很普通的功能,实现核心也是在sroll事件中切换到fixed状态即可,但是在某些版本ios的某些内核中,在惯性滚动过程中不执行任何js代码,亦即不会触发scroll事件,基本任何事情都做不了,为了解决这个问题不得不使用div内滚动,然后使用iscroll库实现滚动逻辑。 基于使用过程中的一些问题,抱着学习的态度,稍微看了一下源代码,现把学习所得记录如下。 源代码学习 核心实现 滑动相关组件(如swipe库)的实现基本都是类似的,就是通过3个核心事件:touchstart,touchmove,touchend完成操作。 switch ( e.type ) { case'touchstart': case'mousedown': this._start(e); break; case'touchmove': case'mousemove': this._move(e); break; case'touchend':
2年前
CSS/重构
黎腾 ,如果sea能带走我的哀愁 于 2年前发表 1169 0 0
缘由 在2013-03-06 13:58的时候,曾甩下一片文章叫:《为什么不使用requirejs和seajs》,并放下豪言说发布一款完美的模块化库,再后来就把那篇文章删了,再然后就没有然后。该用seajs还用seajs,甚至我码的 SCJ [http://htmlcssjs.duapp.com/demo41/index.html] 都是用requirejs组织起来的。 时光飞逝,岁月流转。弹指间,来到了2014年6月15日,也就是昨日,突然码兴大发,一发不可收拾,也许跟最近小说和诗写得比较猛,把码意给压抑了,便有了这次喷发。 JS问题 作为一名前MS必应团队资深当耐特(.NET) 石专 家,拿js与C#开发应用开发做个对比,js主要暴露的问题有: 1.没有class关键字来定义类 2.没有namespace关键字来定义命名空间 3.没有using/require/import/include关键字来处理依赖 4.继承、partial class、static、private、protected、publish等都要通过小技巧或者特定约定规范且手段太多 AMD和CMD的问题
转载自www.cnblogs.com
2年前
CSS/重构