css3

平常我们使用制作进度条的时候都是想的用 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: 详情 »

原文地址: 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 详情 »

在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= 详情 »

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