How to create a stroke around a number with CSS

I recently had to find out how to do this while working on a site a couple weeks ago and thought I’d share. So, what we’re making is this.

Screen Shot 2014-10-26 at 9.25.07 PM

HTML

https://gist.github.com/anonymous/f92fdf33d279c725f435

From the above HTML you can see we first create three layers:

  1. a background (black solid background with rounded corners)
  2. a stroke (a white circle)
  3. another inner-circle with a number in it (black circle inside of the white one

CSS

https://gist.github.com/anonymous/45ad0a806120d297f5db

There are essentially three layers here. The background is an obvious one. The stroke is a white background <div> that is made into a circle with border-radius and some padding. This allows us to fit the inner circle (also a <div> made into a circle)  into the previous white circle which creates the illusion of a stroke with some padding. So, black square, white circle (with padding), black circle.

You can fiddle with this.

Hash 1.1: IRC/HipChat-like chat system built on PHP, jQuery, HTML, & CSS

First off, this is my first post about Hash, a “secret” chat project I’ve been working on to replace my personal IRC woes (mainly IRC logging). Don’t get me wrong, I love IRC, but I also love HipChat, but I hate that HipChat list closed….you get the point. Plus I needed something dead simple, no logins, no signups, just chat…

Hash is a simple IRC-like, HipChat-like (mainly in that it has persistent chat), (PHP, jQuery, HTML/CSS)-based chat system. So anyone can use a Hash install to use.

Screenshot showing Hash collecting nick and hash names

Here’s how it works. All you do is create a room (which I call a hash, because you hash things out), and pick a nick. No login. No password, in fact two people (at the moment) could use a single nick or login as many. Then, chat. Notifications let you know when something new is said. Chat history is persistent.

It’s developer friendly, which only really means it’s easy to create rooms, share them, and assign people nicks because the chat uses ?hash=&nick= to start the person loading the hash off with a hash and a nick. Easy for inviting clients into chat rooms by just giving them a link.

Hash 1.1 will continue to make small improvements to make Hash more useful. I have been using it, and it appears to be stable enough to use, again for private purposes. Not sure about public use yet, but I need it for a few new things, and so 1.1 will get those features.

You can try out Hash on my site where you can make a hash and start chatting away with someone else. I’d love to see people use it and give feedback.

Want to help? Check out Hash on Github. There are some issues that need some help.