CSS3

CSS秘密花园: 花式的&符号

几个漂亮的&符号,在大多数电脑上都有;从左到右分别是:Baskerville, Goudy Old Style, Garamond, Palatino(全部都是斜体)。你会在印刷文献中发现很多有不显眼的&符号。设计良好的&符号是非常优雅的,其它的符号都很少能像它这样。整个网站都在致力于寻找有最好看&符号的字体。但是,拥有最好看&符号的字体,却往往不是那个你希望应用于其它文本的字体。毕竟,真正漂亮和优雅的标题效果,总是一个好的无衬线字体和一个漂亮而且复杂的衬线符号的结合。

CSS秘密花园: 连体字母

和人一样,不是所有的字形放在一起的时候都可以显得很自然。例如,对于大多数衬线字体的fi而言。字母i上边的小点经常和f中的横线重叠,使得它们的组合看起来非常笨拙。

CSS秘密花园: 调整tab缩进宽度

代码量重的网页,如文档或教程,在样式方面具有较多挑战。<pre><code>元素是我们用来显示代码块的,在用户代理端有一些默认的样式,但是,这难以满足所有代码的展示要求。其中最大的问题是,虽然tab是理想的缩进代码的方式,它们在Web上经常被避免使用,因为浏览器是用八个字符的宽度来展示它们的。

CSS秘密花园: 斑马条纹背景的文本行

在CSS中实现斑马条纹表格已不是什么新技术了,众所周之使用CSS3的伪类选择器就能轻松实现。但要实现文本的斑纹效果,并不是一件易事,那么这样的效果要怎么实现呢?这篇文章告诉你一种黑魔法,能轻松实现需要的效果。

CSS秘密花园: 插入换行符

很多时候需要通过CSS插入换行符的情况,通常出现在list列表定义中,在其它的情况中也有。很多时候我们使用定义列表,是因为我们想要使用恰当的、语义标记,甚至当我们视觉上想要的只是几行name/value对,而我们通常的做法都是使用<br>之类,那么在CSS中能添加类似<br/>功能吗?感兴趣的欢迎继续阅读全文。

CSS秘密花园: 断字

设计师都喜欢搞文本对齐。在一些令人惊叹的杂志或书籍设计中,文本对齐随处可见。然而,在Web上,对齐却很少使用,甚至是熟练的设计师也很少用。

content

content属性与::before::after伪元素配合使用,向网页中某个元素插入生成内容content属性的值就是通过伪元素插入到该元素的内容。使用content属性插入的内容可以是文本字符串、 符号、 图像、 计数器(即样式列表),或引号。同时,将多个值合并为一个,也是可能的。请参阅以下的值和一些详细的实例。

如何实现平滑的“box-shadow”动画效果

你如何在 CSS 中设置box-shadow属性实现动画效果,既不会导致重新绘制每一帧,又不会严重影响你页面的性能?回答是:你并不能实现。因为box-shadow的动画变化会损害性能。这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制,应该创建一个伪元素并对其opacity元素进行动画处理,使其以每秒60帧的动画模仿运动物体相同的效果。

使用Flexbox的六个理由

您使用 flexbox吗?上周我在 twitter 上,问了这个问题,很惊讶地发现,不少于 50%的人回答是。之所以感到惊讶是因为,直到最近,我并不在我的任何项目中使用 flexbox ,我想我一定是唯一的一个。我不使用 flexbox 有几个原因。但是,经过一些调查研究之后,我的担忧得到明显的减弱,我已经开始了转变。所以这里有你应当开始使用Flexbox的六个理由。

CSS属性:background-size

background-size属性用于指定背景图像的大小。背景图像可以被设置为覆盖该元素的整个背景区域,或者被设置为由CSS作者所定义的明确的尺寸大小。可以使用 cover 关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例,那么该图像的高度和宽度的固有比率将被保留。

页面

返回顶部