CSS Text Wrapper

  • Wrap content to any shape. Including curves, slants, non-linear images, or whatever you can think of
  • Trace images for quick creation
  • Content Independent Your content and text can change but your wrap shape will stay the same.
  • Multiple Export Methods help ensure you can find an efficient way to add the code to your site.

Overview

The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape. Jump down after the video for more information.

Video Example: How To Use the Wrapper

This video covers how the wrapping works, how to use the wrapper to create a simple text wrap around two circular images, and how to add the generated code to your website or blog.

How It Came To Be and Why It’s Better Than What’s Available

One of the things I do for contract work is coding PSDs to CSS/HTML. I stand by telling my clients, if they can design it, I can code it, so sometimes I get myself into a rut with a tricky design element. Well a design came along that had a curved layer of text around a curved graphic. The design was going into a CMS system so the content would be changed from time to time, and therefore needed to be independent of the markup. I found that by floating divs to the left and the right of the each line of content, you would be able to force the text into place. But it took a loooong time. Each div on each line required tweaking over and over again pixel by pixel until it was just right. There had to be a better way to do that.

Feedback

The Wrapper is very new and still needs a lot of work. So please leave me any problems you find, as well as suggestions and examples of work you’ve done with it!

FAQ

Q: Long single strings without spaces (like long URLS) do not wrap? A: This unfortunately is the same behavior you’d see even if you didn’t use the wrap. Your browser will not break up long strings to wrap them. (Internet Explorer has some alternatives) Q: Does this mean I have to use flash on my website? A: No, flash is only used in the tool to create the wrap. You use it to draw the shapes you want to wrap, the tool then generates the CSS/XHTML code to make your wrap. No flash is required on your site. Q: Can I use this with standard inline images (img tag) and not just backgrounds? A: Yes, though you will need to use absolute positioning to put them into place.

Charades Ideas

  • Playable online
  • Print out pages of cards
  • Filter cards by category
  • Special Kids-Only category
  • Users can post suggestions on how to complete a card

Overview

Charades Ideas is an online generator for cards to use when playing Charades, or any other game that uses references of pop culture. Users can play online, or print off batches of cards to use away from a computer.

How It Came to Be

On a cold, Minnesota winter night, some friends and I were having a game night. However, when we decided to play Charades, we ran into a problem. How do we come up with the words/phrases that we have to act out? Of course I went to Google. And at the time searching ‘Charades Ideas’, came up with nothing. Nor did ‘Charades Generator’, or ‘Charades Cards’, or anything that I could think of. I was pretty surprised as it seemed like a relatively simple thing to accomplish. Seeing an unfilled need, the next weekend I spent a few hours and I scraped together www.charades-ideas.com.

Why Was This New or Better Than What’s Currently Available?

Quite simply, there was nothing out there that did this, or even came close. And surprisingly, if you looked at search statistics from Overture and Google, it showed that ‘Charades Ideas’, was being searched thousands of times per month. Despite having no competition in this area, I still set out to add a fair amount of features.

Playable Online

Upon entering the site, you are immediately greeted with a randomly generated card. Now if you wanted to just take your laptop and set it on your coffee table, you could start playing. Just can turn the screen towards someone and have them act out the clue on the card. When they are done, simply rotate to the next person and click ‘next’ (or push the spacebar).

Printable Cards

This is the most popular feature on the website. In two steps you can generate up to 15 pages of cards to print off your home printer, complete with cut-lines. People tend to prefer using cards drawn from a hat rather than coming back to their computer time and time again to get a new clue. The site currently generates over 110,000 printed cards a month.

Category Filtering

There are categories for Music, Movies, Books, TV, Celebrities, and Kids. But what if you don’t really know any celebrities, or you are running a movie themed party? You can select which categories you would like to pull cards from by just toggling them on or off. Select one or select a few, and it will only draw cards from those categories.

Kids Cards

I found quickly that over half of the people coming to the site were looking for charades ideas to use with kids. To fill the request of a lot of users, I added a number of basic concepts just for kids into the database (ex hammer, monkey, etc).

