0 15px 0 #fff,22个CSS黑魔法

时间:2016-05-11 作者:唐栋瑷 阅读:8230次

  0 15px 0 #fff,22个CSS黑魔法   content: ""; //print the result,<input id="Python" type="checkbox"><label for="Python">Python</label>,除了定义 color,还能定义 shadow 和 backgrounds。   Hey there!'s begin with…   在这篇文章中我们会谈论一些有用的 CSS 技巧…   到目前为止,Firefox 和 Safari 已经能和 Photoshop 一样支持混合模式了,Chrome 和 Opera 也通过带私有标志支持,看一个示例:   's a code of what is going above:   你可以创建不同的混合风格。上述示例的代码如下:   It is rather simple to use, just need to set pseudo-elements with lower z-index:   边框渐变的效果实现很简单,仅仅只需为伪元素设置更低的 z-index :   background-image: linear-gradient;   -clip and background--image property will be supported by all browsers and solution for this will look as follow:   在这里能找到更多示例,另一种方法是通过 background-clip 和 background-origin 来实现。在未来的某一天,border-image 会被所有浏览器支持,其提供的边框渐变方式可能如下:   border-image-slice: 1; /* set internal offset */   You may didn't know but z-index supports transitions too! It doesn't change it's value on each step so you think that it doesn'!   你可能不知道 z-index 也支持过渡效果!它没有在每一步改变它的值,所以你认为它没有过渡效果,但实际上是有的!   We can use it to detect the current color so we don'   我们可以使用 currentColor 来检测元素当前使用的颜色,因而不需要定义 color 很多次。   结合 SVG 图标使用时,currentColor 是很有用的,因为图标颜色的改变闰和单选按钮的样式   让我们不使用图片来改变复选框的样式:   <input type="checkbox" id="check" name="check" />   <label for="check">Checkbox</label>   As you can see, it works with pseudo-elements and pseudo-selector :,   正如你看到的,需要结合使用伪元素和伪类选择器 :checked。在上面的代码中,隐藏了原始的复选框,显示它的替代元素。当复选框被选中时,通过使用 content 属性显示一个 Unicode 字符。   , while in HTML it's decimal and will look like ?.   需要注意的是 Unicode 字符在 CSS 和 HTML 中的表示是不同的。在 CSS 中,数字是被指定为以反斜杠开头的十六进制方式,而在 HTML 中是形如 ? 的十进制方式。   这里 有完整的 Unicode 列表和示例 代码。   利用checkbox实现 jQuery 的6中基本动画效果   并不是所有人都知道 CSS 可以用于计数:   <ol class="list">   counter-reset: i; //reset conunter   counter-increment: i; //counter ID   content: ""; //print the result   We define a random ID in counter-reset property and it'-   在 counter-reset 属性中,定义了一个随机 ID,其默认值是0。你可以在 counter-increment 属性中定义另外一个数字,作为计数的步长。   例如:counter-increment: i 2 将值显示偶数。   利用 CSS 计数器,能统计被用户选择的复选框个数:   <div class="languages">   <input id="c" type="checkbox"><label for="c">C</label>   <input id="C++" type="checkbox"><label for="C++">C++</label>   <input id="C#" type="checkbox"><label for="C#">C#</label>   <input id="Java" type="checkbox"><label for="Java">Java</label>   <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>   <input id="PHP" type="checkbox"><label for="PHP">PHP</label>   <input id="Python" type="checkbox"><label for="Python">Python</label>   <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>   <p class="total">   在这个示例中,我们会增加 input:checked 的数量并打印出来。   <div class="numbers">   <input id="one" type="checkbox"><label for="one">1</label>   <input id="two" type="checkbox"><label for="two">2</label>   <input id="three" type="checkbox"><label for="three">3</label>   <input id="four" type="checkbox"><label for="four">4</label>   <input id="five" type="checkbox"><label for="five">5</label>   <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>   <p class="sum">   #one:checked { counter-increment: sum 1; }   #two:checked { counter-increment: sum 2; }   #three:checked { counter-increment: sum 3; }   #four:checked { counter-increment: sum 4; }   #five:checked { counter-increment: sum 5; }   #one-hundred:checked { counter-increment: sum 100; }   原理和上面的示例是一样的,在线demo和相关文章   还记得你经常使用的汉堡包图标吗?   至少有三种关于怎么绘出这种图标的方法:   box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;   You can just paste this standard symbol: ?'s color or size only so it'   只需要粘贴图标的标准符号:?,你可以调整它的颜色或大小,但它不如其它方法灵活。   此外,你也可以使用 SVG,icon font 或 borders 集合伪元素的方式来实现。   There',, but you still can use it for simple checks:   CSS 中有一个被称为 supports 的新的表达式。正如你看到的,它能检测浏览器是否支持某属性。虽然并不是所有浏览器支持 @support 表达式,但你仍然可以使用它作一些简单的检测:   译者补充:An Introduction to CSS’s @supports Rule   如果你将一个 visibility:visible 的块元素放在另一个 visibility:hidden 的元素中,会产生什么效果呢?   你可能会认为所有元素会被隐藏,但父元素会隐藏除了自身子元素以外的所有元素。看看这个demo   我们发现了一个新功能,现在你可以创建sticky块元素了。这和 fixed 块元素一样,但不同的是, sticky 块元素是不会遮挡另一个块元素的,最好看看demo   现在只有 Mozilla 和 Safari 支持这个属性,但你可以按照下面的方式使用这个属性:   如果浏览器支持 sticky,则会得到一个 sticky 块元素,反之会得到一个普通的元素。当你在手机站需要创建一个可以移动的块元素而不会遮挡其它元素时是非常有用的。   vw – one percent of browser window'   现在有一些新的方式来描述不同对象的大小了,如下:   vmin 和 vmax 表示视口高度和宽度两者中的最小值或最大值。   有趣的是所有现代浏览器都支持它们,你可以自由使用。   Why do we need them? That''t have to specify percentage of parent':   为什么需要它们?因为它们使得所有的尺寸计算变得简单了。你不需要指定父元素大小的百分比和任何其它的stuff。看代码:   或许你可以在屏幕正中间放一个弹出效果了:   看起来是一个很酷的方式,看看Codepen上的示例   在使用这个功能时,也有一些要主要的事项:   
