“Coding the Digg v4 Layout with HTML5 and CSS3” plus 1 more - Speckyboy Design Magazine Feed |
| Coding the Digg v4 Layout with HTML5 and CSS3 Posted: 16 May 2012 12:16 AM PDT The social news community Digg has been online since 2004 and rapidly grew in popularity leading up to the 2008 elections. Come 2011 the Digg team performed an overhaul on the system and completely revamped the site layout. This also broke the friends system, allowing big-name publishers to game the front page. This upset many powerhouse users who were furious with the major changes. Over time the site has slowly moved back towards its roots as a user-powered news community. And although the domain has lost some credibility, their design skills are still impeccable. So in this tutorial I want to explain how we can build a similar layout using static HTML5 and CSS3 properties. I won’t have time to cover every detail but you can download my attached source code and play around on your own. Live PreviewDownload Source Code Building the HeaderI’ll tackle major areas in the layout beginning at the top and working down. For starters the heading band has a couple interesting features, namely the navigation links and search form. Here’s the first portion of the code: <div id="header-wrap"> <header class="clearfix"> <a href="#" class="logo">Diggy</a> <nav class="clearfix"> <a href="#" class="sel">Top News</a> <a href="#">Newswire</a> <a href="#">Newsrooms</a> </nav> As you can tell I’m using a wrapper div to house the entire blue background. However the content is placed inside an HTML5 #header-wrap { height: 48px; background-color: #14589e; border-bottom: 1px solid #0d4f92; } #header-wrap header { display: block; width: 1000px; margin: 0 auto; padding: 7px 15px 5px 15px; } #header-wrap header nav a { margin: -2px 1px -5px 0; padding: 0 10px; height: 40px; line-height: 49px; display: block; font-size: 1.3em; font-weight: bold; color: #fff; float: left; } #header-wrap header nav a.sel { background-color: #194989; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #header-wrap header nav a:hover { background-color: #194989; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; cursor: pointer; } It’s so much easier to setup block-style links and float them right next to each other. Also I’ve taken advantage of the CSS3 rounded corner properties, both on these links and for the categories list. Even the register and login buttons are using rounded corners. They look fantastic and have been a luxury up until now. Categories ListInstead of setting up another nav element I’ve instead used an unordered list of links. The categories block underneath the header is actually placed inside another div with the ID I copied over most of the important CSS properties for this section. It’s easy to get lost, but the links do look incredible. In fact, both the containing div and unordered list have bottom borders. This gives off the illusion of a double division line. #core-content .categories { border-bottom: 1px solid #ccdcef; padding-bottom: 2px; } #core-content .categories ul { border-bottom: 1px solid #ccdcef; padding: 10px 0; list-style: none; width: 100%; } #core-content .categories ul li { margin-right: 8px; float: left; } #core-content .categories ul li a { display: block; float: left; font-size: 1.2em; line-height: 1.1em; border: 1px solid transparent; color: #105cb6; font-weight: bold; padding: 5px 9px 7px; text-decoration: none; } #core-content .categories ul li a:hover { text-decoration: underline; } #core-content .categories ul li.sel { } #core-content .categories ul li.sel a { background-color: #e3e8f4; border-color: #ccdcef; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } Listing the ArticlesThe frontpage links list is probably Digg’s official calling card. You can tell these individual blocks consist of quite a bit of markup – but it’s fairly simple to explain. <!-- begin story 1 --> <div class="story clearfix"> <div class="diggbtn"> <div class="badge"> <a href="#" class="count-wrap"><span class="numcount"><span>60</span></span></a> <a href="#" class="diggit"></a> </div> </div> <div class="story-content"> <div class="media"><a href="#"><img src="images/thumbs/s01.png"></a></div> <div class="details"> <h2><a href="#">Obamas kick off campaigning with rallies in must-win states</a></h2> <p> <a href="#" class="sourcedomain">reuters.com</a> <a href="#" class="teaser">â€" WASHINGTON (Reuters) - With his wife at his side and Air Force One as a campaign plane, President Barack Obama holds his first political rallies <span class="timestamp">2 mins ago</span></a> </p> </div> <ul class="meta"> <li class="submitter">via <a href="#">Mikeymicron</a></li> <li class="comment"><a href="#">2 Comments</a></li> <li class="save"><a href="#">Save</a></li> <li class="bury"><a href="#">Bury</a></li> </ul> </div> </div> The wrapping div for each article has a class of All of the styles for these elements are segregated into their own section of the stylesheet. The yellow digg badge uses a static BG image with dynamic text for the voting numbers. But overall there are way too many styles to go over, many of which do not contain anything new or interesting. But I have copied just the beginning portion for your reference. /** stories **/ #core-content #left-col .story { display: block; border-bottom: 1px solid #ccdcef; padding: 10px 0; margin-bottom: 10px; } #core-content #left-col .story .story-content { margin-left: 66px; } #core-content #left-col .story .story-content .details { margin-bottom: 7px; } #core-content #left-col .story .story-content .details h2 { display: block; font-size: 1.65em; line-height: 1.2em; margin-bottom: 8px; text-decoration: underline; font-weight: bold; } #core-content #left-col .story .story-content .details h2 a { text-decoration: underline; } #core-content #left-col .story .story-content .details h2 a:hover { text-decoration: none !important; color: #121212; } #core-content #left-col .story .story-content .details p { margin-bottom: 12px; } #core-content #left-col .story .story-content .details p a { color: #666; } #core-content #left-col .story .story-content .details p a:hover { color: #898989; } #core-content #left-col .story .story-content .details .sourcedomain { border-bottom: 1px solid #cedbf1; color: #5f88ce; } #core-content #left-col .story .story-content .details .sourcedomain:hover { color: #5f88ce; } #core-content #left-col .story .story-content .details .timestamp { font-size: 0.9em; color: #999; } Pagination ButtonsThere is a small block located after all of the stories containing pagination links. This is also setup with an unordered list attached with special class names. I copied over the basic HTML in the snippet below. <!-- paged navigation --> <ul class="paged-navigation"> <li class="prev"><a href="#" class="btn-default disabled">Prev</a></li> <li class="num">Page 1</li> <li class="next"><a href="#" class="btn-default">Next</a></li> </ul> The next and previous links are setup to float over to the left and right side. Meanwhile the main centered number text will actively display which page number you’re currently viewing. When you cannot go back or forward anymore the buttons are given an additional class #core-content #left-col ul.paged-navigation { display: block; width: 100%; background-color: #eee; margin: 10px 0; padding: 7px; padding-top: 15px; padding-bottom: 13px; list-style: none; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #core-content #left-col ul.paged-navigation .disabled { opacity: 0.5; cursor: default; } #core-content #left-col ul.paged-navigation .disabled:hover { cursor: default; } #core-content #left-col ul.paged-navigation .prev { float: left; } #core-content #left-col ul.paged-navigation .next { float: right; } #core-content #left-col ul.paged-navigation .prev a, #core-content #left-col ul.paged-navigation .next a { width: 3em; font-size: 1.1em; padding: 6px 10px; } #core-content #left-col ul.paged-navigation a.btn-default { background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#f3f3f3)); background: -moz-linear-gradient(top,#ffffff,#f3f3f3); background-color: #f3f3f3; border: 1px solid #aaa; color: #333; text-shadow: #fff 0 1px 0; zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-weight: bold; letter-spacing: -0.03em; line-height: 1.25em; } This is the last block piece we have before closing the main left column. The whole content div is made up of just a left and right side, plus a simple footer. The style is very minimalist and works in the same archetype as classic Digg. Splitting Up the FooterLooking inside the main <footer> <ul class="data"> <li class="copy">Original Design by <a href="http://digg.com/">Digg Inc.</a></li> <li><a href="#">About Digg</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Partners</a></li> <li><a href="#">API & Resources</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">Help & FAQ</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Top 100</a></li> </ul> </footer> All of the main components are fairly straightforward to understand. There are possibly some newer properties I’ve used which you have never encountered before. But with just a quick Google search you can look further into all of them. I left the right column open so there’s much more room for different block areas. These could include popular stories or recently logged in users. Overall I wanted the layout to be simple – merely a template to pay homage to Digg’s fantastic work. And also to prove that you can really build anything in HTML5 and CSS3. Live PreviewDownload Source Code ConclusionRebuilding the Digg v4 layout from scratch is exciting and certainly fun. Their team is very talented, and I’ve always been a fan of the social news genre. As I mentioned earlier feel free to download my example source code and play around with some of the properties. It’s easy to reorganize page elements and sample them in your own layouts. You might also like…How to Build an Accordion Image Gallery with only CSS →
       |
