Cardeo » CSS http://www.cardeo.ca Ramblings on web design and social media Wed, 26 Oct 2011 17:58:45 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 AnonAnon CSS Framework http://www.cardeo.ca/2011/anonanon-css-framework http://www.cardeo.ca/2011/anonanon-css-framework#comments Sat, 16 Jul 2011 05:35:45 +0000 admin http://www.cardeo.ca/?p=4063

A responsive CSS framework on a baseline grid

Wow! It’s been too long since I’ve published a post. Sorry guys, but I’ve been working on a few new projects. The first of them is the AnonAnon CSS Framework. Does the world need another CSS framework? Probably not, but mine has a few cool features that you won’t find elsewhere. Here’s a list:

  • Minimal design and lightweight code
  • Responsive for mobile
  • Built on a baseline typographic grid
  • Includes jQuery UI elements
  • 10 column, fluid grid

To learn more or download, please head over to anonanon.org.

]]> http://www.cardeo.ca/2011/anonanon-css-framework/feed 0 Zebra-striping rows and columns http://www.cardeo.ca/2010/zebra-striping-rows-and-columns http://www.cardeo.ca/2010/zebra-striping-rows-and-columns#comments Sat, 16 Oct 2010 21:19:33 +0000 admin http://www.cardeo.ca/?p=3750 If you’re looking for a no nonsense technique for applying zebra-striping to a table using pure CSS, you should check out this post from csswizardry.com.

In the past, you would’ve had to use javascript or another scripting technique to achieve this formatting. However, this method allows for pure CSS3 code to get the zebra-striping to work. The one small downside is the fact that it is only supported by CSS3 browsers.

Work around for older browsers

This method is a little code heavier, but it will work in all browsers. First things first, we need to create some styles for the alternate table rows. Check out the example:

tr.alt {
 background: color: #ccc;
}

Code Canyon

Here’s where the code heavy portion of the technique comes into play. You need to insert the alt class on every even <tr> tag in your table, as shown below:

<table>
 <tr>
  <td>a row</td>
 </tr>
 <tr class="alt">
  <td>another row</td>
 </tr>
 <tr>
  <td>a third row</td>
 </tr>
 <tr class="alt">
  <td>a fourth row</td>
 </tr>
</table>

That’s it, that’s all, you can view a demo here. If you want the lighter CSS3 version, check it out at: csswizadry.com.

]]> http://www.cardeo.ca/2010/zebra-striping-rows-and-columns/feed 0 Styling a Custom Facebook Tab http://www.cardeo.ca/2010/styling-a-custom-facebook-tab http://www.cardeo.ca/2010/styling-a-custom-facebook-tab#comments Wed, 15 Sep 2010 07:04:14 +0000 admin http://www.cardeo.ca/?p=3536 Up until now, I was under the impression that you had to do all your styling inline when building a custom Facebook tab. Rejoice! Today I discovered there is another way to do the styling which is way less annoying.

Use the <style> Tag

To avoid using inline styles, you can insert a <style></style> at the top of your document. See below for an example:

Here’s what the code looks like

<style>
#mybox {
 background-color:#000;
 width:200px;
 height:200px;
}
</style>

<div id="mybox">This is my box</div>

Note how the <style> tag is not wrapped in a <head> tag. Also the code for your tab is not wrapped in a <body> tag. This is intentional, you need to leave those tags out for this to work. A little unorthodox but it gets the job done. Better yet, you don’t have to use those pesky inline styles!

]]> http://www.cardeo.ca/2010/styling-a-custom-facebook-tab/feed 1 Envato Birthday Bundle: Over $400 in Envato Files for $20! http://www.cardeo.ca/2010/envato-birthday-bundle-400-in-envato-files-for-20 http://www.cardeo.ca/2010/envato-birthday-bundle-400-in-envato-files-for-20#comments Thu, 19 Aug 2010 18:15:06 +0000 admin http://www.cardeo.ca/?p=3412 If you like a good deal, then I have a doozie for you. The good people over at Envato are celebrating their 4th birthday, by offering an Envato Birthday Bundle of files from all of their stock websites. You get over $400 worth of files for only $20!. Now that is a pretty sweet deal. There’s only once catch, the offer is only good until Tuesday August 24th. Make sure you head over there now and download the bundle.

$400 in files for only $20! | Buy Now

What’s Included?

Here’s a list of everything included in the bundle:

ThemeForest.net Files
WordPress Themes, Website Templates, Photoshop Templates

CodeCanyon.net Files
Javascript, PHP, Plugins, .NET, CSS

GraphicRiver.net Files
Graphics, Templates, Textures, Backgrounds, Vectors, Icons, Fonts

$400 in files for only $20! | Buy Now