What is it? - User Ratings and Suggestion Submittal

To add a little bit of interactivity with the site, users have the ability to submit ‘suggestions’ on how they would complete a clue. After completing a clue, a user is passively asked (to the side of the card) if they were successful in acting out the clue, and if so, how they did it. This way, if a later user is stumped on how to act out the clue (and they want to cheat), they can take a look at how others did it. Surprising, this feature has been used quite frequently.

How Can it Make Money?

I would consider Charades-Ideas to be my first successful site. The traffic is reasonable but very steady. As a result, I’ve tried many different methods for monetizing the site, and it continues to be huge part of my education in online advertising. This site has gone through two different phases of advertising.

The Trial Run

In the early stages of the website, I made some efforts into running advertisements on the website. I figured that this site would be the perfect place for board game related advertising. Seriously, what better way to advertise to people who play board/party games then by advertising to them while they play? I offered two methods of advertising. The first would be a banner alongside the playable card on the homepage. Providing a single ad offered great visibility to the advertiser. The second ad type was allowing text ads to be printed on the bottom of each printable card. I really liked the idea because it integrated the advertisement right into the hands of the people playing games. My first round of advertising efforts was targeted at independent board game creators. I looked around at popular board game websites and forums to see who was advertising on those sites. I put together a formal email, introducing myself, the site, and asking if they had any interest in advertising with us. I sent out roughly 50 emails, and got responses from 2. Which I thought was a good return considering it was practically spam. Further, through a friend in the industry, I offered 10,000 free impressions to independent board game creators and again got a few bites. The first round of advertising ran for about a month and a half. The click-thru rates on the homepage ads weren’t great, about 0.1%. But after the cost of a thousand impressions, this came to about 20 cents per click. Which was comparable to running an adWords campaign. The printed cards were a new way to advertise, but they were very difficult to track. Which made them much less desirable to advertisers. I decided that, even though, at the time, the site was serving 5000 visitors a month, 20,000 page views a month, and 110,000 printed cards a month, with no marketing, the numbers are just not big enough to generate a solid advertising revenue.

I spoke to soon

Eventually, I found some time again to explore advertising with Charades-Ideas. The first step I tried was by adding Google Ads to the site. I found that without much work, I was able to earn enough to pay my (shared) hosting bill a month. This was not the big time. According to my AdSense stats, I was only clicking the minimum 3 cents a click for the ads on my site. I did some research into finding higher paying ads for my demographic and thought perhaps Google needed some help targeting the board game crowd. I took one weekend and did a redesign of the site and added new focused content. Introduced reviews of board games, and added some additional content about Charades. The results of this has been mixed. Initially my income dropped off significantly but there have been days of major growth. So experimentation will continue.

Who Needs Money When You’ve Got Love?

Though the site has yet to generate any substantial amount of income, I’ve found that the most rewarding part of the site comes from user’s comments: “SUPER AWESOME AMAZING THE BOMB BO_DIDDY completely the best even if i don’t have good grammer, your site still ROCKS” -Ethan “Loved your site. I am using your ideas as a “main idea” type of charades for a group of fourth graders. The idea is they can’t say the word or show actions.” -Kelly “This is great, I was looking for ideas for children and yours are fantastic. Thanks” -Laura “IT’S AWESOME!” -Mari And my personal favorite: “Hey Nate! I went online to see if I could find any ideas for words for charades to play with my niece and nephew last night and lo! I run into your charades-ideas. It was perfect! We had time to bond vs. playing the game cube all night. Thanks for putting this out there. I love that you can generate the words on the computer. We cheated a lot and skipped so many words we couldn’t do, and still didn’t run into any repeats. Lots of levels available in the charades words for everyone - my niece is 13 and my nephew is 10. I’ll definitely be back and will keep posting suggestions as I think of them. Cheers! Niki.” - Niki It makes me really happy to know that the few hours I put into the site one wintery weekend in 2007 has brought a lot of happiness for other people. :D