HTML5仿Slack聊天移动应用网页模板

Slack Chat App, 多人聊天界面模板。

html5, chat

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    padding-top: 50px;
    padding-bottom: 150px;
    background: linear-gradient(rgba(99, 74, 96, 0.9), rgba(84, 63, 82, 0.9));
    background-size: cover;
}
#square {
    position: relative;
    width: 800px;
    height: 450px;
    display: block;
    margin: auto;
    background: white;
    z-index: 1;
}
#leftSquare {
    width: 26%;
    height: 100%;
    position: relative;
    top: 0%;
    left: 0%;
    background: #4D394B;
    background-size: cover;
    border-radius: 0%;
    z-index: 1;
}
#highlight-channel {
    position: absolute;
    top: 24%;
    width: 90%;
    border-top-right-radius: 1%;
    border-bottom-right-radius: 1%;
    border: 10px solid #4C9689;
}
#header {
    width: 75%;
    display: block;
    margin: auto;
    height: 15%;
    position: absolute;
    top: 0%;
    left: 25%;
    background: none;
    background-size: cover;
    border-radius: 0%;
    z-index: 1;
}
#circle {
    position: absolute;
    border-radius: 50%;
    left: 13%;
    top: 11%;
    width: 4%;
    height: 2%;
    display: block;
    background: #4C9689;
    margin: auto;
    z-index: 3;
}
#circle2 {
    position: absolute;
    border-radius: 50%;
    left: 16%;
    top: 60%;
    width: 4%;
    height: 2%;
    display: block;
    background: #4C9689;
    margin: auto;
    z-index: 3;
}
#circle3 {
    position: absolute;
    border-radius: 50%;
    left: 16%;
    top: 65%;
    width: 4%;
    height: 2%;
    display: block;
    background: #4C9689;
    margin: auto;
    z-index: 3;
}
.brand {
    position: absolute;
    display: block;
    top: 38%;
    left: 25%;
    margin: auto;
    width: 50%;
    height: 60%;
    z-index: 1;
}
#icons {
    padding-bottom: 5px;
}
.title {
    position: absolute;
    top: 5%;
    color: white;
    font-family: "lato";
    font-size: 20px;
    font-weight: 800;
    padding-left: 10%;
    text-align: left;
    z-index: 3;
}
#subtitle {
    position: absolute;
    left: 19%;
    top: 6%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.5;
    font-weight: 100;
    text-align: center;
    z-index: 3;
}
#subtitle2 {
    position: absolute;
    left: 22%;
    top: 54.7%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.5;
    font-weight: 100;
    text-align: center;
    z-index: 3;
}
#subtitle3 {
    position: absolute;
    left: 22%;
    top: 59.7%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.5;
    font-weight: 100;
    text-align: center;
    z-index: 3;
}
#channel-title {
    color: #2C2D30;
    font-family: "lato";
    font-size: 18px;
    font-weight: 800;
    padding-left: 3%;
    text-align: left;
    z-index: 3;
}
#channels {
    position: absolute;
    left: 13%;
    top: 14%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.6;
    font-weight: 400;
    text-align: center;
    z-index: 3;
}
.add {
    position: absolute;
    right: -72%;
    opacity: 0.6;
    top: 5%;
}
.add-two {
    position: absolute;
    right: -15%;
    opacity: 0.6;
    top: 5%;
    z-index: 3;
}
.star {
    padding-left: 3%;
    opacity: 0.6;
    z-index: 3;
}
.user {
    padding-left: 4%;
    opacity: 0.6;
    z-index: 3;
}
.pin {
    padding-left: 4%;
    opacity: 0.4;
    z-index: 3;
}
.phone {
    position: absolute;
    top: 45%;
    right: 48%;
    opacity: 0.6;
    z-index: 3;
}
.cog {
    position: absolute;
    top: 45%;
    right: 42%;
    opacity: 0.6;
    z-index: 3;
}
.details {
    position: absolute;
    top: 45%;
    right: 36%;
    opacity: 0.6;
    z-index: 3;
}
#line3 {
    position: absolute;
    right: 33%;
    top: 8.5%;
    font-family: "lato";
    font-size: 18px;
    opacity: 0.5;
    font-weight: 100;
    color: #2C2D30;
}
.search-glass {
    position: absolute;
    top: 43%;
    right: 28%;
    opacity: 0.5;
    z-index: 3;
}
.at {
    position: absolute;
    top: 45%;
    right: 12%;
    opacity: 0.6;
    z-index: 3;
}
.star-o {
    position: absolute;
    top: 45%;
    right: 7%;
    opacity: 0.6;
    z-index: 3;
}
.menu {
    position: absolute;
    top: 45%;
    right: 3%;
    opacity: 0.6;
    z-index: 3;
}
.search {
    position: absolute;
    right: 17%;
    top: 38%;
    height: 30%;
    width: 14%;
    font-weight: 100;
    padding-left: 20px;
    font-family: "lato";
    font-size: 12px;
    opacity: 0.6;
    color: #2C2D30;
}
#line {
    position: absolute;
    left: 7%;
    top: 46.5%;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.5;
    font-weight: 100;
    color: #2C2D30;
}
#line2 {
    position: absolute;
    left: 14%;
    top: 46.5%;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.5;
    font-weight: 100;
    color: #2C2D30;
}
.bottom-header-line {
    margin-left: 8px;
    width: 98%;
    margin-top: 0;
}
#channel {
    position: absolute;
    left: 16%;
    top: 20%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 1.0;
    font-weight: 100;
    text-align: center;
    z-index: 3;
}
#messages {
    position: absolute;
    left: 13%;
    top: 50%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.6;
    font-weight: 400;
    text-align: center;
    z-index: 3;
}
#channel2 {
    position: absolute;
    left: 16%;
    top: 26%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    font-weight: 100;
    text-align: center;
    z-index: 3;
}
#channel3 {
    position: absolute;
    left: 16%;
    top: 32%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.6;
    font-weight: 100;
    text-align: center;
    z-index: 3;
}
#channel4 {
    position: absolute;
    left: 16%;
    top: 38%;
    color: white;
    font-family: "lato";
    font-size: 13px;
    opacity: 0.6;
    font-weight: 100;
    text-align: center;
    z-index: 3;
}
#highlight {
    background: #4C9689;
}
#light {
    margin-left: 5px;
    opacity: 0.5;
}
#opacity {
    color: white;
    font-weight: 800;
    opacity: 0.6;
}
#bold {
    color: white;
    font-weight: 800;
    opacity: 1.0;
}
.bell {
    position: absolute;
    color: #D0CDD0;
    opacity: 0.6;
    top: 5%;
    left: 89%;
}
.down {
    position: absolute;
    color: #D0CDD0;
    opacity: 0.3;
    top: 4.25%;
    left: 80%;
}
#message-area {
    position: absolute;
    background: none;
    width: 70%;
    right: 2%;
    top: 18%;
    display: block;
    margin: auto;
}
#message-area-two {
    position: absolute;
    background: none;
    width: 70%;
    right: 2%;
    top: 30%;
    display: block;
    margin: auto;
}
#message-area-three {
    position: absolute;
    background: none;
    width: 70%;
    right: 2%;
    top: 42%;
    display: block;
    margin: auto;
}
#message-area-four {
    position: absolute;
    background: none;
    width: 70%;
    right: 2%;
    top: 54%;
    display: block;
    margin: auto;
}
#message-area-five {
    position: absolute;
    background: none;
    width: 70%;
    right: 2%;
    top: 66%;
    display: block;
    margin: auto;
}
#message-area-six {
    position: absolute;
    background: none;
    width: 70%;
    right: 2%;
    top: 78%;
    display: block;
    margin: auto;
}
.person-one {
    width: 50px;
    height: 50px;
    border: white;
}
.person-img-one {
    border-radius: 10%;
}
#person-name {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    font-weight: 800;
    padding-left: 10%;
    top: -5%;
    text-align: left;
    z-index: 3;
}
#time {
    color: #2C2D30;
    padding-left: 5px;
    font-family: "lato";
    font-size: 11px;
    opacity: 0.6;
    font-weight: 400;
}
#person-text {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.7;
    padding-left: 10%;
    top: 25%;
    text-align: left;
    z-index: 3;
}
.person-two {
    width: 50px;
    height: 50px;
    border: white;
}
.person-img-two {
    border-radius: 10%;
}
#person-name-two {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    font-weight: 800;
    padding-left: 10%;
    top: -5%;
    text-align: left;
    z-index: 3;
}
#person-text-two {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.7;
    padding-left: 10%;
    top: 25%;
    text-align: left;
    z-index: 3;
}
.person-three {
    width: 50px;
    height: 50px;
    border: white;
}
.person-img-three {
    border-radius: 10%;
}
#person-name-three {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    font-weight: 800;
    padding-left: 10%;
    top: -5%;
    text-align: left;
    z-index: 3;
}
#person-text-three {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.7;
    padding-left: 10%;
    top: 25%;
    text-align: left;
    z-index: 3;
}
.person-four {
    width: 50px;
    height: 50px;
    border: white;
}
.person-img-four {
    border-radius: 10%;
}
#person-name-four {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    font-weight: 800;
    padding-left: 10%;
    top: -5%;
    text-align: left;
    z-index: 3;
}
#person-text-four {
    position: absolute;
    color: #2C2D30;
    font-family: "lato";
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.7;
    padding-left: 10%;
    top: 25%;
    text-align: left;
    z-index: 3;
}
.search-bottom {
    position: absolute;
    display: block;
    margin: auto;
    left: 28%;
    bottom: 3%;
    height: 5%;
    width: 70%;
    font-weight: 100;
    padding-left: 28px;
    font-family: "lato";
    font-size: 12px;
    opacity: 0.6;
    color: #2C2D30;
}
.smile {
    position: absolute;
    display: block;
    margin: auto;
    bottom: 4%;
    right: 3%;
    opacity: 0.6;
    color: #2C2D30;
}
.plus {
    position: absolute;
    display: block;
    margin: auto;
    bottom: 3.75%;
    left: 28.75%;
    opacity: 0.3;
    color: #2C2D30;
}
#line-bottom {
    position: absolute;
    display: block;
    margin: auto;
    bottom: 3.1%;
    left: 30.75%;
    opacity: 0.1;
    font-family: "lato";
    font-size: 22px;
    opacity: 0.3;
    font-weight: 100;
    color: #2C2D30;
}

