![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
less&sass
文章平均质量分 88
whqet
这个作者很懒,什么都没留下…
展开
-
LESS Hat简单教程
今天给大家推荐LESS的几个Mixin集,其中最著名的要数LESS Hat了,诚如其官方网站所言,“86个智能Mixin可以大大简化网页开发工作”。另外,LESS Elements、Twitter Bootstrap和Preboot几个也不错,都是可以选择的。笔者认为,LESS Hat提供的mixin最多,支持最广泛,建议大家使用。原创 2014-02-04 11:40:29 · 5125 阅读 · 1 评论 -
CSS文字条纹阴影动画
See the Pen shadow text by haiqing wang (@whqet) on CodePen./*Webkit Only,key code for the effect*/ .background-clip(text); -webkit-text-fill-color: transparent;原创 2014-02-06 07:18:00 · 4470 阅读 · 2 评论 -
纯CSS实现3D翻牌效果
CSS3演武场继续CSS案例研究,今天来看一个纯CSS实现的3D翻牌效果,简易效果请大家狠戳这里在线体验,或下载收藏。原创 2014-02-23 14:53:51 · 14359 阅读 · 1 评论 -
Google Fonts Sass Mixin
给大家分享一个codepen上的调用谷歌Web Font的mixin,以此为例我们继续学习SASS。原创 2014-03-15 20:38:40 · 3396 阅读 · 0 评论 -
CSS3立体文字最佳实践
昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,立体字的纵深感、方向感、错落感如何实现个性定制,立体字阴影动画,彩虹字动画等等,一一道来。原创 2014-05-06 13:40:46 · 20538 阅读 · 12 评论 -
iHover鼠标悬停效果包推荐
今天推荐一个鼠标悬停效果包,大家可以通过研读效果提高自己的水平,也可以直接用在自己的项目中。原创 2014-04-16 20:52:01 · 8585 阅读 · 11 评论 -
SASS优化响应式断点管理
当你需要搞定响应式布局时,一堆堆的媒体查询、大量的属性、属性值往往可以把你搞颠,SASS(或者诸如此类的预处理器)被认为是处理响应式断点的最佳利器。说到响应式断点处理,很多种方式涌上心头,经常有人问哪种方式最优,正如前端开发领域的大多数问题一样,这个问题同样没有标准答案,我们需要具体问题具体分析。翻译 2014-05-22 20:52:46 · 5696 阅读 · 0 评论 -
SASS Mixin实现响应式布局
好的,今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。列间空隙的处理,每行的最后一列没有空隙,前面的其他列具有统一的空隙,水平和垂直方向的空隙相等。每列宽度采用百分比的形式进行计算,每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。原创 2014-03-30 08:58:39 · 6424 阅读 · 1 评论 -
Font Include Sass Mixin
前期曾经给大家介绍过一个使用google font的mixin(详见《Google Fonts Sass Mixin》),今天我们再进一步给大家推荐个使用web font的mixin。原创 2014-05-27 15:19:39 · 3004 阅读 · 0 评论 -
SASS基础教程
在SASS官方文档的基础上,加上了自己的解读和相关优秀资源推荐,欢迎大家拍砖!点保存点成了发表,请大家见谅!继续写作中。原创 2014-02-27 19:55:22 · 3240 阅读 · 1 评论 -
鼠标响应文字跳动效果
昨天看到html5tricks上的一篇文章《jQuery鼠标滑过文字跳动动画插件》,止不住手痒用sass、css3实现下,并进行了扩展,希望能对大家有所帮助,主要利用sass@for指令、compass里的random随机数,给文字设置不同的动画状态,利用transition或animation实现动画。原创 2014-05-30 23:02:23 · 9356 阅读 · 7 评论 -
纯css实现粒子效果
好久没有更新的CSS3演武场系列,半年前搁浅的一篇文章赋予新年新气象闪亮登场了,研究一下利用css(sass)实现粒子效果,主要使用box-shadow生成粒子,利用css3 animation和translateZ实现动画。原创 2015-01-09 12:49:57 · 16192 阅读 · 22 评论 -
文字菜单动画畅想
本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛关注,今天我们更进一步,研究一下文字菜单上可以做哪些动画,15种效果会不会有您喜欢的,来来来,不妨进来坐坐。原创 2015-01-30 06:34:57 · 7840 阅读 · 29 评论 -
前端开发规范之项目架构
我们知道,好的编码规范、编程约定非常重要,但是文档架构呢?建立一个好的文档架构是开始一个网站或者APP的基础,我们如何建立一个结构清晰、便于维护的文档架构呢?我们的目标:1)需要一个多页面项目(网站或者APP)2)需要项目支持多屏幕尺寸,换句话说,需要实现响应式布局3)最终产品易维护4)最终产品性能良好5)未来项目可套用该模板翻译 2015-01-02 07:09:39 · 8108 阅读 · 18 评论 -
SASS实现颜色卡动画
今天我们看一个Sass实现颜色卡动画,继续学习sass的使用,效果见下图所示。在线研究点这里,下载收藏点这里。同时也请大家发表高见,迎接鼓励,欢迎拍砖。原创 2014-03-20 13:32:14 · 4115 阅读 · 0 评论 -
SASS实现圆形动画菜单
好的,SASS实现的圆形动画菜单,主要用到了sass中的@for、@if,compass中sin、cos的使用,hsl颜色的使用。原创 2014-03-21 20:47:06 · 4848 阅读 · 1 评论 -
苹果风格的下划线
今天研究一个利用text-shadow和:after伪对象做成的苹果风格的下划线效果。原创 2014-03-17 21:07:03 · 5056 阅读 · 1 评论 -
垂直居中对齐CSS代码
CSS垂直居中对齐,LESS简化书写。原创 2014-02-03 10:03:33 · 4923 阅读 · 0 评论 -
通过开源文档学LESS系列1
今天开始一个系列教程,通过一些国外开源LESS文档来学习LESS。这些开源http://的文档一般都是前端开发实际项目经验的总结,从中可以看出LESS的基本语法和日常使用,也可以从中管窥大牛开发者的智慧。原创 2014-02-07 12:59:00 · 3017 阅读 · 1 评论 -
通过开源文档学LESS系列3
通过开源文档学LESS系列1,我们通过一个经典的LESS Mixins集preboot,学习了LESS的基础知识,包括变量、注释、混合和混合的参数等。通过开源文档学LESS系列2,通过tRRtoolbelt.less的代码解读来学习LESS,主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译。本教程通过解读css effects项目源码来继续学习LESS。原创 2014-02-07 20:29:03 · 3260 阅读 · 0 评论 -
通过开源文档学LESS系列2
通过开源文档学LESS系列的第一部分,我们通过一个经典的LESS Mixins集preboot,学习了LESS的基础知识,包括变量、注释、混合和混合的参数等,详见通过开源文档学LESS系列1。我们继续第二部分,通过tRRtoolbelt.less的代码解读来学习LESS。tRRtoolbelt.less是由Trent Oswald开发的一个便用日常应用的LESS mixinis Collection。原创 2014-02-07 17:20:56 · 3114 阅读 · 0 评论 -
SVG奥林匹克五环动画
昨天晚上索契冬奥会开幕,开幕式上还出现了五环变四环的乌龙,哈哈。我们用SVG弄个五环动画加以弥补。原创 2014-02-08 12:09:50 · 5955 阅读 · 5 评论 -
纯CSS实现手风琴效果
今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。原创 2014-02-23 10:32:16 · 15416 阅读 · 14 评论 -
纯CSS实现倒计时动画
OK,CSS3演武场今天继续,我们重点来看看css3 animation实现逐帧动画,额,按照惯例,看效果点这里,下载戳这里。实现原理a.外盒子div.cell,一个字的宽和高,超过不显示,确保只能显示一个字。b.内盒子div.num,一个字的宽,行高一个字高,我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用step。d.倒计时结束,外盒子动画消失掉。原创 2014-02-25 10:13:43 · 17401 阅读 · 1 评论 -
纯CSS实现图像3D悬停效果
今天来看一个纯CSS实现的图像3D效果,用div.img装载图像的上半段,.img:fefore伪类来实现图像的下半段、呈现图像标题,用.img:after伪类实现图像的阴影。原创 2014-02-16 18:31:21 · 6058 阅读 · 2 评论 -
纯CSS实现的Loading效果
纯CSS实现的Loading效果,CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。原创 2014-02-18 15:34:51 · 4319 阅读 · 0 评论 -
视差滚动原理及实现
作为一种优雅酷炫的页面展示的方式,视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱,优设的2014年网页设计趋势中依然能够看到它的影子,所以我们不得不来好好研究下视差滚动的原理和实现方式。原创 2014-03-04 14:48:03 · 7610 阅读 · 1 评论 -
纯css实现回旋动画
css演武场今日继续,来看一个纯css实现的回旋动画。在线研究点这里,下载收藏点这里。重点关注1. haml简化html,实现效果架构2.sass的使用3.compass类库的使用haml文件- @n = 25.container - @n.times do .thing编译成html之后原创 2014-03-12 13:52:53 · 4332 阅读 · 1 评论 -
纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先。原创 2014-03-05 16:06:25 · 5346 阅读 · 5 评论 -
Flexbox响应式菜单
这两天在研究flexbox,来看一个Flexbox实现的响应式菜单。原创 2014-03-09 20:36:26 · 4166 阅读 · 0 评论 -
Sass map详解
作为一个CSS预处理器,Sass正受到越来越多的青睐,诸如Github、Codepen、CSS-Tricks、SitePoint、w3cplus等网站采用Sass组织、管理CSS文件,Sass正在逐渐成为事实上的CSS预处理器行业标准。接下来几篇文章,我们来研读下Sass中的关键功能,今天来看map,大家不妨一坐,精彩内容马上呈现。 map简介在Sass中,maps代表一种数据类型,可以包含若干键原创 2015-02-16 09:07:22 · 6723 阅读 · 13 评论