Author: Jamie

  • CSS3: Custom Fonts using font-face

    font-face in css

    Let me start by saying that I am not a designer, so this feature didn’t mean much to me; however, when we told designers that they can start using custom fonts – they want ape @$!# for it.

    Over the years it has been mentioned countless times how little time you have to capture a person’s attention on your website. Often times this can be done with flashy or enticing designs. With this comes increased download times – slowing the page load down. Also, many web hosting providers supply a limited bandwidth or charge per GB. Flashy or enticing designs can be costly in both the bandwidth and page load times.

    With the ability to embed fonts with CSS3, us web developers, can start pleasing our designers by embedding their custom fonts in the website and stop using images to achieve the same affect.

    (more…)

  • jQuery: Padding a Variable or String with a Specific Character

    Every so often you will receive data from a database or potentially user input, but a specific number of characters might be required to format or display the data properly. As an example, you may wish to ensure that a number less than 9 is prefixed with a 0 where numbers that are 10 or more do not need the padding. By extending jQuery, two functions can be created to either prefix or postfix a specific value to a DOM element using a jQuery selector with a JavaScript array.

    To start, here is an example of the starting input and the ending output:

    (more…)

  • Apply two different colors to a single character with CSS

    When you have one or more characters in a word/logo that you want to apply multiple colors to (not a gradient).

    To accomplish two unique colors inside one character, the content property of CSS will be used in conjunction with the :beforepseudo element.

    (more…)

  • Deep clone an object with JavaScript

    To copy/clone an object using JavaScript, you will want to leverage the JSON.parse function in combination with the JSON.stringify function.

    (more…)

  • Disabling text selection/highlighting with CSS

    You want to prevent text from being selected/highlighted; whether to prevent copying and pasting or accidental text selection.

    To solve this problem you will want to set the user-select CSS property to none.

    (more…)