Browsing Tag

tips

Quick Tip: Multiple Borders with Simple CSS
videos

Quick Tip: Multiple Borders with Simple CSS

Did you know that we can achieve multiple borders with simple CSS, by using the :after amd :before psuedo-classes? This is something I recently learned myself! I’ll show you how to add more depth to your designs, without images, in just a few minutes.

Quick Tip: New HTML5 Form Features
videos

Quick Tip: New HTML5 Form Features

In this screencast, we’ll take a quick look at a few new HTML5 features: the placeholder and autofocus tools, as well as the email and URL input types.


This entry is part 3 of 14 in the HTML5 and You Session
Quick Tip: A Fast Overview of Querious (MySQL Manager)
videos

Quick Tip: A Fast Overview of Querious (MySQL Manager)

In today’s video quick tip, we’ll have a quick (not sponsored) overview of a Mac database manager for MySQL that I came across yesterday, called Querious. As I mention in the screencast, I particularly like this one, because it just works — without being too complicated or overwhelming in the way that PHPMyAdmin might be for some.

Quick Tip: Did Internet Explorer get the Box Model Right?
videos

Quick Tip: Did Internet Explorer get the Box Model Right?

The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.

As we mostly work with extremely sensitive floated layouts, where even the addition of a 1px border can break the design, I wonder: did Internet Explorer get it right?

Quick Tip: Pure CSS Reflections
videos

Quick Tip: Pure CSS Reflections

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property. I’ll show you how to use it in today’s video quick tip!

Quick Tip: Using JSLint
videos

Quick Tip: Using JSLint

It’s nothing to be ashamed of: you probably don’t write perfect JavaScript the first time. While debugging JavaScript is usually done manually, today’s quick tip will teach you how to use JSLint, a tool for catching JavaScript bugs. Think of it as spell-check for JavaScript.

Quick Tip: The Multi-Column CSS3 Module
videos

Quick Tip: The Multi-Column CSS3 Module

For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that – again – no support in Internet Explorer. But that’s okay! The world will not end if IE users see one longer paragraph. I’ll show you how to use this helpful module in today’s video quick tip.


This entry is part 6 of 16 in the CSS3 Mastery Session
Quick Tip: Pure CSS Text Gradients
videos

Quick Tip: Pure CSS Text Gradients

With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers! I’ll show you how in today’s video quick tip.

Quick Tip: Google Fonts API: You’re Going to Love This
videos

Quick Tip: Google Fonts API: You’re Going to Love This

Google have made two huge announcements today. One of these concerns the Google Fonts API. Simply by linking to a particular font, stored on Google’s servers (save on bandwidth + caching benefits), we now have access to a wide array of custom fonts. Quite literally, you can integrate these fonts into your project in about 20 seconds. It’s as simple as that. Further, due to the operations being performed behind the scenes, these custom fonts will even be recognized back to Internet Explorer 6. I, for one, and am extremely excited about the possibilities, and the font catalog is surely to continue expanding over the coming years.

Quick Tip: Making a Fancy WordPress Register Form from Scratch

Quick Tip: Making a Fancy WordPress Register Form from Scratch

In this tutorial, I will guide you through the process of making a beautiful “Register” form, using Fancybox, jQuery, and, of course, WordPress. As you’ll find, the process is really quite simple.

Page 8 of 12« First...56789101112