CSS相关
最近受到了App Store主页风格的影响，正巧又看到了sketch官网的设计，所以深受卡片式的影响。真巧最近在改别人的主题，于是就想自己去写一套卡片式风格的typecho主题。
那么，我就开始边学css/js，边写主题，把学的用到的都记录下来。
CSS颜色渐变
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。 ```css / 渐变轴为45度，从蓝色渐变到红色 / linear-gradient(45deg, blue, red); / 从右下到左上、从蓝色渐变到红色 / linear-gradient(to left top, blue, red); / 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 / linear-gradient(0deg, blue, green 40%, red);
/扁平式卡片设计/
background-image: linear-gradient(153deg, #e64c4c 0%, #ef32fb 95%); background-image: linear-gradient(153deg, #8adc32 0%, #25c7a2 95%); background-image: linear-gradient(153deg, #e64c4c 0%, #fb8332 95%); ```
CSS卡片式颜色变换（CSS 子元素选择器）
对于多个卡片可以颜色变换 使用nth-child()函数判断第几个或者让第一个标签的颜色变换
可以使用 > 选择器变换class中的属性
比如
css
.block-plugins-list span:nth-child(3) > .colorgradient-card {
background-image: linear-gradient(153deg, #ef33f2 0%, #3544dc 95%);
box-shadow: 0 3px 15px 0 rgba(92, 64, 224, 0.5)
}
判断.block-plusins-list中的span标签个数 （第三个） 让其下的子元素 .colorgradient-card 属性值更换
那么原html中应该这样写
<div class="block-plugins-list">
<span> <span class="colorgradient-card">One</span></span>
<span> <span class="colorgradient-card">two</span></span>
<span><span class="colorgradient-card">three</span></span>
<span><span class="colorgradient-card">four</span></span>
</div>tva2.sinaimg.cn/large/006tKfTcly1g1bmocgx9yj30fp09yad9.jpg)
CSS 卡片添加阴影
box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。
box-shadow: 0 3px 15px 0 rgba(27, 132, 211, 0.4);那么整一个卡片式风格可以写成这样(shetch样式)
.colorgradient-card {
background-image: linear-gradient(153deg, #3be2bc 0%, #1b96f1 95%);
box-shadow: 0 3px 15px 0 rgba(27, 132, 211, 0.4);
border-radius: .625rem;
padding: 1.5625rem;
display: block;
width: 100%;
will-change: transform;
transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1)
}CSS 鼠标移入放大平滑过渡
CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
.colorgradient-card:hover {
transform: scale(1.04)
}总体卡片式设计
.colorgradient-card {
background-image: linear-gradient(153deg, #3be2bc 0%, #1b96f1 95%);
box-shadow: 0 3px 15px 0 rgba(27, 132, 211, 0.4);
border-radius: .625rem;
padding: 1.5625rem;
display: block;
width: 100%;
will-change: transform;
transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1)
}
.colorgradient-card p {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
color: #fff !important
}
.colorgradient-card .card-title {
font-weight: normal;
font-size: 1.25rem;
letter-spacing: 0;
font-weight: 400 !important;
line-height: 1.5rem;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1)
}
.colorgradient-card .card-title::after {
content: '';
font-size: 2rem;
margin-left: .3125rem;
display: inline-block;
width: 1.125rem;
height: .9375rem;
background-size: cover;
background-repeat: no-repeat;
background-image: url(/remu.jpg);
will-change: transform;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}
.colorgradient-card .card-subtitle {
font-style: italic;
font-weight: 300;
font-size: 1rem;
color: rgba(255, 255, 255, 0.7) !important;
letter-spacing: -0.12px;
line-height: 25.6px
}
.colorgradient-card .card-subtitle::before {
vertical-align: middle;
content: '';
display: inline-block;
margin-right: .625rem;
width: 1.5rem;
height: 1.5rem;
background-image: url(/images/pages/home/52/icon-plugin-card.svg);
position: relative;
top: -1px
}
.colorgradient-card:hover {
transform: scale(1.04)
}
.colorgradient-card:hover .card-title::after {
transform: translate(3px, 0)
}
.block-plugins-list span:nth-child(2) > .colorgradient-card {
background-image: linear-gradient(153deg, #e64c4c 0%, #ef32fb 95%);
box-shadow: 0 3px 15px 0 rgba(231, 74, 89, 0.4)
}
.block-plugins-list span:nth-child(3) > .colorgradient-card {
background-image: linear-gradient(153deg, #ef33f2 0%, #3544dc 95%);
box-shadow: 0 3px 15px 0 rgba(92, 64, 224, 0.5)
}
.block-plugins-list span:nth-child(4) > .colorgradient-card {
background-image: linear-gradient(153deg, #8adc32 0%, #25c7a2 95%);
box-shadow: 0 3px 15px 0 rgba(59, 203, 137, 0.4)
}
.block-plugins-list span:nth-child(5) > .colorgradient-card {
background-image: linear-gradient(153deg, #e64c4c 0%, #fb8332 95%);
box-shadow: 0 3px 15px 0 rgba(227, 46, 46, 0.4)
}
.block-plugins-list span:nth-child(6) > .colorgradient-card {
background-image: linear-gradient(153deg, #fb8332 0%, #f8c332 95%);
box-shadow: 0 3px 15px 0 rgba(250, 151, 50, 0.4)
}
.block-plugins-list span:nth-child(7) > .colorgradient-card {
background-image: linear-gradient(153deg, #f5515f 0%, #9f046c 95%);
box-shadow: 0 3px 15px 0 rgba(180, 23, 105, 0.35)
}
.block-plugins-list span:nth-child(8) > .colorgradient-card {
background-image: linear-gradient(153deg, #8e2ef7 0%, #61dec7 95%);
box-shadow: 0 3px 15px 0 rgba(111, 167, 214, 0.4)
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div class="block-plugins-list">
<span> <span class="colorgradient-card">One</span></span>
<span> <span class="colorgradient-card">two</span></span>
<span><span class="colorgradient-card">three</span></span>
<span><span class="colorgradient-card">four</span></span>
</div>
</body>
</html>CSS弹性布局（Flex 布局）
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}Webkit 内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
CSS 控制不同设备的显示方案
@media 查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}使用 @media 查询来制作响应式设计：
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}