Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
When I first saw this jQuery plugin I thought I would never be able to find a use for it. I mean on most of my sites I don’t need to do any crazy typography. Usually if I need something I would just do it using an image. Recently however, I found a use for this library. It happened that I wanted to add a tag around the first word of Joomla titles, so I could change the color. After finding out you couldn’t hard-code HTML in the titles, I was instructed to try out this library. Worked like a charm!
Let’s try and create the scenario I mentioned above. Imagine this simple html:
<h1>The Long Joomla Title</h1>
Along with this JS:
<script src="path/to/jquery-1.4.2.min.js"></script> // remember to change the paths
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(function() {
$("h1").lettering();
});
</script>
Above code is pretty straight forward. First we include jQuery, then the lettering plugin, and finally we call the lettering function.
By default the outputted code would look like this after the JS is ran:
<h1> <span class="char1">T</span> <span class="char2">h</span> <span class="char3">e</span> <span class="char4"> </span> <span class="char5">L</span> <span class="char6">o</span> <span class="char7">n</span> <span class="char8">g</span> <span class="char9"> </span> <span class="char10">J</span> <span class="char11">o</span> <span class="char12">o</span> <span class="char13">m</span> <span class="char14">l</span> <span class="char15">a</span> <span class="char16"> </span> <span class="char17">T</span> <span class="char18">i</span> <span class="char19">t</span> <span class="char20">l</span> <span class="char21">e</span> </h1>
Wouldn’t you hate to have to do this manually? Would make for very default to maintain code. Now if we change the title the ‘s automatically regenerate.
This still doesn’t quite do what we want it to do. We actually want to separate it into words instead of characters. Change the JS to this:
<script src="path/to/jquery-1.4.2.min.js"></script> // remember to change the paths
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(function() {
$("h1").lettering('words');
});
</script>
Now our spans would look like this:
<h1> <span class="word1">The</span> <span class="word2">Long</span> <span class="word3">Joomla</span> <span class="word4">Title</span> </h1>
Now to style the first word to be a different color it is this simple!
h1 .word1 { color: #f00; }
There is quite a bit of other functionality, but I hope this gives you a start. Check out Dave Rupert’s article for more info.
Have you ever needed one image in many different sizes on a website? I know I have many times and have never found a good way to handle this until now!
In the CMS’ you build do you have the user upload different sizes of images? Maybe a large image, and a thumbnail. Wouldn’t it be so much nicer if you could have them upload the large image, and then you use whatever sizes of that image you need? Here is how:
This smart image resize technique is really handy in that there is only ONE file you need to worry about.
This is a breakdown of how it is used:
<img src="/image.php/image.jpg?width=200&height=200&image=/full/path/to/image.jpg" alt="" />
The above code will use the “width” and “height” parameters as the max the image should contain. So the image might be 200px wide but only be 150px tall in order to keep the original ratio.
Now if we wanted to crop our image into a square no matter what the ratio is we would add on another parameter called “cropratio” as follows:
<img src="/image.php/image.jpg?width=200&height=200&image=/full/path/to/image.jpg&cropratio=1:1" alt="" />
*** Please note that the image parameter (/full/path/to/image.jpg) must be the full path from the document root to the image.
If you are having problems check out the shifting pixel’s page.
I am happy to announce that the following two people have won the NERD shirts:
1. Lavesa Glover (@Vesinator3000)
2. Brian Jones (@Down8)
Frankly I wish I could give all of you that entered a shirt but contests don’t work that way. I will be doing more in the future so please stay tuned to this blog by subscribing to my feed
Also make sure to head on over to The Nerd Machine and buy these shirts anyways. They are more than worth it!
Have a happy holiday season, and hit me up on twitter anytime! (@brenelz)
Brenelz Web Solutions is proud to giveaway some NERD apparel as we begin to enter the holiday season. Are you proud of your “NERD” status? Well with the T-Shirts I am giving away you can make sure everyone knows that you love being a gamer, web designer, TV junkie, or anything else NERD related.
I will be giving away “2 SNES Black” Nerd Machine shirts
There are a couple things you must do in order to be eligible to win the T-Shirts.
The 2 winners will be picked on Nov. 30 randomly.
Do you ever notice that your border-radius corners just don’t look as good in Safari as they do with Firefox? I certainly did with one of my latest projects. It is especially bad when it falls onto a dark background.
Courtesy of: Sneak – http://tumble.sneak.co.nzThe fix is actually real simple and only involves adding one extra line of code to your selector.
-webkit-background-clip: padding-box;
See the difference? Make sure to add this line of CSS every time you use border-radius and you will have sharp looking corners every time!
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!