Archive for the ‘CSS’ Category

Being a showcase for the Flash work of Untold Entertainment, the image slider is used as the main focus of the home page and displays his latest projects. Continuing from the first two tutorials, I’ll now show you how to create this slider with jQuery.

We’ll be treating the slider as a separate element from our Twitter bar before, so no need to use old code here.

With the abundance of jQuery image gallery plugins and scripts it’s safe to say that jQuery makes this sort of thing in particular run a lot more smoothly than with plain JavaScript. This section will be the easiest part of the series.

Let’s dive in. Read More »

Carrying on from the first part of creating a Flash-less home page on Untold Entertainment, we add to the tutorial on animating Twitter text with some more usability and style.

We start off by generating links (to URLs and Twitter pages) inside the text, make a couple of buttons to skip the tweets backwards and forwards, then animate the Twitter bird and speech bubble as a background. Read More »

Ryan Creighton’s Flash development site Untold Entertainment has a quirky home page with plenty of animation and things to click on (complete with roll-out tongue) and of course is built in Flash. Thing is, I’m against any kind of Flash interface. It’s great for games, but otherwise it’s unnecessary (which includes videos).

With the whole Adobe v Apple debate that’s going on right now (yes, I said I wouldn’t mention it but it applies here ‘kay), it’s safe to say you’d be better placing your chips on the JavaScript and HTML5 end of the table.

The discouraging part is that his website could be done without Flash as most of the scrolling and animating could be done with straight JavaScript, and jQuery will help see things along smoothly.

Today I’ll show you how to animate the text at the top, feeding in from his Twitter feed, complete with jerky timings, slanted text and collecting feed data. Read More »

Earlier this week I came across an interesting Tumblr theme by Jarred Bishop. The site played with the background-attachment CSS property to show a unique background for each Tumblr post on his main page (depending on which post image he used) and stays static as you scroll.

I started to play around with some code to replicate this effect and instead came up with some different examples, while still manipulating background-attachment. Hit the jump for some demos. Read More »

Allowing a developer to access a visitor’s browsing history is a huge security risk, that’s why it’s not possible. If you own a website that runs PHP with MySQL and handles sessions then this could be done by tracking IP addresses, user agents and so on to associate a browsing pattern with a particular person. This however can be pretty inaccurate, plus it’s only limited to your own website.

So what are we going to use? Well when you think about it, a user’s browsing history is stored on their computer, client-side. And what else runs client-side that us web developers can make? JavaScript and CSS. These are what we’re going to use. Read More »

Just a quick demonstration today on using JavaScript and CSS techniques to create scrolling backgrounds. Here we layer backgrounds on top of each other and change their horizontal position to move them past the viewing area. It also uses different multipliers to move the closer objects quicker, and create a parallax effect.

Read More »

Today I’ll show you how to put an image beside external links on your site, or any other links for that matter. The effect is similar to the links in the References and External links sections of most Wikipedia pages. Read More »

This time I’ll show you how to create your own drop down menu with XHTML and CSS, but with absolutely no Javascript! It’s all down to the CSS pseudo element :hover, which you have probably already used on anchor (<a>) tags. If you followed my previous tutorials on navigation bars you will definitely be familiar with it. Read More »

Following on from my other two tutorials, this time I’ll show you a simple technique to display background images in your tabs with a simple hover over/out effect without Javascript. Read More »

This time I’ll show you how to make your own vertical navigation bar complete with similar effects as before, and thankfully just about as simple. The final compiled code should produce this page. Read More »