查看详情

新博客改造的一些有趣的技术要点

最近随着 Ghost 升级,博客主题也做了一些动效的调整,这里面有一些比较有意思的细节,可以和大家分享下。 Ghost-Theme 落地页动画衔接 从首页列表点击进去,实际上是比较简单的 transition 过渡,主要是利用透明度变化和背景图片的放大缩小来完成的。 .cover, .overlay{ content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: #000; background-position: center center; opacity: .2; background-size: cover; } .cover{ opacity: 0; transition: opacity 1.5s, transform 2s; transition-timing-function: cubic-bezier(0.5, 0, 0.2, 1); background-color: 详情 »

查看详情

使用 media query 进行 IE 的 CSS Hack

尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了,但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法: <head> <!--[if gt IE 9]><!--> <style> // your style rule </style> <!--<![endif]--> </head> 关于IE 注释性语句可以看 这里 当然你也可以通过 JS 进行 UA 测判断,然后在 body 加上 ie的 class ,然后在样式里进行限制。 .ie .container{ .... } 当然今天得重点是通过 media 详情 »

查看详情

美化 input range 控制条

平常我们使用制作进度条的时候都是想的用 div 去模拟,在 html5 后,我们可以使用 input range 来实现这样的效果。 默认的效果如图: 你可以设置它的值得范围(min, max) 以及它的步长(step)。 这里的重点是设置它的样式啦: 取消掉默认的样式 在 chrome 和 safari 下我们可以通过声明: -webkit-appearance: none; 取消掉默认的样式,这时候效果如图: 这个时候我们可以设置它的 border 或者 background 等信息。 如果是 chrome 或者 safari 浏览器,以及其他支持设置 设置控制条轨迹的样式的浏览器可以使用伪类 -webkit-slider-runnable-track 来设置控制条轨迹的背景和边框样式; input[type='range']::-webkit-slider-runnable-track{ background-color: #eee; } 而 firefox 则需要使用 ::-moz-range-track: input[type='range']::-moz-range-track{ background-color: 详情 »

查看详情

【译】2017年值得学习的 3 个 CSS 新特性

原文地址: https://bitsofco.de/3-new-css-features-to-learn-in-2017/ @ Ire Aderinokun 新的一年笔者计划学习一些新的东西,自己对下面这三个非常感兴趣。 CSS 特性查询(Feature Queries) 不久前,我单独写过了这篇文章the one CSS feature I really want 提及到自己期期待 CSS 特性。如今它受到了大多数浏览器的支持除了 IE 。特性查询你只需要使用 @support , 它允许我们嵌入css的表示式进行条件判断,如果支持的浏览器则会执行 包含的语句。一个经常想到的便是 判断对于 flex 的支持。 @supports ( display: flex ) { .foo { display: flex; } } 除此之外,使用 and 以及 not 我们可以实现更加复杂的查询语句。举个例子,我们可以判断这个浏览器是不是只支持老板 flex 语法。 @supports ( display: flexbox ) and ( not 详情 »

使用 line-clam 控制段落行数

在2016年3月谷歌率先支持了 line-clam 用于控制一段文字的行数显示。这个时候实现省略号的方式有多饿一种。 先查看下目前的浏览器支持的情况: 也就是说如果在移动端浏览器上支持已经非常广泛,可以在移动端的页面大胆实现在PC上我们还需要考虑降级。 我们需要在装文本内容的部分设置如下样式: overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 效果如下: See the Pen KmOzOd by Jack Pu (@Jack_Pu) on CodePen. 其中 line-clam 表示需要显示的行数。而 display 和 -webkit-box-orient 则需要是盒子类型和以及子元素的排列方式。其中末尾的符号与 text-overflow 的设置相关。如果你设置了 ellipsis 那么末尾就是常见的 省略号了。 如果你使用 sass 或者 less 等 预编译系统,的话如果 -webkit-box-orient 被移除掉了,你可以参考 https: 详情 »

查看详情

实现日本网站字体模糊动画效果

如果经常浏览日本的网站,你会看到日本网站经常会实现在页面中字体添加从模糊到正常的特效。 推荐两个网站,浏览效果: koshiki-stay,是一家提供旅游的网站 houjyuen, 一家园林网站 当然还有很多网站使用了类似效果,你可以 iiiimg 查看一些比较漂亮和充满创意交互的站点。 基本实现 想到模糊,目前前端有两种基本实现 canvas canvas 你需要写一个模糊算法,你可以参考 Codepen 的想法, 关于算法,你还能自行搜索实现。底层原理就是对像素的操作。 css3 filter:blur() 现在移动端和PC的主流浏览器都开始对 CSS Filter 进行支持了,详情可以参考 浏览器的兼容性情况 filter 可以支持很多效果函数: blur contrast opacity url 这里我们主要是用到 blur 这个函数,它可对当前元素进行高斯模糊,效果如下; See the Pen Blur Filter by GRAY GHOST (@grayghostvisuals) on CodePen. 基本样式 详情 »

查看详情

新博客的动画效果实现

最近重新写了 Ghost-theme 的主题。其中主要是取消了Icon-font,改为了SVG Sprite 。其次非常重要的板块首屏的Slide 和导航重新设计了。先看下具体的效果吧: 视频无法播放,可以查看 gif 图片 Slide 切换 切换动画 slide 的切换主要是利用了transform 和 animation 两个重要的属性。而切换的时间函数则需要用到 cubic-bezier(关于贝塞尔曲线的效果可以参考这里)。然后利用少量的JS和手势库就可以完成了。 基本结构 <div id="slideshow" class="slideshow"> <!-- slide --> <div class="slide"> <div class="bg-overlay" style= 详情 »

查看详情

使用css 3 制作长投影Long Shadow

在flat design(扁平化的设计)中,Long Shadow (长投影)被看着屡试不爽的设计技能。比如下面这张,非常经典的长投影设计: 摄影师选择长投影通常是给图片带来戏剧效果, 在自然界中,长投影发生在黄昏的时候,太阳接近地平线时,水平地面上的物体俯瞰就会有长投影的效果。在界面设计中我们通常采用了模拟45度角的效果,模拟阳光从西北角上射来,从而与设计的主题形成鲜明的对比效果。使用photoshop制作长投影有很多种方法,你可以阅读常用的四种方法创建长投影效果,自己平时最喜欢用的也是第四种,通过图层复制和移动来达到这样的效果,比如自己在behance上传的这张图片, 大致原理就是 你复制一个当前图层,选中图层样式,填充黑色,然后将其移到原图层下面。然后使用鼠标或者滤镜都可以实现平移,友移一个单位和下移一个单位。 然后,我们再复制这个图层,再平移一次。然后合并这两个阴影图层 然后我们再重复动作,即把这个图层复制一次,向下移和向右移动2个单位。再执行合并。依次类推复制,移动偶数倍单位,合并,然后再重复。 当然你用滤镜->其他->位移会更加方便 大致就是这样的效果,然后最后设置下透明度就好。 上面说的是设计,前端如何通过css代码来实现这样的效果?大家第一时间想到就是css3已经支持的text-shadow 首先我们给背景添加一种比较突出的颜色吧,自己强烈安利flatcolors这个网站,里面有很多配色方案,随取随用。 详情 »

查看详情

三列布局面试题延伸

昨日和 @喻木大大聊面试的时候聊到了这个话题,其实这个问题挺常见的,不过自己面试到还没问过,问过自适应的等比正方形布局。不过聊到这个问题,下面就详细的说下解决思路和考察要点。希望下次不要被榆木童鞋刷掉了😂。 解决这个问题,先简单描述下具体的需求吧: 给出三列布局,左右两边宽度一定,比如120px啦,然后中间的自适应宽度,即浏览器随着窗口大小的变化而自动变化。 问题大致就是这些,其实思路很多,不过我们从css的发展说起吧。在不同的阶段给出不同的解决方法。 首先我们回到上个世纪,当css还没形成的时候,我们写页面,大家都知道依赖于table布局,所以我们可以用table去模拟这个情况,相信大家很快有思路咯。 <table> <tbody> <tr height="100%"> <td width="200" bgcolor="#1ba1e2"></td> <td> this 详情 »