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