Tag Archives: CSS

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. :cool:

CSS – Expanding Underlines

The other day I was visiting Grid Style Sheets and was fascinated by the fact that the underlines of the links seemed to expand on mouse over. At first I tried simply using transition in conjunction with margin and padding but unfortunately the results were a bit shaky. Therefore I decided to actually examine the code and found they were using the ::before pseudo-selector. After some tinkering around, I landed on this solution for a simplified version of expanding lines for all links:

a:link, a:visited {
  color: #66F;
  text-decoration: none;
  position: relative;
  transition: all 1s;
}
a:hover {
  color: #00F;
}
a:link::before, a:visited::before {
  background: #DDF;
  box-shadow: 0 0 1px #00F;
  content: '';
  height: 2px;
  position: absolute;
  top: 100%;
  transition: all 1s;
  width: 80%;
  margin-left: 10%;
}
a:hover::before {
  background: #33F;
  box-shadow: 0 2px 2px #CCF;
  width: 110%;
  margin-left: -5%;
}

Here is how the end result looks (try moving your mouse over either Google or Bing:

Expanding Underlines

Pretty cool, right?! CSS3 Definitely adds some cool style to the web these days. :cool:

Embedding Stylesheets in JavaScript

Now Available in YourJS

One of the cool things about JS is that you can do almost anything with it! The only thing is that you need to have the tools to get that “anything” job done. Recently, I had the desire to embed HTML, CSS, and JS all in one file that would be loaded when a specific browser event fired. The common solution is to use a library such as jQuery to load an HTML snippet but I wanted a different solution. I was thinking it would be great to be able to do something like this:

css({
    'div.special-1, span.special-2': {
        fontFamily: 'Trebuchet MS',
        a: {
            textDecoration: null,
            '&:link, &:visited': { color: '#08F' },
            '&:hover, &:active': { color: 'red' }
        }
    }
});

Having this resulting in a stylesheet added to the HEAD with the following CSS:

div.special-1, span.special-2 {
    font-family: Trebuchet MS;
}
div.special-1 a, span.special-2 a {
    text-decoration: none;
}

div.special-1 a:link, span.special-2 a:link,
div.special-1 a:visited, span.special-2 a:visited {
    color: #08F;
}

div.special-1 a:hover, span.special-2 a:hover,
div.special-1 a:active, span.special-2 a:active {
    color: red;
}

After a bit of work to make a few Sass-like features work, I came up with the following JavaScript function:

Brief css(objStyles, opt_ancestors) Documentation

This function takes an object representing CSS rules and adds a stylesheet with those rules to the document.

Parameters

  1. objStyles
    An object representing the CSS rules to be inserted into the document.

    • Property names will be used as media queries if they start with "@media ".
    • Property names will be used as rule selectors if the value is an object.
    • If a property name is to be used as a selector, if any selectors don’t contain &, "& " will be prepended to it.
    • For all selectors, & will be replaced recursively with the selectors found in the parent.
    • CSS property names will be uncamelcased by inserting dashes before each uppercased character and lower casing all characters.
    • If a value is null or undefined, it will be turned into "none".
    • If a value is a number other than 0, "px" will be appended to it.
    • If a value is an array all of the items will be concatenated together, using "," to delimit the values.
    • If a value ends with ! it will be replaced with "!important".
  2. opt_ancestors
    Optional. This can be an element or an array of elements which will get another class added to target all rules to it and its children. This can alternatively be a CSS path (selector) specifying the root on which all CSS rules created should be based.

Returns

The stylesheet that is created and appended to the document is returned.

Future Development

I feel like this function turned out pretty well so I plan on incorporating it into YourJS (whenever I finish up with that :-D ). In the meantime, if I update the code, you will be able to see the updates here or in GitHub. One thing I would like to incorporate is the ability to have variables. Another nice-to-have thing would be the ability to supply more options such as where the stylesheet should be inserted (if it will be inserted at all), pretty-print, and helper functions (eg. darken). Feel free to leave a comment saying what other things may be nice to have. 8-)

JavaScript – Create Stylesheet

At times you may need to add a dynamically created stylesheet to a page via JavaScript. You can do just that with the following function:

/**
 * Creates a STYLE element with the specified content.
 * @param  {string} content  The stylesheet content.
 * @return {!Element}  The created STYLE element.
 */
function createStyleSheet(content) {
    var style = document.createElement('style');
    var styleSheet = style.styleSheet;
    if (styleSheet) {
        styleSheet.cssText = content;
    }
    else {
        style.appendChild(document.createTextNode(content));
    }
    style.type = 'text/css';
    return style;
}

It is important to note that the above function simply create the STYLE tag with the specified stylesheet content. It does not add it to the head or anywhere else in the document. Also, it is important to note that some versions of IE limit you to 32 stylesheets per page so multiple uses of this function are not encouraged unless you know your visitors will not use such a version of IE.

CSS – Change Content On Hover

Today I saw a question about changing content without necessarily using JavaScript to do so. Recently I have had to do a little bit more with CSS and think of more solutions with JS. Thusly I came up with a somewhat elegant solution to replacing content on hover without JS:
JS Bin

This example basically shows that when you move your mouse over either the image or the text, another image or text takes its place. This works in all modern browsers and even IE. The downside is that in order to make sure that it will always work in older versions of IE, you need to have the .hoverable element be an A (anchor) tag. Please let me know if you have a better solution! 8)