The difference between the notes and tutorials is that the notes are more general and to the point, while the tutorials are more focused on a particular element. Many times there are several ways to achieve something, I tend to take the easiest and most familiar route.
Lastly, I’m only human, if you find a mistake in these, please let me know so I can fix it. You can also post your own take on these techniques and alternative methods. Of course, feel free to post questions too. I plan to make more tutorials as often as life allows.
* = includes a download
Many of these tutorials are also available at Code Pen!
* Webkit Scrollbars – Arrows and stars, image scrollbar examples.
* Parallax – An experiment I made to learn more about parallax. I also have some Notes explaining some of the concepts about how parallax works. The experimental code can be downloaded for study. I also added some extra notes and an example for a Parallax div.
* Banner and Navigation Bar – A banner that scrolls and reveals a navigation bar which stays on top of the page as it continues to scroll. It’s useful if you have a larger navigation on the top banner and want to constantly keep a small one on the screen for easy accesses. The code can also be modified to make the navigation bar visible before the banner scrolls off. No JS required, just CSS. The download has the code, not really any notes on it, but it’s a simple trick so it should be easy to understand. (Code Pen)
Moving Background – CSS animation effect.
Cursor Special Effects – Cute cursors and shiny stuff!
Vertically Centered Layout – An easy way to do this.
CSS Classes – A few CSS class tricks…
* Birthday PHP – PHP powered automatically updating birthday wishes that appear on the right day and are hidden the rest of the time. I’ve seen a lot of people talk about their domain and website birthdays. Combining this with the Progress Bars can provide a countdown to your or your site’s next birthday.
* Progress Bar – Useful for those who like to set up a splash page for their upcoming sites. With this you can show visitors what approximate % of your shrine you’ve completed. There is also a version that can be used to show an upcoming date and countdown to it. The progress bars can be customized with CSS to match your layout. This tutorial is available in php format via the download link, so you can just copy+paste and edit the code. This tutorial mainly focuses on PHP, but it’s very easy to edit, since most of it is just copy+paste+leave-it-alone. The most heavy customization will come from your CSS.
Background Position – Learn to tile backgrounds from any point on the screen (not just the corners) with pixel precision for a seamless layout.
Background Position Part 2 – This part focuses on centered backgrounds. They can be trickier because their distance from the corners of they screen changes with each resolution, but it is possible to make them seamlessly blend with your layout image. Some basic image editing and math will be needed, but it’s nothing too complicated.
Borders – Style, color, shape, pictures, effects…
PHP Dates – Days, months, years, random and round numbers, progress bars…