VideoHive.Net Files
Video Project Files, Motion Graphics, Stock Footage

3DOcean.net Files
3D Models, Textures, 2D Concepts

ActiveDen.net Files
Flash Files

AudioJungle.net Files
Music & Sound Files

Net.Tutplus.com
Premium Tutorials

Extras

On top of all those files, there are a couple additional extras thrown in:

$400 in files for only $20! | Buy Now

]]> http://www.cardeo.ca/2010/envato-birthday-bundle-400-in-envato-files-for-20/feed 0 Best Practices For Positioning Icons With CSS http://www.cardeo.ca/2010/best-practices-for-positioning-icons-with-css http://www.cardeo.ca/2010/best-practices-for-positioning-icons-with-css#comments Fri, 06 Aug 2010 07:05:58 +0000 admin http://www.cardeo.ca/?p=3329 In my opinion, icons are one of the small details that help polish an excellent website. However, it can be all-for-not if they aren’t positioned properly in your layout. In this post, I’m going to outline a few best practices for positioning your icons using CSS.

Download The Source Files

Small Icon With Body Copy

This is one of the most commonly messed up use of icons you’ll see out there. The web designer will simply insert the icon image code right before the text. I’d highly recommend against using this technique. Here’s an example of it:

<img src="icon.gif" />My text here

Why does this suck? Because you have no control over the positioning of the icon. A better practice would be to wrap the the text in a <span> tag and set the icon as the background image. Also, this technique works the best when the height of the icon matches the height of the text. Therefore, go with a 16px x 16px icon. We can adjust the vertical positioning of the background image/icon if need be. Here’s what the code looks like:

CSS

.icon {
 background: url(icon.png) 0 0 no-repeat;
 display: block;
 height: 16px;
 line-height: 16px;
 padding-left: 20px;
 margin-right: 10px;
}

HTML

<span class="icon">Icon text goes here</span>

Here’s What It Should Look Like

The Code Explained

  • We set the background property to our icon image.
  • The position is set 0 0, you shouldn’t have to tweak this, as long as your icon height matches your text height.
  • We display it as a block so the whole icon is shown.
  • The height is set to the height of our icon.
  • line-height forces the text to align vertically with the icon.
  • We pad the class left 20px to leave space for the icon.
  • Then we add a margin of 10px right to create some space between the icon and the icon text.

That’s it, now your icon will always appear vertically centered to your text. As well, it will have the same spacing between the icon and the icon text.

You can easily apply this same technique to larger icons that are combined with larger icon text. Simply tweak the height, line-height, padding, and margin to match your new icon and text sizes.

Large Icon With Body Copy

Using a larger sized icon with body copy is quite similar to the above technique. We simply need to tweak some of our property values to work with the bigger icon. Let’s assume the size our larger icon is 48px x 48px. Here’s what the code looks like:

CSS

.icon-big {
 background: url(icon-big.png) 0 0 no-repeat;
 display: block;
 height: 48px;
 line-height: 48px;
 padding-left: 50px;
 margin-right: 10px;
}

HTML

<span class="big-icon">Icon text goes here</span>

Here’s What It Looks Like

The Code Explained

  • We’ve increased the height of the class to be 48px, so it matches the height of our larger icon.
  • We’ve also added a line-height of 48px. This will force the our text to center vertically in the layout.
  • I’ve also increased our padding-left to 50px to leave enough room for the width of the new icon.

It’s that easy. But what about links? Read on for an explanation of making the icon and text work as a link.

Code Canyon

Adding A Link

There are two ways we can do this. The first would be making the copy a link and leaving the icon an image. The second way would be to make the icon and copy all part of the link. It’s actually quite easy, it simply depends on where you place your link tag. See below for the two examples:

Only The Copy Is A Link

<span class="icon"><a href="#">link copy here</a></span>

The Icon and Copy Are Both A Part Of The Same Link

<a href="#"><span class="icon">link copy here</span></a>

That’s it, that’s all. This is a fairly simple technique, but it gives you way better control of the positioning of your icons. If you have any questions, please leave a comment.

View The Demo

Download The Source Files

]]> http://www.cardeo.ca/2010/best-practices-for-positioning-icons-with-css/feed 4 Photoshop To HTML http://www.cardeo.ca/2010/photoshop-to-html http://www.cardeo.ca/2010/photoshop-to-html#comments Thu, 22 Apr 2010 16:56:06 +0000 admin http://www.cardeo.ca/?p=2934 Are you familar with rockablepress.com? They’re a book company, from the good people at envato.com, specializing in Web Design books. They just released their latest book titled Photoshop to HTML, which is a guide to taking your website designs from Photoshop to HTML.

Photoshop to HTML

