WebCodeBench
PHP, CSS, HTML and other web code stuff

PHP, CSS, HTML and other web code stuff

CSS3 How To: Create Background Colours With Gradient Property

CSS3 How To: Create Background Colours With Gradient Property

The CSS3 gradient ability allows us to automatically create colour-gradient backgrounds for elements in a web page, without having to use image files.

Unfortunately this is not supported by Opera or Internet Explorer. There is a filter that you can use to create linear gradients in IE, but for Opera you will have to resort to a fallback background image.
Continue reading »

Posted in CSS, CSS3 | Leave a comment

CSS3 How To: Use Box-Shadow Property

CSS3 How To Use Box-Shadow Property

The box-shadow property works in a similar way to text-shadow, except you can use it to apply shadows to whole areas, such as images, side panels or feature-boxes. Previously, a web developer would have to resort to using carefully edited background images for drop-shadows, and when it came to putting shadows on resizeable elements such as sidepanels, it could result in a whole lot of extra markup, (such as the use of multiple nested DIV tags), not to mention the extra bandwidth used by the image files. Now we can even cast shadows onto whatever arbitrary background falls beneath drop-down navigation menus, and other dynamic elements, which would previously have been just about impossible.

Continue reading »

Posted in CSS, CSS3 | Leave a comment

CSS3 How To: Use Text-Shadow Property

CSS3 How To: Use Text-Shadow Property

This is a very straightforward CSS3 property with wide browser support… except for IE. It works well when used subtly for header text (ie: not how I’ve done it!)
Continue reading »

Posted in CSS, CSS3 | Leave a comment

CSS3 How To: Use Extended Fonts with @font-face Property

CSS3 How To: Extended Fonts with @Font-Face Property

The @font-face property marks a revolution in web design, and is now supported by all modern browsers – it allows you to choose from a vast range of different typefaces for your website. Before the @font-face property was introduced, there was no simple and safe way to do this. The stark choice was to either stick with a very small set of ‘safe’ fonts that everyone used, or to use images for your exotic typeography, or to resort to various hacks. Now it is easy.
Continue reading »

Posted in CSS, CSS3 | Leave a comment

CSS3 How To: Create Curved Corners with Border-Radius Property

CSS3 How To: Curved Corners with Border-Radius Property

border-radius is one of the most useful CSS3 properties, though also one of the most easily over-used (um… guilty as charged!). It is particularly convenient for adding simple curved corners to coloured panels, navigation menus, and buttons. In many situations it can be used to replace background box or button images (that in the past were the most common solution to a lot of design problems), and therefore reduce the download-weight of your page.
Continue reading »

Posted in CSS, CSS3 | Leave a comment

How To Create a Basic HTML Framework That You Can Use Anywhere

Basic HTML Structure

As a web programmer (like any other programmer), it is important to get the basics right, to build up a toolkit of robust, re-usable code. In these days of templates, frameworks, and object-oriented use of CSS classes, there is plenty of technology at your disposal, and it would be silly not to take advantage of it and have to re-invent lots of wheels every time. However, let’s not jump the gun! We start right at the very beginning, with the core HTML that is the foundation of any website, regardless of platform.
Continue reading »

Posted in HTML | Leave a comment
  • Hello

    My name is Vin. I'm a coder who is interested in discovering the best ways to do things on the web. With a little bit of thought, we can do lots of interesting things, and it often isn't nearly as hard as one might think.

    This site is my chance to share with you what I've learned.