Treehouse: CSS3. Coding resources for beginners. Cheat Sheets & Quick Ref Cards for Developers. Download Hundreds of Free @font-face Fonts. In-depth tutorials and articles on web design | Webdesigntuts+
Embed custom fonts on your website with the @font-face property. Ryan Boudreaux shows you how to get custom fonts into a usable form for your website designs by employing the @font-face property. My last post on getting font inspiration from film and television pointed out several custom fonts that were created based on the opening credit titles for films such as Men In Black and Back To The Future and television series such as I Dream of Jeannie and Gilligan's Island. In this second part, I will show you how to embed these custom fonts into your websites, enabling users to view and appreciate the nifty fonts no matter the browser or device.
Now that you have downloaded a collection of nifty film and television true type fonts, you may be wondering how you get them to a useful state on your website. Unless your users have the same fonts installed on their local devices, they will not be able to view your clever custom fonts. Figure A @font-face { font-family: bttf_font; src: local(bttf_font), url('fonts/bttf.ttf') format('opentype'); h1 { font-size:32px;
Code Your Own Juicy Tabbed Slider (using the Nivo Slider) A week ago, on our sister-site, Webdesigntuts+, we showed you how to design a "Juicy Tabbed Slider" in Photoshop. Today we're going to show you how to actually code it in a few quick steps. No heavy CSS or Javascript knowledge required - promise! We'll be using the popular Nivo Slider to handle the animation, so let's dig in! Let's Dig In! Alright, so assuming that you've gone through the design phase of this tutorial, now you should have a pretty basic slider element in Photoshop (or Fireworks) format. What's better is that this is completely skinnable and resizable - so if you've made any heavy customizations in the free PSD that we handed out, you'll be able to incorporate your franken-modifications here as well!
Step 1: Download the Nivo Slider Go ahead and download the latest version of the Nivo Slider from their page. It's important to note that we're not re-inventing the wheel here. Step 2: Understanding the Basic Setup Next, let's peek at the raw HTML that generates the slider: