Between being a few days shy of two weeks post-op, and learning on the fly how to update my code to html5, my brain is fried. This is my first design attempt with html5, and of course I pulled out a few tricks with CSS3. When my braincells start firing again I will post some unique styling tricks, until then check out the tutorials that helped me build this layout:
- Using HTML5 Today – A great summary on the current implementation of html5 on the various browsers. This article summarizes all the little things you need to know including html5 validation, cross browser support, the role attribute, and the proper use of headings and their purpose in html5.
- Avoiding Common HTML5 Mistakes – Reviews the proper use of the section and hgroup tag, and provides some useful tips on how to properly use HTML5 mark-up.
- CSS3 Transitions – This is a solid set of tutorials on the use of CSS3 transitions which I use in a lot of the link effects in this layout. This tutorial is covers how to set up a variety of transitions and explains how each of the transition properties work so you can easily create your own.
- CSS Gradient Text Effect – I’ve waited years to pull this one out! This is the tutorial for how to get that nifty degraded text effect that I have on the headings of this page. It’s a simple trick that layers transparent pngs over text. The main limitations are that a span tag needs to be declared in the heading, the background must be solid, and the transparent png must only use the background color.
- Text Rotation with CSS – I have used this styling technique on and off since Expiation.org first went online. Great tutorial on cross browser compatible CSS for rotating text. This tutorial also covers how to create the date boxes that appear in this layout.
- Drop Down Menus CSS & Javascipt – Basic tutorial on creating drop down menus, with the ability to have sub-menus. I needed to change my menu script to transition to nested drop down menus. Look forward to an update of my WordPress and Drop Down Menus tutorial.
- WordPress: Nesting Years Under Months – A fairly easy to follow php tutorial on how to create nested archive lists by the year. This trick will also be a part of my updated WordPress and Drop Down Menus tutorial.
- How to Add Post Thumbnails to WordPress – A basic tutorial on how to add post thumbnails to your WordPress theme. Post Thumbnails are particularly useful for social media sharing, and creating snazy article links (which you will not see in this layout) throughout a theme.