discoverweb.info http://discoverweb.info Tracking development of Web browsers., Sat, 28 Jan 2012 08:37:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Discoverwebhttp://feedburner.google.com CSS drop shadow Examples http://discoverweb.info/css-drop-shadow-examples.html http://discoverweb.info/css-drop-shadow-examples.html#comments Wed, 27 Jul 2011 14:21:53 +0000 admin http://discoverweb.info/?p=1625 Drop shadow css styling allows you to creates a drop shadow effect without using any images

This will works in Firefox 3.5+ , Chrome 5+, IE 9+ , Opera 10.5+ and Safary 5+ browsers.

Here we are going to see Drop shadow Effects Examples

1.How to create basic drop shadow Box

 .drop-shadow-example1
      {
        -webkit-box-shadow:0 1px 10px #666;
        -moz-box-shadow:0 1px 10px #666;
         box-shadow:0 1px 10px #666;
      }
Basic Drop Shadow Example


2.Create drop shadow Box with inset css property

 .drop-shadow-example2
      {
        -webkit-box-shadow:0 1px 10px #666 inset;
        -moz-box-shadow:0 1px 10px #666 inset;
         box-shadow:0 1px 10px #666 inset;
     }

CSS Inset Shadow Example

Drop Shadow with inset css property – This “inset” make the shadow inner side of the box


3.Create double color border using drop shadow method

  .drop-shadow-border
     {
        border:4px solid #438ead;
        -webkit-box-shadow:0 0 0 2px #554b1c inset;
        -moz-box-shadow:0 0 0 2px #554b1c inset;
        box-shadow:0 0 0 2px #554b1c inset;
        }

CSS double color border Example

CSS double color border Example – This “inset” make the in-side border for the box


4.css image shadow and image drop shadow

 .image-shadow
      {
         padding:0.5em;  margin:2em 10px 0em; background:#fff;
        -webkit-box-shadow:0 1px 10px #666;
        -moz-box-shadow:0 1px 10px #666;
         box-shadow:0 1px 10px #666;
      }

 .image-drop-shadow
      {
        -webkit-box-shadow:0 5px 10px #666;
        -moz-box-shadow:0 5px 10px #666;
         box-shadow:0 5px 10px #666;
      }


]]> http://discoverweb.info/css-drop-shadow-examples.html/feed 0 CSS Opacity/transparent Effect http://discoverweb.info/css-opacitytransparent-effect.html http://discoverweb.info/css-opacitytransparent-effect.html#comments Fri, 17 Jun 2011 15:54:43 +0000 admin http://discoverweb.info/?p=1704 Recent version’s of all browsers will support CSS opacity Effect., For lower versions of IE we have to use filter property.

Example for transparent Image css

<style>
.image_transparent{
opacity:0.2;
/* For IE */
filter:alpha(opacity=20);
}
</style>
<body>
<img src="../images/discover_css.gif" class="image_transparent">
<img src="../images/discover_css.gif">
</body>

Also this effect can be applicable for transparent text and Background image transparent

Example for Back ground image transpatent and Text Transparent CSS

<style>
.bgimage_transparent{
background-image:url("../images/discover_css.gif");
opacity:0.2;
/* For IE */
filter:alpha(opacity=20);
width:550px;
height:200px;
display:block;
}
.text_transparent {
opacity:0.4;
/* For IE */
filter:alpha(opacity=40);
}
</style>
<p>Non Transparent Text</p>
<p class="text_transparent">Transparent Text</p>
<p>Transparent Background below</p>
<div class="bgimage_transparent"></div>

Non Transparent Text

Transparent Text

Transparent Background below

]]> http://discoverweb.info/css-opacitytransparent-effect.html/feed 0 Preloading Multiple Images http://discoverweb.info/preloading-multiple-images.html http://discoverweb.info/preloading-multiple-images.html#comments Tue, 14 Jun 2011 15:16:50 +0000 admin http://discoverweb.info/?p=1666 To improve website performance we need to preloaded the images which used in hover and rollover effects

Instead of using jquery or javascript to preload the images, we can do that using CSS.

The following Example show you how to preload all images 

<html>
<title> preloading Images</title>
<style>
.load_images
 {   display : none; }
<body>
<div class="load_images">
/* You can Load Multiple no images like this */
<img src="preloaded_image1.jpg" />
<img src="preloaded_image2.jpg" />
<img src="preloaded_image3.jpg" />
<img src="preloaded_image4.jpg" />
<img src="preloaded_image5.jpg" />
</div>
</body>
</html>

The “load_images” class will load and hide all images., So the roll over images will load smoothly.

]]> http://discoverweb.info/preloading-multiple-images.html/feed 0 CSS Image Preload http://discoverweb.info/css-image-preload.html http://discoverweb.info/css-image-preload.html#comments Wed, 25 May 2011 11:07:13 +0000 admin http://discoverweb.info/?p=1623 What is the need of preload the image ?

Pseudo-selectors like :hover, :focus and :active will become more widely used in website designing. One common problem is the rollover image getting downloads only when that event fire., but all the necessary images must be downloaded already, Otherwise the rollover will behave badly.

So here we are going to discuss two methods to handles rollover image loading

Fast Rollovers Without Preload

In this method we are going to use single background image for both rollover and non-rollover images. which means combine both images in to a single image, and then position using the background position css property (CSS Sprite technique). So instead of changing the image when mouse over the element we simply change the background position to reveal the rollover image.

CSS Image preloaded method

Downloading the image before it is required for the rollover. This can be done by applying the image as a background to an element, and then hiding it using the background-position property. The image will then be downloaded but will not be displayed. Then, when the rollover is activated, it will operate smoothly and instantly.