HTML

<div class="animated slideInLeft" id="square">
    <div class="animated bounceInUp" id="leftSquare">
        <div id="row">
            <div class="col-lg-8">
                <h1 class="title">Slack Chat</h1>
            </div>
            <i class="down fa fa-chevron-down" aria-hidden="true"></i>

<i class="bell fa fa-bell-o fa-lg" aria-hidden="true"></i>
        </div>
        <div id="row">
            <div id="circle"></div>
            <h2 id="subtitle">mmang</h2>
        </div>
        <div id="row">
            <h2 id="channels">CHANNELS<span id="light">(29)</span> <i class="add fa fa-plus-circle fa-inverse" aria-hidden="true"></i> </h2>
        </div>
        <div id="highlight-channel"></div>
        <div id="row">
            <h2 id="channel"># pens</h2>
        </div>
        <div id="row">
            <h2 id="channel2"><span id="opacity"># </span> <span id="bold">posts</span></h2>
        </div>
        <div id="row">
            <h2 id="channel3"># shop</h2>
        </div>
        <div id="row">
            <span id="highlight">
        <h2 id="channel4"># codevember</h2></span>
        </div>

<div id="row">
            <h2 id="messages">DIRECT MESSAGES<span id="light">(12)</span> <i class="add-two fa fa-plus-circle fa-inverse"></i> </h2>
        </div>
        <div id="row">
            <div id="circle2"></div>
            <h2 id="subtitle2">Jsmith</h2>
        </div>
        <div id="row">
            <div id="circle3"></div>
            <h2 id="subtitle3">mmang(you)</h2>
        </div>