| 20 More CSS3 Tutorials and Techniques for Creating Buttons Posted: 15 May 2012 09:13 AM PDT It has been well over a year since we last took a look at some of the latest CSS3 buttons techniques. And what a difference a year makes. No longer satisfied with just using the basic CSS3 properties (border-radius, box-shadow…), many developers have progressed to using @font-face icons, animation and 3D effects. All with only CSS. Hope you enjoy this selection: You might also like… 20 CSS3 Tutorials and Techniques for Creating Buttons → 22 CSS Button Styling Tutorials and Techniques → 20 Awesome jQuery Enhanced CSS Button Techniques → CSS3 Menu and Navigation Tutorials → Or, you could browse our extensive CSS Archives. CSS Social Buttons
Orman Clark's Chunky 3D Web Buttons
CSS Buttons with Pseudo-elements
Soft, Customizable Pressure Buttons in CSS
Animated Buttons with CSS3
Awesome CSS3 Buttons
Simple CSS3 Buttons
Animated Download Button With CSS3
How to Create CSS3 Buttons
Free CSS3 Button Styles
CSS3 Google UIGoogle+ Styled UI ButtonsTwittter ButtonsCSS3 ButtonsCSS3 ButtonsFancy 3D-ButtonAdd to Cart Buttons
3D Facebook Button Concept
Animated CSS3 Buy Now ButtonYou might also like…22 CSS Button Styling Tutorials and Techniques → Or, you could browse our extensive CSS Archives →
     |
| You are subscribed to email updates from Speckyboy Design Magazine To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Keine Kommentare:
Kommentar veröffentlichen