So you need to create one class with the background image property., Use the rollover image as a background image and hide that element by using background position property as seen below.

.load_image
 {
     background-image: url("rollover-image.jpg");
     background-repeat: no-repeat;
     background-position: -1000px -1000px;
 }

<div class="load_image"></div>

Your rollover image will be loaded while the page was loading. When a rollover is then activated, the image will already be available to the browser and the effect will be instant.

Click here for “Multiple images preload css”

]]> http://discoverweb.info/css-image-preload.html/feed 0 IE only CSS http://discoverweb.info/ie-only-css.html http://discoverweb.info/ie-only-css.html#comments Tue, 17 May 2011 10:38:05 +0000 admin http://discoverweb.info/?p=1697 This is the way include css styles for IE browsers

<!--[if IE]>
<link rel="stylesheet" href="all-ie.css" type="text/css"/>
<![endif]-->
]]> http://discoverweb.info/ie-only-css.html/feed 0 Facebook like button in different languages http://discoverweb.info/facebook-like-button-in-different-languages.html http://discoverweb.info/facebook-like-button-in-different-languages.html#comments Tue, 26 Apr 2011 15:46:02 +0000 admin http://discoverweb.info/?p=1515

Now You can create the Facebook like button in any language you want
For Using the iframe version of the button you have to insert the code snippet “& amp;locale=en_US” (for English) somewhere after the facebook like button link, so the code would look like this:

<iframe
src='&quot;http://www.facebook.com/plugins/like.php?
href&quot; + data:post.url + &amp;locale=en_US&amp;send=false
&amp;layout=button_count&amp;width=100&amp;show_faces=true
&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:100px; height:21px;" allowTransparency="true"></iframe>


For example Facebook like in Tamil (Language code – “ta_IN” ), So you have to include this

&amp;locale=ta_IN




Facebook like button language code

Facebook like button language change will work for the listed langeages

]]> http://discoverweb.info/facebook-like-button-in-different-languages.html/feed 0 Text indent issues http://discoverweb.info/text-indent-issues.html http://discoverweb.info/text-indent-issues.html#comments Wed, 20 Apr 2011 15:30:09 +0000 admin http://discoverweb.info/?p=1024 Text indent not working in IE

Text indent property which allows you the give space in the starting of the line or paragraph.

When we try to hide the text we can use in the button we can us text-indent=-9999px; but this is not interpreting in IE., For example consider the following code.

<html>
<head>
<title>Test Indent Example</title>
<style>
input.download {
	width:123px;
	height:60px;
	border: none;
	text-indent: -9999px;
	background-image: url(images/download.png);
}
</style>

</head>
<body>
<input type="submit" class="download" value="Download">
</body>
</html>

but it show the button like this
IE7_text_indent_issue
To fix this issue we have to insert few lines in the css code., So the final ” input.download ” class as follows

input.download {
	width:123px;
	height:60px;
	border: none;
	text-indent: -9999px;
	background-image: url(images/download.png);
	display:block;
	font-size:0;
	line-height:0;
}

Do finally we got the correct result in all browsers
text-indent

display:block Negative text-indent works in IE7 only if this is added.
font-size:0 is used to reduce the font size and works well in IE7.
line-height: 0 to fix for IE6.

]]> http://discoverweb.info/text-indent-issues.html/feed 0 cufon-yui script for IE9 http://discoverweb.info/cufon-yui-script-for-ie9.html http://discoverweb.info/cufon-yui-script-for-ie9.html#comments Tue, 19 Apr 2011 15:25:33 +0000 admin http://discoverweb.info/?p=1441 IE9 cufon script doesn’t render, not even the actual text. Ok try any one of the following method

Method 1

Download this new cofon-yui script and use.

Method 2
<meta content=”IE=8″ http-equiv=”X-UA-Compatible” />

Method 3

<!–[if gte IE 9]> <script type=”text/javascript”> Cufon.set(‘engine’, ‘canvas’); </script> <![endif]–>

]]> http://discoverweb.info/cufon-yui-script-for-ie9.html/feed 0 CSS text shadow http://discoverweb.info/css-text-shadow.html http://discoverweb.info/css-text-shadow.html#comments Sat, 09 Apr 2011 18:58:42 +0000 admin http://discoverweb.info/?p=1400 This css text shadow property used to create the special effect without using Photoshop tool. Most of the recent web browsers (except IE 8 and lower) will support this css style.

Example for css shadow effect

<html>
<style>
.textshadow
{
text-shadow: 0px 0px 8px #000;
color:#ffffff;
font-size:20px;
}
</style>
<body>
<div class="textshadow"> This Text used text shadow Effect</div>
</body>
</html>

This Text used text shadow Effect

]]> http://discoverweb.info/css-text-shadow.html/feed 0 css clear property http://discoverweb.info/css-clear-property.html http://discoverweb.info/css-clear-property.html#comments Thu, 17 Mar 2011 12:45:45 +0000 admin http://discoverweb.info/?p=1102 The clear property used to control the behavior of the floated elements., Normally which is used to turn off the floating sides of the element.

This clear property has the values left, right, both or none.

clear:both property with Examples

<div class="content">
<div class="left_box">Float left styled Element</div>
<div class="right_box">Float Right styled Element</div>
</div>
<div class="footer">Footer Element</div>


Without any clear style property the content box and footer box merged.

Float left styled Element
Float Right styled Element
Footer Element
<div class="content">
<div class="left_box">Float left styled Element</div>
<div class="right_box">Float Right styled Element</div>
<div style="clear:both"></div>
</div>
<div class="footer">Text of Footer Element</div>
Float left styled Element
Float Right styled Element
Footer Element
Example for clear both Property
]]> http://discoverweb.info/css-clear-property.html/feed 0