最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 CSS 效果(或许可以称之为 CSS 艺术).后续几篇文章可能都会与之有关. 当然,本文的主角并不是 css-doodle. CSS本身一直在快速发展更新,标准也与时俱进,各种新特性层出不穷,为了能够使用 CSS 来创造各种布局实现各种形状,除了合理运用及搭配各个属性之外,去理解压榨每个属性的每个细节…

<div class='container' style='width:1200px;margin:0 auto;'> <div style='width:200px;margin:0 auto;height:164px;'><img src='XXX'></div> </div> container外 新增一行满屏div   设置z-index: -1  并且调整位置 <div style="width: 100%;height…

最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- CodePen DEMO -- to the future By Jane Ori] 源代码还是非常非常复杂的,并且叠加了复杂的 SVG PATH 路径. 我尝试着将其稍微拆分成几小块,运用不同的 CSS 高阶技巧从另外一个方面方向重新实现了一遍.因为整个过程还是有非常多有意思的 CSS 技巧,本文…

3.css定义的技巧:[1].为了将来的css代码优化,建议所有的属性上要带上“:” [2].某些html 标签,有自己默认的css属性值,       例如h1 标签就有自己的属性值,自动就是加粗显示.字号比较大. [3].为了兼容主流浏览器,为了统一,建议我们在建设是,将所有元素的css 属性,重置为标准         的.[4].不同的浏览器,有各自不同的css属性值----要命的,就是浏览器的兼容. [5].就一个比较特殊的字体想用,怎么办?--将其转换为图片.       分中英文字…

先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属性(opacity)的区别:使用 opacity,所有子元素都会受到影响: 在实际开发中,有些地方用rgba()函数也更加方便:为网站 header 定制主题.文章标题.按钮.渐变.子元素.调色盘中的深/浅效果.图像效果. 最后也指出使用rgba()需要注意的地方:比如兼容性.颜色对比检查等等. 原…

当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢shirley帮忙录制上面的视频,虽然视频内容是手机上的显示效果,但是,这个“企业新年祝福活动”原本只针对桌面端,移动端是后来辅助增强(增加了相当于活动页面UV 5.7%的点击).而目前大多数类似页面只针对移动端,例如其他同事实现的QQ空间5.0预约页第二版: 扫码(需登录)或者链接二选一: 访问dem…

CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好.当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.今天我们精心准备了10条对网页设计师最有用的CSS技巧,如果你想设计出独一无二脱颖而出的网页你必须得好好注意了.这篇博客是在与一家提供高质量印刷服务的在线印刷公司“ Business Ca…

各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新.最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网.这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码.现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能. 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要…

在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧与知识能事半功倍的给大家以帮助,经验丰 富的CSS程序员通常都知道这一点,但初学者不要错过了!重要的CSS规则 这里有25个非常有用的CSS技巧,将帮助你解决让你棘手的CSS代码问题.你可以直接 使用到你现在的项目当中 1.更改文本突出显示颜色(Change Text Highlight Color…

导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%…