CSS3 滑出式页脚

CSS3 slide-out footer

css3, footer

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*-------------------------
	Simple reset
--------------------------*/

* {
    margin: 0;
    padding: 0;
    /*-------------------------
	General Styles
--------------------------*/
}
body {
    font: 15px/1.3 'PT Sans', sans-serif;
    /* Create a page-wide stacking context 
	(so that negative margins work as you expect) */
    
    color: #5e5b64;
    position: relative;
    z-index: 0;
}
a,
a:visited {
    outline: none;
    color: #389dc1;
}
a:hover {
    text-decoration: none;
}
section,
footer,
header,
aside {
    display: block;
    /*-------------------------
	The main container
--------------------------*/
}
#main {
    position: relative;
    z-index: 1;
    background-color: #fff;
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
    background-image: radial-gradient(center, circle farthest-corner, #fff, #e2e2e2);
    padding: 120px 0 600px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
#main .tzine-logo {
    width: 600px;
    height: 400px;
    margin: 0 auto 90px;
    text-indent: -999px;
    overflow: hidden;
    display: block;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    background: url("http://www.logologo.com/logos/free-eagle-logo.jpg");
}
h1 {
    font: bold 48px 'PT Sans Narrow', sans-serif;
    color: #5e5b64;
    text-align: center;
    padding-bottom: 300px;
    position: relative;
}
h1:after {
    content: '';
    background: url('https://winnox.site44.com/02-Image/codepen/sprite.png') 0 0;
    width: 45px;
    height: 70px;
    position: absolute;
    left: 50%;
    bottom: -85px;
    margin-left: -23px;
    /*-------------------------
	The footer
--------------------------*/
}
footer {
    height: 245px;
    color: #ccc;
    font-size: 12px;
    position: relative;
    z-index: -2;
    background-color: #31353a;
    background-image: -webkit-linear-gradient(top, #31353a, #2f3337);
    background-image: linear-gradient(top, #31353a, #2f3337);
    /* Set a width to the outermost UL and center it */
}
footer > ul {
    width: 960px;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -480px;
    padding-bottom: 60px;
    z-index: -1;
    /* The four columns of links */
}
footer > ul > li {
    width: 25%;
    float: left;
}
footer ul {
    list-style: none;
    /* The links */
}
footer > ul > li ul li {
    margin-left: 43px;
    text-transform: capitalize;
    font-weight: bold;
    line-height: 1.8;
}
footer > ul > li ul li a {
    text-decoration: none !important;
    color: #7d8691 !important;
}
footer > ul > li ul li a:hover {
    color: #ddd !important;
    /* The company logo */
}
footer a.logo {
    color: #e4e4e4 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    text-transform: capitalize;
    margin-left: 16px;
    display: inline-block;
    margin-top: 7px;
}
footer a.logo i {
    font-style: normal;
    position: absolute;
    width: 100%;
    display: block;
    left: 48px;
    top: 0px;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    text-align: justify;
}
footer a.logo:before {
    content: '';
    display: inline-block;
    background: url('https://winnox.site44.com/02-Image/codepen/sprite.png') no-repeat -19px -70px;
    width: 48px;
    height: 37px;
    vertical-align: text-top;
    /* Common styles for the four color bars */
}
footer p {
    width: 90%;
    margin-right: 10%;
    padding: 9px 0;
    line-height: 18px;
    background-color: #058cc7;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    opacity: 0.9;
    cursor: default;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}
footer > ul > li:hover p {
    opacity: 1;
}
footer p:before {
    content: '';
    display: inline-block;
    background: url('https://winnox.site44.com/02-Image/codepen/sprite.png') no-repeat;
    width: 16px;
    height: 18px;
    margin: 0 12px 0 15px;
    vertical-align: text-bottom;
    /*-------------------------
	The different colors
--------------------------*/
}
footer p.home {
    background-color: #0096d6;
    background-image: -webkit-linear-gradient(top, #0096d6, #008ac6);
    background-image: linear-gradient(top, #0096d6, #008ac6);
}
footer p.home:before {
    background-position: 0 -110px;
}
footer p.services {
    background-color: #00b274;
    background-image: -webkit-linear-gradient(top, #00b274, #00a46b);
    background-image: linear-gradient(top, #00b274, #00a46b);
}
footer p.services:before {
    background-position: 0 -129px;
}
footer p.reachus {
    background-color: #d75ba2;
    background-image: -webkit-linear-gradient(top, #d75ba2, #c75496);
    background-image: linear-gradient(top, #d75ba2, #c75496);
}
footer p.reachus:before {
    background-position: 0 -89px;
}
footer p.clients {
    background-color: #e9ac40;
    background-image: -webkit-linear-gradient(top, #e9ac40, #d89f3b);
    background-image: linear-gradient(top, #e9ac40, #d89f3b);
}
footer p.clients:before {
    background-position: 0 -69px;
}

HTML

<html>

<body>

<div id="main">
        <a href="https://tutorialzine.com/2013/08/slideout-footer-css/" class="tzine-logo">Tutorialzine Presents</a>
        <h1>A CSS3 slide-out footer.</h1>
    </div>

<ul>
            <li>
                <p class="home">Home</p>
                <a class="logo" href="#"><i id="current-year"></i></a>
            </li>
            <li>
                <p class="services">Services</p>

<ul>
                    <li><a href="#">3D modeling</a>
                    </li>
                    <li><a href="#">Web development</a>
                    </li>
                    <li><a href="#">Mobile development</a>
                    </li>
                    <li><a href="#">Web &amp; Print Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <p class="reachus">Reach us</p>

<ul>
                    <li><a href="#">Email</a>
                    </li>
                    <li><a href="#">Twitter</a>
                    </li>
                    <li><a href="#">Facebook</a>
                    </li>
                    <li>555-123456789</li>
                </ul>
            </li>
            <li>
                <p class="clients">Clients</p>

<ul>
                    <li><a href="#">Login Area</a>
                    </li>
                    <li><a href="#">Support Center</a>
                    </li>
                    <li><a href="#">FAQ</a>
                    </li>
                </ul>
            </li>
        </ul>

</footer>

</body>

</html>

CSS3 slide-out footer

css3, footer

编辑器支持Emmet

快捷键

CSS3 slide-out footer

css3, footer

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

CSS3 平滑下降式动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：