</div>

</div>

<div id="message-area">
        <div id="message-one">
            <div id="container">
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="person-one thumbnail">
                            <img class="person-img-one" src="/assets/coolboy.jpg">
                        </a>
                    </div>
                </div>
            </div>
            <div id="container">
                <h4 id="person-name"> Jsmith <span id="time">9:02 AM</span> </h4>
                <h5 id="person-text">

Morning everyone!

</h5>
            </div>
        </div>

</div>
    <div id="message-area-two">
        <div id="message-two">
            <div id="container">
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="person-two thumbnail">
                            <img class="person-img-two" src="/assets/coolgirl.jpg">
                        </a>
                    </div>
                </div>
            </div>
            <div id="container">
                <h4 id="person-name-two"> KyleD<span id="time">9:02 AM</span> </h4>
                <h5 id="person-text-two">

Yooooo

</h5>
            </div>
        </div>
    </div>
    <div id="message-area-three">
        <div id="message-three">
            <div id="container">
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="person-three thumbnail">
                            <img class="person-img-three" src="/assets/coolboy.jpg">
                        </a>
                    </div>
                </div>
            </div>
            <div id="container">
                <h4 id="person-name-three"> sam_I_am<span id="time">9:02 AM</span> </h4>
                <h5 id="person-text-three">

