CSS相关

5 年前(已编辑)
编程
849
这篇文章上次修改于 3 年前，可能部分内容已经不适用，如有疑问可询问作者。

最近受到了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属性将失效。

Flex教程

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%;
    }
}

CSS3 @media 查询

评论区加载中...