CSS3 Footer Source Code for Bucky's cool footer

+1 Ray LeDuc · July 23, 2015
I have seen several people ask for it and can not seem to find it in the forum so I'm just going to paste it here.

HTML

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Cool Ass CSS3 Footer</title>
<!-- Insert main stye sheet here -->
   <link rel="stylesheet" href="css/footer.css" type="text/css" /><!-- Footer Stylings -->
</head>
<body>
   
<div id="footer">
                <ul id="footer_menu">
                
                        <li class="homeButton"><a href="#"></a></li>
                        
                        <li><a href="#">Account</a>
                                <div class="one_column_layout">
                                        <div class="col_1">
                                                <a class="headerLinks">Stream</a>
                                                
                                                <a class="headerLinks">Messages</a>
                                                <a class="listLinks" style="font-weight:bold;color:white;">Inbox (7)</a>
                                                <a class="listLinks">Sent</a>
                                                <a class="listLinks">Trash</a>
                                                <a class="listLinks">Compose</a>
                                                
                                                <a class="headerLinks">Pictures</a>
                                                <a class="listLinks">Manage Albums</a>
                                                <a class="listLinks">Manage Photos</a>
                                                <a class="listLinks">View All</a>                                       
                                                
                                                <a class="headerLinks">Information</a>
                                                <a class="listLinks">Basic Info</a>
                                                <a class="listLinks">Contact</a>
                                                <a class="listLinks">Education</a>
                                                <a class="listLinks">Employment</a>
                                                <a class="listLinks">Links</a>
                                                
                                                <a class="headerLinks">Friends</a>
                                                <a class="listLinks">All</a>
                                                <a class="listLinks" style="font-weight:bold;color:white;">Requested (13)</a>
                                                <a class="listLinks">Pending</a>
                                        </div>
                                </div>
                        </li>                   
                        
                        <!-- Begin 3 Columns Menu Item -->
                        <li><a href="#">Profile</a>
                                <div class="three_column_layout">
                                
                                        <div class="col_3">
                                                <h2>Example of Three Columns</h2>
                                        </div>
                                        
                                        <div class="col_1">
                                                <p>This is a three columns example. Praesent gravida venenatis felis sed egestas.</p>             
                                        </div>
                                        <div class="col_1">
                                                <p>This is a bold text. Sed ac tortor lobortis sem gravida consequat et vel mi.</p>             
                                        </div>
                                        <div class="col_1">
                                                <p>This is an italic text sample. Curabitur arcu orci, iaculis vel bibendum gravida tortor lobortis.</p>             
                                        </div>
                                        
                                        <div class="clear"></div> <!-- Use this clear div to separate rows of content -->
                                        
                                        <div class="col_1">
                                                <p class="black_box">This is the black box styling. I use it for my private messenger and also my group chat feature.</p>
                                        </div>
                                        <div class="col_2">
                                                <p>Sed lacus est, iaculis sed sagittis ac, malesuada a felis. Vestibulum vitae dictum mauris. Aenean felis nisl, pulvinar quis blandit et, fermentum ut tortor. In condimentum nisi ut leo fermentum ornare. Praesent gravida venenatis felis sed egestas.</p>
                                        </div>
                                        
                                        <div class="clear"></div> <!-- Use this clear div to separate rows of content -->
                                        
                                        <div class="col_3">
                                                <h2>My Profile</h2>
                                        </div>
                                        
                                        <div class="col_3">     <!-- Examples of paragraphs with side images -->
                                                <p>
                                                        <img src="https://buckysroom.org/photos/users/9259/resized/e5a7b6ca7093f5e7fec00c50044241e5.jpg" class="img_left whiteBorder" alt="" />
                                                        <a style="display:inline;font-weight:bold;color:white;">Raymond Le Duc</a>
                                                        <a href="#">Read more...</a>
                                                </p>
                                        </div>
                                        
                                </div>
                        </li>
                        <!-- End 3 Columns Menu Item -->
 
                        <li><a href="#">Two Columns</a><!-- Begin 2 Columns Menu Item -->
                                <div class="two_column_layout"><!-- Begin 2 columns container -->
                                        <div class="col_2">
                                                <h2>Two Column Layout</h2>
                                        </div>
                                        <div class="col_1">
                                                <p>This is a two columns example. Praesent gravida venenatis felis sed egestas.</p>             
                                        </div>
                                        <div class="col_1">
                                                <p>Duis sit amet erat enim. Sed ac tortor lobortis sem gravida consequat et vel mi venenatis.</p>             
                                        </div>
                                        <div class="clear"></div>
                                        <div class="col_2">
                                                <p>Vivamus ut urna magna. Aenean vehicula feugiat leo, sit amet facilisis felis commodo a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet erat enim.</p>             
                                        </div>
                                </div><!-- End 2 columns container -->
                        </li><!-- End 2 Columns Menu Item -->
                        
                        <li>
                                <a href="#">Programs</a> 
                                <ul class="dropup">
                                        <li><a href="#">Calculator</a></li>
                                        <li><a href="#">Group Chat</a></li>
                                        <li><a href="#">Image Editor 2.0</a></li>
                                        <li><a href="#">Meme Generator</a></li>
                                        <li><a href="#">Private Messenger</a></li>
                                        <li><a href="#">Text Editor</a></li>
                                </ul>
                        </li>                   
 
                        <li class="right"><a href="#" class="drop">Log Out</a>
                        </li>
                        
                </ul><!-- End Footer Menu -->
 
                <ul id="notifications">
                        <li><a href="#" class="notificationIcons"><img src='img/twitter.png' alt="" /></a></li>
                        <li><a href="#" class="notificationIcons"><img src='img/rss.png' alt="" /></a></li>
                        <li>
                                <a href="#" class="notificationIcons"><img src='img/facebook.png' alt="" />
                                        <span> <!-- The span is the text appearing on hover, use the notificationIcons class in the link -->
                                                <img src="http://buckysroom.com/images/defaultProfileImage.png" style="float:left;width:24px;margin-right:5px;"/>
                                                <div style="display:inline;color:#CC0000;font-weight:bold;">Emily May</div> liked your post "What is your favorite book of all time?"
                                                <hr style="border:none;border-bottom:1px solid #777777;"/>
                                                <img src="http://buckysroom.com/images/defaultProfileImage.png" style="float:left;width:24px;margin-right:5px;"/>
                                                <div style="display:inline;color:#CC0000;font-weight:bold;">Emily May</div> liked your post "What is your favorite book of all time?"
                                                <hr style="border:none;border-bottom:1px solid #777777;"/>
                                                <img src="http://buckysroom.com/images/defaultProfileImage.png" style="float:left;width:24px;margin-right:5px;"/>
                                                <div style="display:inline;color:#CC0000;font-weight:bold;">Emily May</div> liked your post "What is your favorite book of all time?"
                                        </span>
                                </a>
                        </li>
                </ul>
 
        </div>
