Web Development Articles

Image Automatically Resize to the Browser

One of the trends today is responsive web design which optimizes the viewing experience across a wider range of devices from various sizes of montior to the new mobile devices. Using percentage on your block elements is one of many techniques used for a fuild web site. Another is to have you image resize proportionally to the width of the browser width. This is especially true when viewing on a mobile device. If you set fixed width, you web page unreadable on these devices. Also your image will not fit within the viewport size of 320px or 480 pixels.

The following code works in firefox, chrome and safari, but IE8 has a problem. In IE8 the width must be set to auto.

Source:Nich La of websesignwall.com

CSS
div.blog .article img {
  height: auto;
  width:100%;  /* size fo the image */
  width: auto\9; /* ie8 */
}
Test on this image:

Important: Percentage is relative to the parent container, so in this example the image is set to 50%.

ka-Boom Text

Don't Kill Open Source

Image of Linux Santa

CSS3 Gradients

CSS3 gradients replaces the old image slice technique used CSS2. The image slice is often achieved with very narrow gradient image that is rendered in Photoshop. In order to optimize the speed of loading a web page, a Gif image slice is creating with only a 1 pixel width or height depending if you are creating a horizontal or vertical gradient. This image is then referenced in CSS background image property using "repeat-x" or "repeat-y" which will simulate the ability to "stretch" the image to the edge of the browser's window.

The problem with this is that is can only scretch in one direction. If you create a horizontal slice is has a fixed width and therefore will no change. You would have to go back to photoshop to create a wider slice. Also the small slice image can appear pixelated when they are repeated down or across the page. You can sometime see the line. Also the quality of the gradient is poor especially when you need transparency against a non-whilte background color.

GradientImage Slice

sample of gradient image slice.

CSS3 gradients resolve all these problems. CSS gradient was first propsed by the WebKit team in April 2008. Afterwards, Mozilla announced its own modifed version of the WebKit version. W3C's CSS Working Group proposed its own revisions.

Radial Gradient Button

I used Filezilla's Ultimate CSS Gradient Generator to create this radial gradient button including the button rim. To create the hover version you simply adjust the hue/saturation. In the preview box, change the orientation to radial. Make sure to check the IE button. This will create a SVG (Scalable Vector Graphic) to use as a fallback for Internet Explorer 9.

website:Ultimate CSS Gradient Generator

Gradient Generator dialog box.

CSS

This generator will generate all of the proprietary prefixes for firefox and webkit as well as SVG image fallback for IE9. Here is the sample output CSS for the W3C standard:

background: radial-gradient(
   center,
   ellipse cover,
   rgba(206,12,12,1) 0%,
   rgba(255,206,165,1) 55%,
   rgba(214,27,27,1) 60%,rgba(28,14,14,1) 61%,
   rgba(198,198,198,1) 65%,rgba(198,198,198,1) 75%,
   rgba(51,51,51,1) 91%);  /* W3C */

Creating Multicolored Borders

I ran into problems with the moz prefix multicolored CSS border properties that is proprietary to Firefox. And in playing around with them, I found that they do not work very well. The inner border seem to be much wider that the outer border so do not have control over the width of each border.

I found this website: http://www.sitepoint.com/css3-multiple-borders/
Accordding to this site, a better solution is to use CSS2.1 box-shadow properties.

Instead of using the proprietary -moz-border, it uses the box-shadow property. This technique uses the spread attribute which gives you an even border around your block element because you set the x and y offset to 0. And you can control the width of each color. It is also cross-browser compatible (IE9, chrome, firefox and safari)

This is the CSS to create a red, white and blue 2 px border:

Image of Multi Color Border
 -webkit-box-shadow:
    0 0 0 3px #f00,  
    0 0 0 5px #fff,
    0 0 0 7px #00f;

  box-shadow:
    0 0 0 3px #f00,  
    0 0 0 5px #fff,
    0 0 0 7px #00f;
  





Log

  • 12/06/2012 - Fluid Image
  • 11/29/2012 - Radial Gradient
  • 11/21/2012 - Multi-color border
  • 10/16/2012 - CSS3 column with IE Fallback
  • 10/01/2012 - Responsive Design
  • 7/01/2012 - CSS Frames