What’s Covered

  • Different methods for slicing a PSD.
  • Create semantic mark-up, and learn how this HTML relates to the original PSD.
  • How to utilize techniques, such as background replacement and sprite generation.
  • Use custom fonts with Cufon font replacement.
  • The differences between absolute and relative positioning.
  • How to compensate for the dreaded Internet Explorer 6.
  • Take advantage of advanced CSS3 features.
  • How to take advantage of a variety of helpful browser extensions to expedite your coding.
  • Utilize the jQuery library to add a touch of interactivity.

Source Files Included

The book comes in at $29 and also includes all the source HTML, PSD, and CSS files. As well as, 4 hours of walkthrough videos.

Get A Free Book & Save Some Money

I just noticed that if you sign up for the Rockable Press Mailing List, they’re offering a free download of their Rockstar Personal Branding eBook. Not to mention, signing up will get you access to discount codes for future book releases. I received an email this morning with a discount for this book. That’s what gave me the idea to write this post. Anyhow, this is a great resource, at a great price. Make sure you check it out.

]]> http://www.cardeo.ca/2010/photoshop-to-html/feed 0 Coding an animated news ticker with jquery and CSS http://www.cardeo.ca/2010/coding-an-animated-news-ticker-with-jquery-and-css http://www.cardeo.ca/2010/coding-an-animated-news-ticker-with-jquery-and-css#comments Wed, 20 Jan 2010 21:35:33 +0000 admin http://www.cardeo.ca/?p=2331 Alright, about time that I’m back with a new post! For this tutorial, I’m going to breakdown creating an animated news ticker using a little jquery and CSS. The tutorial is based on a jquery plugin developed by textotela.co.uk, and I recently built it into the homepage of recork.org. If you head over to textotela.co.uk, you’ll notice there are some instructions on installing this plugin. The problem is (being a beginner at jquery), I had a hard time filling in all the blanks that are not described on his website. Therefore, I thought I would break it down for beginners to make it easier to understand and install.

View Demo

What you’ll need

Download the jquery source files from github.com. Once you’ve downloaded the javascript file (jquery.newsticker.pack.js), upload it to your server. For the purposes of this demo, let’s just upload the file to your root folder and keep everyting in the same directory. Also, if you don’t have jquery on your server, you’ll need to download it from jquery.com. Once you download the file, rename it it jquery.js and place it in your root directory.

Setting up the HTML

Once you’ve uploaded your files, let’s create a new HTML file called index.html. Inside that file, paste the following code into the <head> of your file:

<html>
<head>
 <title>ticker</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.newsticker.pack.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {
      $("#news").newsticker();
    });
  </script>
</head>

Now head down to the <body> of your file and insert the following code:

<body>
<div id="ticker">
<ul id="news">
 <li>News item 1</li>
 <li class="loud">News item 2</li>
 <li>News item 3</li>
</ul>
</div>
</body>
</html>

HTML explained

These are the main points to keep in mind with the HTML:

  • The wrapping <div id="ticker"> can be used if you’d like to give your ticker a background, margin, dimensions. The ticker will still work without this <div>, but you’ll most likely want to leave it in for layout reasons.
  • Each <li></li> refers to one news item. Within the <li></li> you can add text, links, etc… They’ll appear in the order you enter them, and you can have as many as you like. The one I setup for recork.org uses 23 different lines.
  • Once the last item on the list is displayed, it will loop around and start over with the first item.

Adding the CSS

There are a number of ways you can choose to style your ticker. I’ve setup a few basic layout styles here, but please feel free to play around with it. I’m going to keep it simple and do all my backgrounds with css. You might want to try using an image for a background, or perhaps add an icon to the left of your ticker. Also, make sure you paste this code into the <head> of ticker.html, after the javascript links. 

<style type="text/css">
#ticker {
 background-color: #ebebeb;
 border: 1px solid #ccc;
 padding: 20px;
}

ul#news {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul#news li {
 margin: 0;
}

ul#news li.loud {
 font-weight: bold;
}
</style>

CSS explained

I’ve tried to keep the CSS here pretty simple. Here’s a few notes on what I’ve got going on:

  • #ticker is the wrapper for the ticker which has a grey background, grey border and is padded 20 pixels.
  • ul#news is the unordered list for the ticker. You’ll want to leave those styles as they are, so there is no unwanted margin or bullet points. If you want bullet points, simply change up the list-style: selector to a different value.
  • ul#news li are the styles for each individual bullet point. You might want to add some color, or other font styles here.
  • ul#news li.loud is a class I setup for news items that you want to stand out more. Adding the class loud to your <li> will currently make that item bold.

Summary

