CodeinWP CodeinWP

Pure CSS Tooltips Revisited

Pure CSS Tooltips RevisitedCreating pure CSS tooltips with no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from.

For a recent project, I had to research the concept of CSS tooltips and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.

So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.

Read Article

Book Giveaway: HTML5 & CSS3 for the Real World

A New Book on HTML5 and CSS3This week I’m swamped with stuff outside of this blog, so I thought it would be a good time for another book giveaway. This time I have two copies of HTML5 & CSS3 for the Real World, published by SitePoint.

As many of you know, this is a book that I helped co-author with Estelle Weyl and Alexis Goldstein. You can read a full description along with table of contents on the SitePoint page linked above.

Read Article

CSS3 Attribute Selectors: Substring Matching

CSS3 Attribute Selectors: Substring MatchingThree of the attribute selectors in the CSS3 spec allow you to check the value the specified attribute for a string match. These attribute selectors are referred to as substring matching attribute selectors.

These can open endless possibilities, so I think it’s useful to have them in mind. And as a bonus, these selectors have strong support as far back as IE7, so pending thorough tests I think they are quite safe to use in many current projects.

Here’s a brief outline of each one, with some examples.

Read Article

Screencast: Why HSL Colors are Awesome

Screencast: Why HSL Colors are AwesomeSome of you might know that I did a screencast series for Learnable.com that served as a companion piece to the book of the same name that I co-authored.

In that video series, I covered a number of the new CSS3 and HTML5 features, and one in particular that I haven’t written much about on this site is HSL (or HSLA) colors.

In this post you’ll find the video originally titled “HSLA Colors”. In the Learnable series, this video is Step 2 of Lesson 7. Enjoy.

Read Article

Weird CSS Color Names

Weird CSS Color NamesWe all know that CSS colors can be declared using hex, RGB, RGBA, HSL, and HSLA. But colors in those forms are not very memorable (unless they’re greys or something).

While I’m sure we all know that common colors like red, green, blue, etc. can be declared by name, CSS has quite a few not-so-conventional color names. Here are a bunch, with their colors represented as backrounds on each paragraph.

Read Article

Roundup of HTML-Based Slide Deck Toolkits

Roundup of HTML-Based Slide Deck Toolkits & LibrariesI recently looked into some options for building a slideshow presentation for display in the browser. While there are options like Slideshare and Speaker Deck that let you upload your slides in PowerPoint or PDF format to convert them to online slides, there are also a ton of options for libraries, toolkits, and APIs that let you create your own non-Flash, full screen, responsive presentations.

Usually these presentations are HTML5-based, use JavaScript and/or jQuery, and often require a modern browser. But some of them are simpler and offer deeper browser support. Here’s a list of all of the ones I’ve been able to find, with a brief description of each.

Read Article

Understanding em Units in CSS

Understanding em Units in CSSDue to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS.

As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs.

Read Article

Release Histories for all Major Browsers

Release Histories for all Major BrowsersI thought it would be interesting to list the release history for major versions of each of the big browsers.

Two factors that I believe will play a role in eventually abolishing browser version numbers are the rapid release schedule, and auto-updating — both of which, if I’m not mistaken, are Google Chrome inventions.

Each version history table timeline has a single colored row that represents the browser release that took the longest.

Read Article

CSS: The Bad Parts

CSS: The Bad PartsEvery programming language has its good parts and its ugly parts. CSS (I know, it’s not a programming language, but whatevs) is no different.

In this post, I do nothing but vent. I’ve been coding websites for almost 12 years, and I’ve been doing CSS layouts for nearly half that (yeah, I was a late bloomer). I’ve come to realize what is good and bad about CSS, and here are what I consider “the bad parts”.

Read Article