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.
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:
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:
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 ;)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet accumsan mauris. Maecenas eu lectus tortor. Donec eu tellus felis. Sed quis nisl vel velit convallis faucibus. Sed urna nulla, pellentesque ut imperdiet at, auctor lobortis ligula. Nullam convallis, nibh in accumsan dapibus, neque nisi porta ligula, quis vehicula velit lectus vitae dolor. Nunc rutrum auctor nunc, id adipiscing massa porttitor vitae.
Proin in purus at diam semper fringilla et eget neque. Nulla sit amet arcu a diam rhoncus molestie sed vitae enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam sit amet ante quis sapien lobortis hendrerit id vitae neque. Aenean tristique accumsan ullamcorper. Donec interdum lobortis metus, nec ultricies purus dictum et. Proin molestie, sem in porta mollis, est erat tempor diam, nec mattis massa erat vel mauris. Suspendisse molestie erat eu sem viverra ornare. Vestibulum vitae rutrum quam. Aliquam quis tellus ipsum, nec vulputate nibh.
Nam id velit lectus. Nullam gravida adipiscing elementum. Suspendisse in tellus quis lectus cursus vestibulum. Vestibulum hendrerit malesuada magna id laoreet. Pellentesque vestibulum, nibh ut sagittis egestas, quam arcu tincidunt velit, id elementum massa nulla quis tellus. Ut non ante sit amet sem malesuada molestie nec eget purus. Pellentesque vitae felis non dui consectetur tristique. Phasellus malesuada, eros non tristique molestie, est velit pretium enim, vel accumsan leo mauris eget orci. Integer porta iaculis sapien sed pellentesque. Vestibulum pretium semper condimentum. Sed non justo at diam accumsan rhoncus vel non risus. Sed sit amet ante sit amet turpis mollis volutpat.
Vivamus tellus mauris, pellentesque sed aliquet et, commodo vel arcu. Nunc non ultrices sapien. Proin bibendum pharetra lorem, ac placerat arcu tincidunt dignissim. Integer adipiscing dapibus rhoncus. Vestibulum quis vulputate nisl. Ut ornare tellus eu elit adipiscing venenatis id non mi. Aenean blandit massa at sem volutpat accumsan. Nunc tristique ipsum orci. Proin imperdiet ullamcorper nunc ac convallis. Cras ultrices venenatis vestibulum.
Donec vitae venenatis eros. Aliquam leo tortor, tincidunt at pulvinar in, elementum eu ipsum. Nunc laoreet mi et odio imperdiet nec accumsan orci fringilla. In tempor, nisi id blandit imperdiet, ante urna porta ante, at tempus tortor nibh ac diam. Sed auctor mi eget turpis dapibus lobortis. Ut sit amet mauris erat. Duis vitae tortor nec neque interdum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas commodo dapibus eros nec molestie. Maecenas ipsum velit, ornare nec commodo eu, bibendum non lacus. Nulla vitae porttitor orci. Pellentesque velit erat, pulvinar eget egestas eu, dapibus vitae dolor. Suspendisse potenti.
Generated 5 paragraphs, 421 words, 2835 bytes of Lorem Ipsum