Once you have all your code setup in index.html, upload the file to your root directory. At this point, it would also be a good idea to move the CSS to your external stylesheet. I wanted to keep this tutorial straight forward, for beginners, so I left everything in one HTML file. That’s it. I’ve shown you how to put together an animated news ticker with a little bit of jquery and CSS. If you have any questions about customizing the ticker further, please feel free to leave them in the comments. Once again, I’d like to thank textotela.co.uk for designing a great plugin. The source files for this tutorial are available from the link below.

Download Source Files

]]> http://www.cardeo.ca/2010/coding-an-animated-news-ticker-with-jquery-and-css/feed 14 O’Reilly books now available in the Apple App Store http://www.cardeo.ca/2009/oreilly-book-now-available-in-the-apple-app-store http://www.cardeo.ca/2009/oreilly-book-now-available-in-the-apple-app-store#comments Sat, 12 Dec 2009 00:37:50 +0000 admin http://www.cardeo.ca/?p=2287 I was surfing around the App Store the other day, and to my delight I noticed that O’Reilly is now offering a number of their titles as iPhone/iPod Apps! I’ve been a fan of their books for a little while now (currently I’m reading Twitter API Up and Running), so I was happy to see they had made the jump to the App Store.

Digital vs. Paper

Now don’t get me wrong, I like a good hardcopy of a book as well as the next guy. However, for the price tag of $5.99, you can’t go wrong with picking up the iPod version! If the book turns out to be excellent, then go pick up the hardcopy. If not, you’ve saved yourself a little bit of cash then can be better spent on something like beer.

What should I read?

For my first O’Reilly App, I decided to go with Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa. I’ve made it through the first few chapters and so far so good. Once I finish it off, I’ll be sure to post a review here on the blog. In the meantime, I’d encourage you to check out O’Reilly’s offerings in the App Store.

]]> http://www.cardeo.ca/2009/oreilly-book-now-available-in-the-apple-app-store/feed 0 The web design process: part 2 http://www.cardeo.ca/2009/the-web-design-process-part-2 http://www.cardeo.ca/2009/the-web-design-process-part-2#comments Thu, 11 Jun 2009 08:51:49 +0000 admin http://cardeo.ca/?p=1727 Time for part 2 of 4 in the web design process series. Today I’m going to cover Photoshop comps, reviewing your goals, and coded comps. Check out the overview below to see all the main steps in the design process.

Make sure you check out part 1 in the web design process series.

Overview

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Photoshop Comps

Alright, time to dive into Photoshop and polish up your hand-drawn comp. Before we get to far, I would highly recommend using a grid and/or a CSS framework. I currently use the Blueprint CSS framework, which is a free download. I’ve also put together a photoshop grid template that will work with blueprint, which you can download here.

At this point I’m not going to get into tons of design recommendations. This post is about the process not the design. Once you have created your Photoshop comp, it’s time to review the comp before you do any coding.

Review comps to ensure the end goal has been met

Once you have finished your comp, let’s run through a little checklist to make sure you are on the right path:

» Did you achieve all the end goals you set up in part 1?
» Is your navigation clear and easy to locate?
» Is your sitemap and hierarchy in tact?

If your answer to any of these is no, you need to go back to the drawing board and create a new comp. Once again, don’t go with the first comp you come up with. Try a few different ideas until you get to the best concept. If your comps are looking good and meeting all your goals, it’s time to start some coding.

Coded comps (alpha)

For me the coded comps, or alpha, phase includes the cutting up of your photoshop file, and your CSS and HTML coding. Make sure you start with your HTML file, ensuring your hierarchy is setup properly. Next move onto your CSS stylesheet. I don’t add any dynamic content at this point, like javascript. My preference is to get the frame of the pages up and running, test them, then to start adding the stuff like javascript, back-end tie-ins, etc…

If you have any dynamic content to add, I usually just leave an area (perhaps a box) in the coded layout with a reference to what is supposed to go there. Many times you might be working with a developer for the back-end stuff, so leaving notes in your layout and in the code are a good way to keep the process moving smoothly. Once you have finished off doing all your HTML and CSS coding, it’s time to move onto the dynamic content integration.

This is where we stop for today. I hope everyone is finding this series useful so far. Check back tomorrow for part 3 in the web design process.

]]> http://www.cardeo.ca/2009/the-web-design-process-part-2/feed 1 CSS tips round-up http://www.cardeo.ca/2009/css-tips-round-up http://www.cardeo.ca/2009/css-tips-round-up#comments Mon, 23 Mar 2009 17:24:47 +0000 admin http://cardeo.ca/?p=1483 Below is a list of CSS tips I’ve picked up over the past couple days. Most of them are from one of my favorite web design blogs: cssglobe.com. Here you go:

» 16 easy CSS techniques that simplify the web designers life

» 8 premium, one-line CSS tips

» 28 fantastic generators for easier web design

]]> http://www.cardeo.ca/2009/css-tips-round-up/feed 0