CSS – Local File System Paths On Windows

When working with Windows you probably have noticed that local file paths use the backslash as the path separator. Although this is the case, even on Windows, in CSS you can use the forward-slash as a path separator to reference an image. If you want to use the forward-slash though, you must escape it with another backslash. Here are two examples:

#elem1 {
  background-image: url("relative-path\\to\\file.ext");
}
#elem2 {
  background-image: url("C:\\path\\to\\file.ext");
}
#elem3 {
  background-image: url("relative-path/to/file.ext");
}
#elem4 {
  background-image: url("C:/path/to/file.ext");
}

As you can see above I have three different ways to add a background image:

  1. url("relative-path\\to\\file.ext")
    For the element of ID “elem1” I am specifying that the background image is found at the relative path of “relative-path\to\file.ext”. It is important to note that I am escaping the backslashes (path separators) with an additional backslash.
  2. url("C:\\path\\to\\file.ext")
    Just as in the previous example, if we need to reference something using an absolute path while maintaining backslashes as path separators, we need to escape all backslashes with a preceeding backslash.
  3. url("relative-path/to/file.ext")
    For the element of ID “elem2” I am specifying that the background image is found at the relative path of “relative-path/to/file.ext”. Even though the normal path separator on Windows is a backslash you can use a forward slash.
  4. url("C:/path/to/file.ext")
    Just as in the previous example, if we need to reference something using an absolute path we can use a forward slash as the path separator.

This may seem like a minor issue but when developing Electron apps it may come in handy. Have fun and as always, happy coding! 😎

Canvas – Making A Simple Logo

A few days ago while I was working on updating my resume I thought about ways to add my simple “CW” (short for Chris West of course) logo to it. At the time of writing this article I presented my logo on CWestify.com using CSS3:



Leveraging the Canvas

One great thing that Mozilla has promoted for years is the <canvas>. As long as the canvas is not tainted it can turn its contents into an image (PNG or JPG). The great thing about using PNGs is their support of transparency and partial transparency. So the question is, “how do you draw HTML on a <canvas>?” Without using a library you can actually do so by inlining the styles and then turning the HTML code into SVG:


  
    
CW

Next we can either get the outerHTML of this SVG element or we can store the value directly in JavaScript (I will choose the latter for this example):

var data = '\
  \
    \
      
\
CW
\
\
\
';

Now we need to turn this SVG into something the <canvas> will display. The <canvas> will display images so we can load the SVG code into an image’s source:

// Define an image and set the source of the image to the SVG
var img = new Image();
img.src = 'data:image/svg+xml;base64,' + window.btoa(data);

Once the image object loads, we can then draw it onto the <canvas>:

// Variable to store the data URI for the PNG
var strPNG;

// Define an image
var img = new Image();

// Once the image loads draw it onto a new canvas
img.onload = function() {
  // Create a canvas
  var canvas = document.createElement('canvas');
  canvas.style.height = 0;
  canvas.height = 300;
  canvas.width = 300;

  // Draw the image onto the canvas
  canvas.getContext('2d').drawImage(img, 0, 0);

  // Store the image's data URI in a variable for later
  strPNG = canvas.toDataURL();
};

// Set the source of the image to the SVG data
img.src = 'data:image/svg+xml;base64,' + window.btoa(data);

Of course, since we are creating a <canvas> without adding it to the DOM we wanted to immediately use it to get its data URI and store it off into a variable (strPNG) for later use. All together the code looks like this:

var data = '\
  \
    \
      
\
CW
\
\
\
'; // Define an image var img = new Image(); // Once the image loads draw it onto a new canvas img.onload = function() { // Create a canvas var canvas = document.createElement('canvas'); canvas.style.height = 0; canvas.height = 300; canvas.width = 300; // Draw the image onto the canvas canvas.getContext('2d').drawImage(img, 0, 0); // Do something useful with the PNG's URI doSomethingWithLogoURI(canvas.toDataURL()); }; // Set the source of the image to the SVG data img.src = 'data:image/svg+xml;base64,' + window.btoa(data);

As you can see in the code above, after drawing the image on the canvas we call the doSomethingWithLogoURI() function so that it can use it.

Resulting PNG Image

Using this method produced an image in Chrome which I then saved off and uploaded to this blog so that regardless of the browser’s CSS3 capabilities my logo will always look the same:

CWestify Logo
CWestify Logo

Conclusion

Now we know that as long as we don’t taint the canvas with some outside source, we can basically turn any HTML element into a PNG. If we wanted to we could even use the method I outlined a while back to make such an image downloadable upon clicking on it. Perhaps this may open up your mind to other cool applications. Have fun! 😎

Game – Bible Book Master

Yesterday I really wanted to make a multi-lingual so I decided to make a game in which you have to go through all of the books of the Bible as fast as you can. I still need to do some work on the game to make it more user-friendly, but the following (which can also be accessed here) is what I came up with:

As of when I wrote this post the game supported 9 languages including English, Spanish, Vietnamese, Korean, and Haitian Creole. I chose the languages based on those in which I could find the names of all 66 Bible books. In fact, in all cases except for Vietnamese I used the Online Watchtower Library on jw.org in order to get the bible book names, using this JavaScript code in the web console:

$('.book .name').map(function() {
  return $(this).text();
});

As far as translating the rest of the words in the game, since I kept the amount of text to a minimum I simply used good ol’ Google Translate.

Since I wrote the server-side in PHP I ended up using $_SERVER['HTTP_ACCEPT_LANGUAGE'] to auto-detect the language if it wasn’t set:

$lang_code = valueOf($_REQUEST['lang'], preg_replace("/\W.*/", "", $_SERVER['HTTP_ACCEPT_LANGUAGE']));

Finally, I spent way more time than I wanted to on the rounded CSS3 buttons:

.round-button {
  font-size: 64px;
  line-height: 3em;
  height: 3em;
  width: 3em;
  border-radius: 3em;
  background: #000;
  color: #FFF;
  display: inline-block;
  text-align: center;
  font-family: fontello;
  transition: 0.5s cubic-bezier(0.5,0.5,0.5,0.5) all;
  cursor: pointer;
  box-shadow: 0 0 0.25em #000;
  z-index: 1;
  position: relative;
  border: 0.05em solid #000;
  padding: 0.45em;
  margin: 0.5em;
  box-shadow: 0 0 1em 0.5em rgba(0,0,0,0.5) inset, 0 0 0 #000;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.round-button .text {
  font-size: 0;
  position: absolute;
  line-height: 1em;
  margin-top: -2em;
  display: block;
  width: 6em;
  text-align: center;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
  transition: 0.5s ease all;
}
.round-button:hover {
  box-shadow: 0 0 0 0 #000 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  background: #FFF!important;
  z-index: 2;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  color: #000;
  padding: 0;
  border-width: 0.5em;
}
.round-button:hover .text {
  font-size: 0.5em;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF, 0 0 3px #FFF;
}
.round-button:active {
  box-shadow: 0 0 1em 0.1em #777 inset, 0 0 0.125em 0.125em #FFF, 0 0 0.0625em 0.25em rgba(0,0,0,0.5);
  transition: 0.1s ease box-shadow;
}

As you will see in the game, each rounded button is actually individually colored. For example, the following is for the facebook button:

.round-button.facebook {
  background: #3b5998;
  border-color: #3b5998;
}
.round-button.facebook:hover {
  color: #3b5998;
}

All-in-all I am happy with how this game turned out but I would like to add a few improvements. Try the Bible Book Master game out yourself and let me know what you think. 😎