Thematic fonts

Google fonts is a pretty awesome collection of web fonts.  There must be at least 500 of them.  Recently, I’ve gone through all of them for a project and, because it is such a time-consuming task, I took note of fonts that could possibly be used for very specific themes.  For reference, I am listing…

Drawing text around a circle

I was recently creating a mockup and had need to draw text around a circle, like in an analog clock face.  In Photoshop, this involves two things:

  • Understanding that text can follow an arbitrary path.
  • How to draw a circular path.

I came across a good video tutorials that covered the details:

Bootstrap navbar overflow strategy

Although it can be complicated markup, the Bootstrap navbar does have lots of features.  Unfortunately, the component does not handle menu overflow, as stated within a warning box on the official Bootstrap site. Generally, the content wraps decently except for when the navbar contains specific navbar-left and navbar-right elements.  When that happens, the navbar-right element appears…

Creating a color scheme

Creating a color scheme is both an art and a science.  There are places online that suggest color schemes like Adobe Kuler.  But what if you wanted to create your own color scheme?  Well, using LESS – it’s straightforward. Complementary @base: #663333; @complement1: spin(@base, 180); @complement2: darken(spin(@base, 180), 5%); @lighten1: lighten(@base, 15%); @lighten2: lighten(@base, 30%);…

CSS-only shapes

I’ve come across a number of sites that touch on how to create triangles by using only CSS.  Most recently, I came across a site that acts as a nice reference for triangles and whole lot more:

https://css-tricks.com/examples/ShapesOfCSS/

Bootstrap

Typically, if using raw HTML/CSS, chances are that your site might work on something like Chrome, but not on something like Internet Explorer.  Enter Bootstrap – a collection of CSS and Javascript that handles the nuances between browsers.  It really has become ubiquitous – download it here: http://getbootstrap.com/

Awesome ways to display web icons

Great for visual indications, icons can add just enough interest to otherwise plain sites. Traditionally, Developers would use image files (like .gif, .jpg, or .png) to display in their markup.  The code for a button with some text and an icon might have looked something like this: <button> <img src=”path_to_my_icon/icon.png”> Click me! </button> Of course,…