</body>
</html>


and here is the css

body{

background: black; 
color: #888;
}

#footer{
        position: fixed; /* the footer must stick to the bottom of the page, the fixed positionning is here necessary. */
        bottom: 0px;
        margin:0;
        padding:0;
        left:0;
        right:0;
        width: 100%;
        height: 40px;
        font-family:Arial;
        text-shadow: 1px 1px 1px black; /*h,v,blur,color */
        /* glass effect */
        border-top: 1px solid rgba(0,0,0,0.3);
        background: rgba(0,0,0,0.25);
        /*inset = inner shadow ----------- this just creates multiple shadows*/
        /*top border, top white section, overlay top white, bottom*/
        box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#footer h2{
        font-weight:normal;
        font-size:14px;
        text-decoration:underline;
        color: #CC0000;
        margin-top:10px;
        margin-bottom:5px;
        margin-left:10px;       
}
#footer p{
        color:white;
        font-size:12px;
        float:left;
        padding:0px 10px; /*top & bottom = 0px */
        margin:10px 0px;
}
#footer img{
        border:none;
}
#footer li ul{ /* Programs button is a list */
        list-style:none;
        padding:0px;
        margin-bottom:12px;
}
.clear { /* Use this class between rows of content when you use columns */
        clear: both; /*no floating elements allowed on the left or the right side*/
        display: block;
        overflow: hidden;
        visibility: hidden; /*nothing displays, just resets the layout*/
        width: 0px;
        height: 0px;
}
#footer .whiteBorder { /* good for images */
        border:1px solid white;
}
#footer .img_left { /* image floats to the left */
        float:left;
        margin-right:10px;
        width: 40px;
}
#footer .black_box {
        background: rgba(0,0,0,0.4);
        padding:5px;
        margin-bottom:5px;
    border-radius: 5px;
}
#footer #notifications { /* entire notification section */
        float:right;
        width:auto;
        margin:5px 15px 0px; /*top, right/left, bottom*/
        padding:0px;
        overflow:hidden;
}
#footer #notifications li { /* each notification icon */
        margin-right:12px; /* 12px is the space between each one of them */
        float:left;
        width:24px;
        padding:0px;
        height:32px;
        list-style:none;
}
#footer #notifications li:hover {
        margin-top:-1px; /* icons move 1px up on hover, use this or change color on hover (like home button) */
}
a.notificationIcons span { /* span is text when you hover over */
        display:none;
        font-size:12px;
        padding:5px;
        bottom:45px;
        position:relative;
        width:150px;
        border-radius: 3px;
}
a.notificationIcons:hover span {
        display:block;
        position:absolute;
        border:1px solid #161616;
        color:white;
        margin-left:-70px;
        background:rgba(0,0,0,0.3);
}
 
/* Footer Buttons  */
 