0 15px 0 #fff,22个CSS黑魔法
  译者补充:七个你可能不认识的 CSS 单位   可以用下面几行代码改变被选中文本的颜色:   /*Only Firefox still needs a prefix*/   除了定义 color,还能定义 shadow 和 backgrounds。   If you have some blocks with inner scroll in them then you have to add not only overflow: scroll / auto but this line also:   在触摸设备上,如果你有一些块元素在内部有滚动,则你不仅需要添加 overflow: scroll / auto,还要添加:   -webkit-overflow-scrolling: touch;   The thing is that mobile browser sometimes don't work with overflow:-webkit-overflow-   这种情况是有时设置了 overflow: scroll,移动端的浏览器会滚动整个页面而不是在需要的块元素中滚动。-webkit-overflow-scrolling 修复了这个问题。你可以把它添加到你的项目中看看效果。   Sometimes your animation can to slow down client':   有时,你的动画效果在客户端的计算机上会减慢,为了防止这种情况发生,你可以为特定的块元素使用加速:   In statics you won't notice any difference, but browsers will understands that the element should be treated as three--change,   在静态情况下你可以不会注意到差别,但浏览器会认为这个元素应该被视为 3D 元素并能够加速。在属性 will-change 没有得到正常支持之前,这种方法是很有用的。   现在可以用 Unicode 符号来设置类名:   不要在大项目中使用,因为 UTF-8 可能并不被所有计算支持。   事实上,垂直缩进是根据父元素的宽而不是高来计算的,我们创建两个块元素:   <div class="parent">   <div class="child"></div>   理论上,应该按父元素的高来填充,但是我们得到的效果是相反的:   你应该时刻记住百分比是按照父元素的宽计算的。   对于按钮的margins计算,Firefox有它自己的方式。   并不是所有人知道,通过定义任何对象的文本颜色,也能定义其边框色:   如果你还要支持 IE7 或其他低版本浏览器,你可以用一个smile来定义它们的 Hacks,就像这样:   你可能不知道 z-index 也支持过渡效果!它没有在每一步改变它的值,所以你认为它没有过渡效果,但实际上是有的!,<input id="three" type="checkbox"><label for="three">3</label>,原理和上面的示例是一样的,在线demo和相关文章,The thing is that mobile browser sometimes don't work with overflow:-webkit-overflow-。

相关教程