Dude, I found this awesome pen

</h5>
            </div>
        </div>
    </div>
    <div id="message-area-four">
        <div id="message-four">
            <div id="container">
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="person-four thumbnail">
                            <img class="person-img-four" src="/assets/coolgirl.jpg">
                        </a>
                    </div>
                </div>
            </div>
            <div id="container">
                <h4 id="person-name-four"> sam_I_am<span id="time">9:02 AM</span> </h4>
                <h5 id="person-text-four">

One sec, going to find the link

</h5>
            </div>
        </div>
    </div>
    <div id="message-area-five">
        <div id="message-four">
            <div id="container">
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="person-four thumbnail">
                            <img class="person-img-four" src="/assets/coolboy.jpg">
                        </a>
                    </div>
                </div>
            </div>
            <div id="container">
                <h4 id="person-name-four"> sam_I_am<span id="time">9:02 AM</span> </h4>
                <h5 id="person-text-four">

Got it! <a href="#"> Slack Chat CSS </a>

</h5>
            </div>
        </div>
    </div>
    <div id="message-area-six">
        <div id="message-one">
            <div id="container">
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="person-one thumbnail">
                            <img class="person-img-one" src="/assets/coolgirl.jpg">
                        </a>
                    </div>
                </div>
            </div>
            <div id="container">
                <h4 id="person-name"> Jsmith <span id="time">9:02 AM</span> </h4>
                <h5 id="person-text">

Sick! I'm so hearting that and posting on Twitter

</h5>
            </div>
        </div>

</div>
    <div id="bottom">
        <input class="search-bottom" placeholder="Message #pens" type="text">
        </input>
        <i class="smile fa fa-smile-o" aria-hidden="true"></i>
        <h3 id="line-bottom"> | </h3>
        <i class="plus fa fa-plus" aria-hidden="true"></i>
    </div>

</div>

Slack Chat App, 多人聊天界面模板。

html5, chat

编辑器支持Emmet

快捷键

Slack Chat App, 多人聊天界面模板。

html5, chat

HTML5/GSAP 一款旅行类移动网页应用模板

一款HTML5头条新闻移动网页应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：