#footer_menu{ /*entire footer bar*/
        margin: 0;
        padding: 0;
        width:auto;
}
#footer_menu li { /* the "buttons" */
        list-style: none;
        float: left;
        font-size:12px;
        padding: 12px 14px 14px 14px;
        /* cool glass look */
        border-right:1px solid rgba(0,0,0,0.4);
        background: rgba(0,0,0,0.1);
}
#footer_menu li:hover {
        background: rgba(0,0,0,0.3); /*a little darker on hover*/
}
#footer_menu li a { /*text on the buttons*/
        display: block;
        color: #cccccc;
        text-decoration: none;
}
#footer_menu li a:hover {
        color: #ffffff; /*gray to white looks like it glows*/
}
/* used for the home button, text is here hidden and replaced by an image */
#footer_menu .homeButton { 
    padding:5px 8px 0px 14px;
    border:none;
    background:none;
}
#footer_menu .homeButton a { /* used for the home button, text is replaced by an image */
    background:url("img/home.png") top left no-repeat;
    width:36px;
    height:30px;
}
#footer_menu li.homeButton:hover {
    background:none;
}
#footer_menu li.homeButton a:hover {
    background:url("img/home2.png") top left no-repeat;
}
 
/* Drop-Up Menus */
 
#footer_menu li ul.dropup{
   display: none; 
}
#footer_menu li:hover ul.dropup{ /*Programs menu*/
        display: block;
        position: absolute;
        margin: 0 0 0 -15px; /*move left 15px to line up properly*/
        bottom:40px; /* distance to the bottom of the browser */
        border: 1px solid #111111;
        border-bottom:none;
        background: rgba(0,0,0,0.5);
        border-radius: 7px 7px 0px 0px; /*top-left, top-right, bottom-right, bottom-left*/
}
#footer_menu li:hover li { /* items in Programs menu */
        float: none;
        background:none;
        border:none;
        border-bottom:1px solid #161616;
        padding:12px 10px 12px 10px;
}
/* drop-up default links */
#footer_menu li:hover a {
        color: #aaaaaa;
}
#footer_menu li:hover a:hover {
        color: #eeeeee; /*lighter*/
}
/* Stream, Messages, etc... */
#footer_menu li:hover a.headerLinks {
        font-size:14px;
        text-decoration:underline;
        color: #CC0000;
        margin-top:10px;
        margin-left:10px;
}
#footer_menu li:hover a.headerLinks:hover {
        color: white;
        cursor:pointer;
}
/* List Links */
#footer_menu li:hover a.listLinks {
        font-size:12px;
        color: #999999;
        margin-left:10px;
}
#footer_menu li:hover a.listLinks:hover {
        color: white;
        cursor:pointer;
}
#footer_menu .right { /* Use the right class to push the content to the right */
        float:right;
        right:0px;
        margin-right:2px;
        border-right:none;
        border-left:1px solid rgba(0,0,0,0.3);
}
 
/* 03 FOOTER - COLUMNS CONTENT - We will make 3 different layouts, which can contain 1 to 3 columns */
 
#footer .one_column_layout, 
#footer .two_column_layout, 
#footer .three_column_layout {
        margin:4px auto;
        position:absolute;
        padding-bottom:15px;
        display:none;
        text-align:left;
}
 
/* Layout Sizes */
#footer .one_column_layout {width: 140px;}
#footer .two_column_layout {width: 280px;}
#footer .three_column_layout {width: 420px;}
 
/* Entire drop-up menu, show on mouse hover */
#footer_menu li:hover .one_column_layout, 
#footer_menu li:hover .two_column_layout, 
#footer_menu li:hover .three_column_layout {
        display: block;
        position: absolute;
        margin: 0 0 0 -15px;
        bottom:40px;
        border: 1px solid #111111;
        border-radius: 7px 7px 0px 0px;
        background: rgba(0,0,0,0.5);
}
 
/* columns must be placed inside a layout */
#footer .col_1,
#footer .col_2,
#footer .col_3 {
        display:inline;
        float: left;
        position: relative;
        margin-left: 5px;
        margin-right: 5px;
}
#footer .col_1 {width:130px;}
#footer .col_2 {width:270px;}
#footer .col_3 {width:410px;}

I hope this helps you all out. 

PS I hope people up this so it will stay for awhile.

Post a Reply

Replies

Oldest  Newest  Rating
0 Ray LeDuc · August 6, 2015
@Delphin Sidieu 

I don't have the source code for the tutorial on that but  here is a flex box code generator and a few links regarding flex box. 

http://html5please.com/#flexbox                                                       (reference)
http://zomigi.com/blog/flexbox-presentation/                                  (reference) scroll down to Articles and tutorials and next section                                                                                                                                           tools


http://the-echoplex.net/flexyboxes/                                                (Generator) there are a few more listed on the Zomigi.com site listed                                                                                                                                          above



for a complete and up to date guide on flex box I suggest you use guide @ www.css-tricks.com by  Chris Coyier.       https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
0 MASCOT AYERE · August 4, 2015
GOD BLESS YOU
Ray LeDuc
0 Delphin Sidieu · August 1, 2015
How can i please find the source code for the HTML5 flex box
  • 1

HTML / CSS / Web Design

130,041 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators