分类:CSS

CSS的Class和id到底谁比较大牌?(原始码比对版)

相较于前一篇用文字记忆法,这篇则是用原始码做为比较,详细列出一眼辩英雄的矛盾大对决! 从第5项实验,我们成功证明了id确实强过class的效果! 但是这时我突然灵机一动,让写在html元素里的古老方法加入了大乱斗。 看看第6项的结果,没想到会得到这样的发现: Class < id < 写在元素里的Style设定 感觉就像用同花顺打压了别人铁支,在一群朋友的干 […]

Secret 21 用CSS换行

需要用CSS换行的时机通常是在使用definition lists的时候,但有时在其他的场合也会有同样需求。会使用definition lists因为我们想做一个良好的网路公民,所以使用适当、有语意的标记语言,即使在视觉上需要的其实是项目名称和内容的配对组合。例如下面这段标记语言结构: <dl> <dt>Name:</dt&gt […]

网页教学开源社群 freeCodeCamp

想转职当网页项目师,你有听过 freeCodeCamp 吗? 转职写网页? 每当朋友说想要转职当项目师,我都会推荐直接去写网页,因为资源丰富啊!而且市场需求也还在增加!那资源丰富又是为什么呢?如果你有观察过 GitHub 的热门项目,就会发现多数是 javascript 相关的项目,而且窜升最快的也多是网页相关的项目。 再来则是社群,现在 GitHub 上面 […]

Secret 20: 连接线

设计师很喜欢在排版中将文字分散对齐,如果你看设计类杂志或书籍就会发现到处都是。但是在网页上,分散对齐却很少用到,甚至连设计师们也少使用,为什么呢?即使在CSS 1 就已经有了text-align: justify;? 这是因为网页排版是流动的,宽度不固定,而且浏览器排版预设不会断字,当发现句子剩余空间不够塞一个字,浏览器会将这个字放到下一行,当对齐模式设成分 […]

Secret 13: 梯形标签

梯形和平行四边形的差别是,它只有二个边是平行的,另外二个边可以是任何角度。以前这个形状是非常难用CSS做出来,虽然它是一种常见的形状,尤其用在模仿标签的样子。如果不是用background-image的话,一般会在长方形两旁用border仿造出二个三角形。 虽然这个方法省去了用HTTP request去取得图片,也可以适应不同的宽度,但是却不是最好的。这样做 […]

17.使用 Grid + place-content 制作垂直置中区块

简言 place-content 这个 CSS Grid 的属性不知道有多少人用过,此属性是 align-content 与 justify-content 的缩写,简单的说就是水平跟垂直的对齐方式,想当然的,设定 center 就能置中啰。 原理说明 原理…跟简言写的一样,这样解释会不会太偷懒XD 基本上使用简写方式的话,多是多个属性的值和在一 […]

Secret 12: 截角效果 (clip-path)

虽然border-image的做法很简洁也很 DRY,仍然有它的限制,比如说我们还是需要有个纯色的背景。 还记得在钻石形图片中用过的clip-path吗?CSS clipping paths 惊人的功能是我们可以混合使用绝对长度和百分比,这给我们很大的弹性。 例如要制作20px边长大小的截角,它的样式就像这样: .box { background: grey […]

使用 Grid + place-items 来做垂直置中效果

简言 place-items 这属性不知道有多少人用过,我们可利用这个属性来快速设定 X 跟 Y 轴的对齐,达到垂直置中的效果。 原理说明 place-items 此属性是 align-items 与 justify-items 的缩写,简单的说就是水平跟垂直的对齐方式,想当然的只要都设定为 center 就能做到水平置中跟垂直置中啰。原理超简单的,如果不是 […]

使用 Grid + align-self 达到垂直置中效果

简言 align-self 应该大家都不陌生,基本上就是对 grid Y轴的个别对齐方式,只要对单一子层物件设定 align-self: center 就能达成垂直置中的目的了。 原理说明 在我们昨天的说明中有提到 Flex 跟 Grid 都有同样的的属性,而这个 align-self 就是其中之一啦,跟 Flex 的作用差不多,在 Grid 中就是设定在子 […]

Secret 12: 截角效果 (CSS gradient)

裁切的截角不只是用来收集折价券省钱,也是印刷和网页上常见的设计图案。它的表现方式是以45度角裁去元素一个或以上的角落。尤其当近年扁平化设计(flat design)胜过拟真化设计(skeuomorphism),这个效果愈来愈普遍。在按钮同一边的上下二角制作截角效果,就能制造出箭头,在引导使用者浏览网站很有用。 dribbble 然而,CSS 本身还不能以一行 […]