Box Shadow and CSS3

written by: jason
Box Shadow and CSS3

Coming from a print background, I use drop shadows all the time. They look good (when not overused) and print well. Not to mention they are easy to create with practically a click of a button in Photoshop. On the web though, designers have to be VERY careful when using shadows. There are too many variables that we can’t control such as the resolution of the monitors of our visitors as well as browser that they are using. Plus, you always have to ask yourself why you need a drop shadow. Are you adding it just because you can, or is it helping the reader somehow. Right now, I have the opinion that shadows are OK on background images and logos, but I steer clear of using them on text. I just find it makes it way too hard to read. One more word of advice is to make the shadows SUBTLE. Do not use black (#000) as the color of your shadows.

OK, here’s the css code that will create shadows in Firefox 3.5+ and Safari 3+, Opera 10.5 and Chrome. Internet Explorer is still lagging behind 🙁

  1. -moz-box-shadow: 5px 6px 7px #d0d0d0;
  2. -webkit-box-shadow: 5px 6px 7px #d0d0d0;
  3. -box-shadow: 5px 6px 7px #d0d0d0;
-moz-box-shadow: 5px 6px 7px #d0d0d0;
-webkit-box-shadow: 5px 6px 7px #d0d0d0;
-box-shadow: 5px 6px 7px #d0d0d0;

-moz-box-shadow will create shadows in Firefox
-webkit-box-shadow is used for Safari and Chrome browsers
-box-shadow is used for Opera

The numbers: in the above example, the 5px is the horizontal offset. The 6px is the vertical offset, the 7px is the blur (gaussian) and the hexadecimal number is of course the color of the shadow. This will place the shadow to the bottom right of your object. Negative values for the horizontal and vertical offsets will place the shadow to the upper left of the object.

Easy-peasy.

Use “wp_get_posts” to List Post Titles in Sidebar

written by: jason 2 Comments
Use “wp_get_posts” to List Post Titles in Sidebar

I love WordPress. It will do just about anything that you can imagine. And no, it’s not just a blogging platform. It may have started out that way, but now it’s grown into a full fledged Content Management System (CMS). As a matter of fact, I’m using it here on this website. The cool thing about WP, is once you get the hang of “the loop”, it’s really quite easy for a developer to figure out how to bend it to his or her own will. I am by no means a WP expert, nor do I claim to be. I’ve figured out enough to be dangerous get by and I’m learning new “tricks” everyday. And that, I think is the key. I haven’t hit the wall yet on learning. It’s intuitive enough that you don’t have to be an expert to get started and before you know it, you’ve taught yourself some pretty cool techniques and in the process, you’ve become a WordPress jedi without even trying!

Alllllrighty then, on with the lesson. I’m making a huge assumption that you are at least a bit familiar with WordPress and have a working site up and running either on the web or locally. If not, at least visit WordPress.org and take a look. My plan today is to show you how to display the most current “Post” on a “Page” and have the next three Post Titles (in two different categories) show up in the sidebar. This happens dynamically and adjusts itself every time you create a new post.

First, you’ll need to log into your admin screen and you should be looking at the dashboard. Under “Pages” on the left hand side, create a new Page and leave the contents of that page empty. My page is titled “tutorials”. Next you’ll want to create a couple categories. So under the heading of “Posts” (which is right above “Pages”), click on the word “Categories”. If you don’t see it, hover your mouse over the “Posts” heading and a small triangle will appear to the right. Click that and the box will expand revealing “Categories”. You should now be on the “Categories” page of the WordPress dashboard. If you have not previously created a category, the default “uncategorized” category is automatically created for you. For practical purposes, we’re going to use “html/css” and “wordpress” as our category titles. Where is says “add new category” fill in the name input and click the “add new category” button. Do this for each new category. Now you should see “html/css” and “wordpress” listed along with the “uncategorized” categories.

Now we’re all set. For this to work, you will need to have at least seven published posts. Three should be under the category of “html/css” and three should be under the category of “wordpress”. The final one can be categorized under either. Why do you need seven published posts? Because we want three titles to show up in the sidebar for EACH category. That makes six. And the seventh post will show up in it’s entirety as a post in the main content area. Does that make sense?

Phew, that’s finally out of the way. So let’s hook this thing up! Back at the dashboard, locate “Settings” and find the word “Reading” and click on it. When “reading settings” page loads, change the “Blog pages show at most” setting to one. This ensures that only one post will show at a time. This can be changed later on if you want more than one blog post to show up at a time AND you have more than seven posts.

Back at the dashboard, open “appearance” and click on “editor”. The “edit themes” page will load and in my case, my .css file is open. Make sure you are in your theme (check the pull down menu to the right) and open the sidebar.php file. You’re going to have to poke around a little bit if you’re not using your own hand-coded theme, and find something that looks like this:

  1. <?php wp_get_archives( 'type=monthly' ); ?>
<?php wp_get_archives( 'type=monthly' ); ?>

This bit of code is telling WordPress to look for all of your posts and arrange them chronologically in an unordered list by the month. We want a total of three titles from our categories. So this needs to be replaced. I hear you saying “but Jason, you said we didn’t need to be a WordPress expert!”. I hear you. And you’re right. So how do you know what to replace that bit of code with? My answer is simple. Visit Template Tags/get posts! We’re going to copy and paste what we want and hardly change anything. I’m telling you, you can find just about everything on the WordPress site. As luck would have it, the very first example is exactly what we are looking for. So get ready, we’re gonna do a little cuttin’ & pastin’. Copy this code:

  1. <?php
  2.  global $post;
  3.  $myposts = get_posts('numberposts=5&offset=1&category=1');
  4.  foreach($myposts as $post) :
  5.    setup_postdata($post);
  6.  ?>
  7.     <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  8.  <?php endforeach; ?>
<?php
 global $post;
 $myposts = get_posts('numberposts=5&offset=1&category=1');
 foreach($myposts as $post) :
   setup_postdata($post);
 ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>

And paste it where that other bit of code was, keeping the ul tags.

  1. <ul></ul>
<ul></ul>

Let’s take a look at what is going on here. To be honest, I have no idea. Well, I kinda have an idea. What I’m focusing on is that third line that says $myposts = get_posts . . . Just from being able to read English, I can decipher that I’m going to have to change the numbers in the ‘numberposts’, and category’ area. Right now it says it’s going to show five posts, in category 1. The offset number is correct. If set to one, it will skip the first (or most current) post. If it was set to zero, it would list the most current title but then we would be repeating because the most current post will be displayed in the main content area AND sidbar. We’ll change the ‘numberposts=’ to three and ‘category=’ to 9 in my case. To find your category number you’ll have to navigate back to the “categories” page and where the categories are listed, click on “edit” under the text “html/css” and then in your browser’s address bar you’ll probably have to use your right-arrow key to navigate all the way to the end of that long url. At the very end it will read “ID=somenumber”. That’s the number that is assigned to that category. Finally, you’ll have to copy that bit of code and paste it inside a new set of ul tags and just change the category number to reflect the number of the “wordpress” category. Done!

See it wasn’t THAT scary. With a just a wee-bit of knowledge, we created our own little php snippet that does what WE want it to do. I hope this helps someone and if you have questions, leave a comment.

Line-height Effect

written by: jason
Line-height Effect

I accidentally came across this effect that I use for my sidebar headings. Notice how the text seems to “fall out” of the background. This is achieved not with background images, but css. And it’s pretty simple to accomplish. Here’s what we’re after.

Heading Title

First, you need a little html to call in your css. For this example, I’ll use this:

  1. <h3 class="heading">Heading Title</h3>
<h3 class="heading">Heading Title</h3>

That ought to do it. Now you’ll need to style it in your css with a class of “heading”. Here’s the css that styles it.

  1. .heading {
  2.     color: #fff;
  3.     height: 45px;
  4.     line-height: 135%;
  5.     font-size: 400%;
  6.     text-transform: uppercase;
  7.     background: #000;
  8.     padding: 5px;
  9. }
.heading {
	color: #fff;
	height: 45px;
	line-height: 135%;
	font-size: 400%;
	text-transform: uppercase;
	background: #000;
	padding: 5px;
}

I’m using a class instead of an id because I want to be able to use it on ALL my sidebar headings. And everyone knows that id’s are used only once on a page and class can be used as many times as you’d like.
OK, the main points to remember here are that you have to give the div a height (in our case 45px). That keeps it from expanding when you bump up the line-height. And that brings us to the line-height property. I’m using 135% but you may need to play around with that until you reach the number that best suits your needs depending on the height you gave. That’s it!

If you want to get REALLY fancy, you can add a text-shadow to the css and get something like this:

Heading Title

Add this to the css for the shadow:

  1. text-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;