May 19, 2013

Pure CSS Bullet List Triangles

A nice clean way to have a different looking bullet list with triangles made without an image.

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

Pure CSS Image Preload

Save load time and keep visitors from waiting for their image on hover.

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

CSS Basics

It has been a long time since we visited this subject. I thought I would post this as a good foundation for those who are new here or for anyone who might feel they are not quite clear on the basics of CSS.

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.

CSS Spans vs Divs

CSSIf you have ever wondered about the difference and how to use them this is the video tutorial for you.

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

Free Video: Scaling Background Image Using jQuery

jquery LogoGetting a background image to scale to 100% of the viewer’s browser window width and height is tricky. Pure CSS or even CSS3 do a good job in many browser but fail in IE6, IE7 and even IE8. Opera and others fail depending on how you do it with CSS.

jQuery steps up to the plate and solves it. Well, almost. Just one little niggle. If you can live with it then this is the solution for you in all browser except IE6.

Original Files and Website

CSS3 & jQuery for Rounded Image Corners

Show Notes

Show Notes

http://mediacloud.supportcasts.com/apple_tv/jquery/full-bg-jquery.wo.m4v


CSS010 – Custom Stylesheet

Have you ever wanted to take all the custom css and consolidate it? In this video tutorial we show you have to take all the css common to all pages of the Rapidweaver web site and place it in an external stylesheet. One change to that sheet will effect all pages of the site you specify.

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.

Slide Out Navigation with jQuery

This is a beautiful navigation script from Codrops that sits nicely on the left, or top, of you RapidWeaver project.

In this video tutorial you will learn how to get all the elements in place. I’ll also show you that you can use both styles on one Rapidweaver page.

Grab the downloads and lets get started…

Don’t forget to grab the icon sets from DryIcons.

Those links are on the Codrop tutorial page below.
Codrops Website

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

cssDiv Stack Free Show

Now you have a choice. Do you need a “div id” or do you need a “div class”? This free stack gives you that freedom.
So take a few minutes to find out how this stack can work for you.
Download -Download cssDiv.stack.zip

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.

RW076 Back to Top – CSS Tip

Do you want a simple and stylish anchor link that takes your end user back to the top of your page? No matter how far down that page they scroll?
Then you won’t want to miss this cast.

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

CSS Stack Free Show

stacks

This show has been discontinued but a newer version with a better Stack is HERE