仿CSS-Tricks网站风格的响应式标签栏和搜索条

CSS-Tricks Style for tags & search bar

css, tag, search

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3019
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Lato");
*,
::before,
::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font: 600 62.5% "Lato", sans-serif;
    background-color: #17141d;
}
a {
    text-decoration: none;
    white-space: nowrap;
    font-size: 1rem;
    color: #a1a1af;
}
a.tag {
    display: block;
    padding: 0.3em 0.85em;
    margin: 0.5em;
    text-transform: uppercase;
    border: 3px solid #28242f;
    border-radius: 2em;
    transition: transform 0.2s;
    transition-timing-function: cubic-bezier(0.45, -0.85, 0.55, -0.45);
}
a.tag:hover {
    transform: scale(1.2);
    background: linear-gradient(to right, #ff8a00, #da1b60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container {
    margin: 2em 6em;
    padding: 3em;
    padding-left: 1em;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    color: #a1a1af;
    border: 1px solid #28242f;
    border-radius: 0.35em;
    background-color: #201c29;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 70% 50%;
    box-shadow: 0 10px 60px #070509;
}
.container .tags {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .tags span {
    margin-right: 1em;
    padding: 1em;
    text-transform: uppercase;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    border-left: 3px solid #28242f;
    background: linear-gradient(to right, #ff8a00, #da1b60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container .tags a:last-child {
    margin-left: 0.5em;
}
.container .tags a:last-child:hover {
    color: white;
}
.container label {
    position: relative;
    white-space: nowrap;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: flex-end;
    border: 3px solid transparent;
    border-radius: 2em;
    background-color: #17141d;
    background-image: radial-gradient(circle at 50%, #ff8a00, #da1b60);
    transition: all 250ms ease-in-out;
}
.container label::before {
    position: absolute;
    right: 0;
    bottom: -20px;
    z-index: 0;
    transform: rotate(-35deg);
    width: 4px;
    height: 25px;
    content: "";
    border-radius: 2px;
    background-image: linear-gradient(to top, #ff8a00, #da1b60);
    transition: all 250ms ease-in-out;
}
.container label .tag_search {
    position: relative;
    z-index: 1;
    display: block;
    padding-left: 1.75em;
    width: 42px;
    height: 42px;
    font-size: 1rem;
    border: 0;
    border-radius: inherit;
    background-color: #17141d;
    color: white;
    transition: width 250ms ease-in-out;
}
.container label .tag_search:focus {
    outline: none;
}
.container label:hover {
    width: 20%;
}
.container label:hover::before {
    height: 30px;
    transform: rotate(-90deg) translate(28px, 15px);
}
.container label:hover .tag_search {
    width: 100%;
    padding-right: 1em;
    padding-left: 1em;
}
@media (max-width: 991px) {
    .container {
        background-image: none;
    }
    .container label {
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
    }
}
.text-circle {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(10deg);
    z-index: -1;
    width: 400px;
}
.text-circle path {
    opacity: 0;
}
.text-circle text {
    fill: #a1a1af;
    opacity: 0.1;
}
.dribbble {
    position: absolute;
    top: 1em;
    left: 1em;
}

HTML

CSS-Tricks Style for tags & search bar

css, tag, search

编辑器支持Emmet

快捷键

CSS-Tricks Style for tags & search bar

css, tag, search

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

使用CSS3滤镜/合成模式和伪元素实现仿Spotify网站风格的图像双色特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：