Image via CrunchBase
Flash appearing behind elements is a common problem with a relatively simple fix — simply add wmode=transparent to the object tag and your Flash movie will behave nicely with the CSS z-index property.
But what happens when you embed a YouTube video?
YouTube’s relatively new embedding code utilizes iFrames — this means that we can’t simply add the wmode tag to the flash object. Here is a little trick to make YouTube include videos that respect z-indexing.
Here is our regular embed code.
<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI" frameborder="0" allowfullscreen>
We can simply add ?wmode=transparent to the end of YouTube URL. This will tell YouTube to include the video with the wmode set. So you new embed code will look like this;
<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>
Like this:
Be the first to like this post.
Gradients have been used in web design for years now. Ever since I started experimenting with FrontPage way back in 2005, adding a gradient to an element gave it a very suave look. They have come along way since then and there are heaps of different tricks you can employ to give your elements that nice polished 3d effect.
With CSS3 comes a new way to implement the gradient — it provides for a scalable way to add your gradients instead of being restricted to that 24px high image you used to use.
Read more…
Like this:
Be the first to like this post.
Image via Wikipedia
jQuery has to be my favourite Javascript framework. I use it quite in almost all of my projects, the more I use it the more I learn. I recently wanted to mix up a product display page, instead of having additional product images display in a lightbox, I thought it would be a nice touch to fade out the current product image and display a new image.
I’ll go through the steps I used to edit the Virtuemart default template to do this, I’m sure you can adapt it to work in any situation it is pretty simple.
Read more…
Like this:
Be the first to like this post.
Have you ever had content that you just wish you could split into columns? Columns have always been a difficult and messy thing to get right in html — typically you would have to have extra divs or use a table to layout your content. This can become very troublesome, especially because — in most cases — your website will be maintained by someone who isn’t technically inclined. There has to be a better way!
Read more…
Like this:
Be the first to like this post.
Rounded corners have been a rather difficult thing to implement — well until the release of CSS3 — it required us to use images in weird and wonderful ways. Personally now I usually use the CSS3 border-radius property to achieve rounded borders making sure to include the vendor prefixes (-webkit, -moz, -o etc.) to make sure that there is maximum compatibility with my design, and when the browser doesn’t support the border radius property at all it falls back to square edges — graceful degradation, but that’s another story.
In this post I’ll go through some of the ways that I have learned for implementing rounded corners. I’m sure there are other ways of doing it, if you have any other methods I’d love to hear them.
Read more…
Like this:
Be the first to like this post.
