这篇文章上次修改于 3 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
最近受到了App Store主页风格的影响,正巧又看到了sketch官网的设计,所以深受卡片式的影响。真巧最近在改别人的主题,于是就想自己去写一套卡片式风格的typecho主题。
那么,我就开始边学css/js,边写主题,把学的用到的都记录下来。

CSS颜色渐变

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

CSS卡片式颜色变换(CSS 子元素选择器)

对于多个卡片可以颜色变换 使用nth-child()函数判断第几个或者让第一个标签的颜色变换
可以使用 > 选择器变换class中的属性
比如
判断.block-plusins-list中的span标签个数 (第三个) 让其下的子元素 .colorgradient-card 属性值更换
那么原html中应该这样写
tva2.sinaimg.cn/large/006tKfTcly1g1bmocgx9yj30fp09yad9.jpg)

CSS 卡片添加阴影

box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 ,阴影也会有圆角效果。多个阴影的z-ordering 和多个 规则相同(第一个阴影在最上面)。
那么整一个卡片式风格可以写成这样(shetch样式)

CSS 鼠标移入放大平滑过渡

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。

总体卡片式设计

CSS弹性布局(Flex 布局)

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。
Webkit 内核的浏览器,必须加上-webkit前缀。
注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

CSS 控制不同设备的显示方案

@media 查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
如果文档宽度小于 300 像素则修改背景颜色(background-color):
使用 @media 查询来制作响应式设计:

亲亲留个评论再走呗

正在加载评论区...