Ellipsis Text Message Using CSS

To add ellipsis into the long text use the below code. Mostly this will be useful in mobile development to fit the text in a small space. Ellipsis will be helpful in place of shrinking the text. Using CSS for Ellipsis will make your code simple and reusable in many places throughout your application. HTML Structure:
<ul data-role="listview" data-theme="f" data-dividertheme="g" data-inset="true" class=" listellipse " >
               <li data-role="list-divider"><span id="txt_paybill_msg"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
</ul>

CSS:

.listellipse li:not(:first-child){

     display:block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

}

.listellipse li:not(:first-child) span:first-child{

     width:45%;

     display:inline-block;

     white-space: pre;           /* CSS 2.0 */

     white-space: pre-wrap;      /* CSS 2.1 */

     white-space: pre-line;      /* CSS 3.0 */

     white-space: -pre-wrap;     /* Opera 4-6 */

     white-space: -o-pre-wrap;   /* Opera 7 */

     white-space: -moz-pre-wrap; /* Mozilla */

     white-space: -hp-pre-wrap;  /* HP Printers */

     word-wrap: break-word;      /* IE */

}

CSS Background Image

Background image using css

body{

                background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #f9e8d8),
color-stop(20%, #f9d8d1),
color-stop(40%, #f3bac1),
color-stop(60%, #ce7996),
color-stop(80%, #934b73),
color-stop(100%, #3f1b3f));
}


Good MobileUI Site

Ajax based CSS3 process icon

CSS3 ajax loading icon or processing image using CSS3

http://www.sitepoint.com/css3-ajax-loading-icon/#fbid=QJYTnoNrqwt

CSS Shrink Text to Fit to Container

jQuery Plugin to resize text to fit container

jQueryPlugin:

Shrink.js

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier-0.1));
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && newSize > maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
        });
    };
})(jQuery);

Javascript

$("div").textfill();

Reference to plugin

CSS Compatibility and Internet Explorer

CSS Compatibility and Internet Explorer

With each new release of Windows Internet Explorer, support for the Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS, Level 1-compliant version of Internet Explorer. Windows Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS 2.1) specification and supports some features of CSS Level 3 (CSS 3).

If your Web site targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions. This article provides an at-a-glance look at CSS compliance across recent versions of Internet Explorer, including support in Internet Explorer 8.

More...

Change style of webpage scrollbar Advanced CSS features

ADVANCED CSS FEATURES:

CSS can be even used to change the appearance of the scroll bar at your right side. Unfortunately, that only works with IE. You have to be using IE in order for this to work. Here is how to change some appearances of your scroll bar:

The CSS statements for doing this are:
1) scrollbar-3dlight-color
2)scrollbar-arrow-color
3) scrollbar-base-color
4) scrollbar-dark shadow-color
5) scrollbar-face-color
6) scrollbar-highlight-color
7) scrollbar-shadow-color
8) scrollbar-track-color



BODY {
scrollbar-arrow-color: green;
scrollbar-face-color: #FFFFFF;
scrollbar-track-color: rgb(12,35,244);
}



How to customize your textboxes.
Here is the code on how to do it:



BODY {
scrollbar-arrow-color: green;
scrollbar-face-color: #FFFFFF;
scrollbar-track-color: rgb(12,35,244);
}
TEXTAREA {
scrollbar-arrow-color: green;
scrollbar-face-color: #FFFFFF;
scrollbar-track-color: rgb(12,35,244);
}



That above code, has some similarities. The textbox area is treated with the same function statements as for the scrollbar. The scrollbar statements goes in the BODY selector.

create rounded corner by CSS

Create a rounded corner by CSS

Rounded Corner

IE position fix

The code to fix the exact position while the scrolling in bottom.

left: expression( ( 700 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 300 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

Scroll images through javascript and css

Scroll images through javascript and css

Scroll images

Learn to create tabs through css

Learn to create tabs through css
Learn to create tabs through css
Learn to create tabs through css


http://www.htmldog.com/articles/tabs/

http://www.barelyfitz.com/projects/tabber/

CSS Round corners

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml

http://www.livepipe.net/control/tabs

Download csshover.htc for Hover work in IE

Download csshover.htc for Hover work in IE

Download csshover.htc

Download Free Icons

Download Free Icon images

Download Icon Images for Free

Icons Search Engine

Icons Search Engine for Search Icons


Click here for Icons Search Engine

Create Layer on Mouse Over

Sites That has the layers:

http://www.istockphoto.com/file_search.php?action=file&text=house

http://www.templatemonster.com/

For Doing like the above one. Code is been here.

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb

Download Icons

Here the free down loadable icons

sfdsg
fgdfgsd