May 22, 2013

CSS3 – nth-child Pseudo Class

CSS 3Have you ever wondered how to make this nice striped table rows or highlight parts of an bullet list? The pseudo class nth-child makes it easy. But it does require a modern browser for visitors to your site to see it.

In this video tutorial we take a look at this lesser known and used part of CSS3.

Browser Compatibility Link 

Please Login or Register with SupportCasts to view the rest of this content.

Vertical Menu w/Single Image

vertical menu image spriteThis video tutorial focuses on making a vertical menu you can place on a website anywhere you need it and it only uses one image to create the nice hover and active state effects.

 

Show Notes Download documents

Show Notes

Please Login or Register with SupportCasts to view the rest of this content.

CSS3 Pseudo Class :nth-of-type

The first in our series of short video tutorials on :nth pseudo classes. In the cast we show you how to float images on a page, alternating even and odd images to float left and right.

This set of pseudo classes only work in the latest browsers versions of Safart, Firefox, Opera, Google Chrome and IE9.

They won’t work in IE6, IE7 or IE8.

Please Login or Register with SupportCasts to view the rest of this content.

RapidButtons! – Online CSS3 Button Creation Tool

RapidButtonsGary Byrd over at RapidWeaverThemes has posted up a new website called RapidButtons.

I prefer to think of it as “buttons in a snap” for all your design needs. So join me in this short cast as I preview Gary’s new site.

CSS3 & jQuery for Great Looking Rounded Corners on Images

jquery LogoUsing CSS3 to round corners on images varies in quality and it doesn’t work in all browsers. Add in a little help from jQuery and you get good looking corners and even shadows. In this video tutorial you will see now to do this easily.

CSS3 & jQuery for Rounded Image Corners

Show Notes

Please Login or Register with SupportCasts to view the rest of this content.

CSS3 – Pure Horizontal Accordion

A very nice horizontal accordion with no jquery, mootools or other scripts. Compatible with all modern browsers.

In this video tutorial we will show you have to make adjustments to colors and the size of the accordion to suit your site.

Link to Developers Site – Click Here

You can get all the CSS and the unordered list at the link above.

Please Login or Register with SupportCasts to view the rest of this content.

RW078 Back to Top #3-Add a Smooth Scroll Effect-CSS Tip

Now that you’ve added a “back to top” anchor link on your page, let’s make the trip a pleasurable one.
Learn how you can add a smooth scrolling effect to your anchor link(s) using a couple of easy to implement Javascripts.
Please Login or Register with SupportCasts to view the rest of this content.

RW077 Back to Top #2- Adding an HTML Paragraph Tag – CSS Tip

In this second cast on the Back to Top link we will see how adding an HTML “p” tag can help us better style the way our link looks.
You can grab the code I used in the cast and/or follow along to see how this is done.
I’ve also thrown in some CSS 3 to add a bit more style to the overall effect.
Enjoy the show and the code we have put together for you.

Please Login or Register with SupportCasts to view the rest of this content.

RW065 – Awesome Buttons

Awesome Buttons…

Here’s a short screencast on how you can use some scalable buttons in your RapidWeaver web project with some CSS3 coding. These buttons come in three sizes – small, medium and large – and the only image that’s required is an overlay image. even though we do use RapidWeaver the same tricks can be applied to any other web development tool that you may use ;)
Okay lets get on with the show :)
Please Login or Register with SupportCasts to view the rest of this content.

CSS007 – Font-Face – Public Cast

cssA look @font-face. How it works to make available fonts to the viewers browser that are not “web safe”.

This works well but is not a simple, one set of css for all browsers. We cover not only the css to make this work but some issues for the future.

In one part I try to target the Title of the site in the theme. I use #pageHeader and it should have been #title. Kept the “wart” in the cast.

Show Notes

Show Notes

RW063 – LetterPress CSS3

Letterpress Technique in RapidWeaver

Letterpress is an industrial print that made its way into web design using images to accomplish the same effect.

Now with CSS3 we no longer need the images…Yay. Enjoy the show.
Please Login or Register with SupportCasts to view the rest of this content.

RW060 – CSS3 Polaroid Gallery effect

Welcome back to another of our warehousing and images series for RapidWeaver.

Here’s a great way to display your images with that nostalgic look of a Polariod image. These polariods have a bit of a twist by incorporating some CSS3 into the layout for some added spice.

Download the Show Notes and follow along as we get things started…

Please Login or Register with SupportCasts to view the rest of this content.

CSS003 – CSS3 – Columns The Easy Way

Creating multiple columns is easy using CSS3. Find out by watching this SupportCast overview and example of creating nice layout using this upcoming CSS Standard.

Currently (as of this posting) only Safari 4, Firefox 3.5 and Opera 10 support this. If you write IE specific style sheets and force IE to use them, then you might be able to use some of these new columns in a site for the supported browsers.

Please Login or Register with SupportCasts to view the rest of this content.