CSS pattern backgrounds

With CSS3 came pattern backgrounds. Unbelievably epic, and extraspecial cool. Sweet images without images! For example:

This is a diagonally striped, pure css background. Promise.

The trick is this:

    background-image: -webkit-gradient(linear, left bottom, right top, 
        color-stop(0, #f2f2f2), 
        color-stop(0.25, #f2f2f2), 
        color-stop(0.25, #eee), 
        color-stop(0.5, #eee), 
        color-stop(0.5, #f2f2f2), 
        color-stop(0.75, #f2f2f2), 
        color-stop(0.75, #eee));
    background-size: 30px 30px;

What this basically does is create a 30 by 30 repeatable graphic, linear from the left bottom to the right top. It is diagonally striped because the actual gradient doesn't have a gradient. The color adjustment is forced into a sharp line. If this 30 by 30 pixel pattern is repeated, it fills the element right up.

You can find an incredible amount of full css-based patterns in Lea Verou's Gallery.

Neat css shadows

One of the coolest css3 properties is the text shadow. The simple beauty of a nicely placed shadow can add a lot to an otherwise basic text.

Whoa, it has a shadow!
And now it's white, wut. D:

The second example up there is actually the one I absolutely love. The effect is really nice when you don't overdo it. It looks good in a footer for example.

So, how do you do that? Like so:

text-shadow: 1px 1px 1px #fff;

The first value is the offset fo the shadow horizontally, the second is vertical offset and the third is the fluffyness -- or blur, if we want to keep it professional. You can play with this endlessly, for example:

It's pretty sunny out here...!

In box-shadow (used on elements rather than texts) there is a fourth value: spread. This value basically makes the shadow larger or smaller, more outward or inward. This is what spread does:

Large shadow, light source close.

Small shadow, lit from further away.

box-shadow: 0 0 10px 5px #888; /*close*/
box-shadow: 0 0 10px 0 #888; /*far*/

And for some extra fun:

Wait, where's the light source?

Which is several different shadow-properties added to one element like so:

text-shadow: 20px 15px 3px #888,
            -20px -15px 5px #888,
             40px 0 3px #888,
             5px -30px 7px #888;

Syntax on blogs

For a blog about coding, a good syntax highlighter is a must-have. I went out to search for the best one for me, and found Alex Gorbatchev's SyntaxHighlighter.

He first developed it in 2004, and since then it has been picked up by the internet. Wordpress and Joomla have it integrated nicely as plugins, and it's easily added to Blogger. There are very, VERY many websites and blogs out there that explain how to implement SyntaxHighlighter into Blogger, so I'll just thank Alex from the bottom of my 8bit heart and stick to the basics. Below is the code I have added to the html of this blog. You put this in the head of your code.


The creator of this script hosts all the necessary files a webmaster needs on his own server space, which is awesome if you have a blog but haven't set up your own server yet.

There's a whole lot of brushes - styles for different coding languages - you can use, and it's easy to create your own brush, or style, to fit your needs. In the snippet up above I've used the html brush, you do this like this:

Or like so:

To have the highlighter actually work, you'll need to have this snippet somewhere on your page:


Super easy, eh?

JQuery FAQ bits (animation and search)

Looking to build a nice FAQ page, I decided I wanted sliding answers and a search option. Googling, there are many plugins, but it's also not that hard to come up with "just" some code.

Here goes -- the html base code itself is as follows:

<div class="blockQ">
    <div class="q">
        What's the answer to life, the universe and everything?
    </div>
    <div class="a">
        42.
    </div>
</div>

I chose to wrap the entire block - both question and answer - in a div to be able to hide and show entire blocks easily later. Then, the jQuery actionscene.

$(document).ready(function() {
    $('.a').hide();
    $('.a:eq(0)').show(); //show only the very first answer
    $('.q').click(function(){ 
        $('.a').slideUp();
        $(this).next().slideToggle(); //show the next element in the dom, which
        //conveniently is the answer belonging to the clicked question
    });
});

What this does is hide every answer, except the answer to the first question. Esthetics, really. Then, as soon as a question is clicked, the answer to that specific question slides into view, while the already visible one(s - you never know) slide out.

Aight! Works fine!
But what if you have a thousand questions? Who will read them all? You want your visitors to be able to find the answer they need. In comes a search option. You could implement google for this, but I wanted it on the same page, unobtrusive and quick. You can style it any way you like, but if you take a simple input element like so:

...you can hook jQuery onto that with a key-up event, to search instantly as you type.

$('#search').keyup(function(){
    var filter = $(this).val(); // Retrieve the input field text
    $('.blockQ').each(function() // Loop through the questions/answers
        // If the question and answer does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

Smooth action!

Then, to finish it off, a reset button to cancel your search phrase and show all the questions again.

function resetA() {
    $('#search').val(""); //empty input element
    $('.blockQ').show(); //show all questionblocks again
    $('.a').hide(); 
    $('.a:eq(0)').show(); //and show only the first answer.
};

There you have it! Check back for a working example soon, have to set up my hosting first ;)