Web Style Press, Best Practices from all the Web, Build Better Websites » CSS http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Change Image Opacity Easily Using CSS or JS http://www.webstylepress.com/change-image-opacity-easily-using-css-js/ http://www.webstylepress.com/change-image-opacity-easily-using-css-js/#comments Fri, 23 Jan 2009 09:14:06 +0000 Hiroshi http://www.webstylepress.com/?p=484 Change Image Opacity Easily Using CSS or JS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> We can simply use CSS alone to reproduce opacity effect that have traditionally been done using scripting. The advantage of looking to CSS instead is obvious – much more lightweight and easier to implement. We can use this method where we need to use a dim or faint version of image, while when some one places mouse over it, then image comes sharp, clear and bright.

Use the following code in head section of web page.

<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}
.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>

Use the following code in body where the image is located.

<a href="#" class="opacityit"><img border="0" src="email.gif" /></a>

By this method image loads kind of blur in background and in light colors, but when some one places mouse over it. It becomes sharp.

Simple Opacity

We are using JavaScript to change the opacity of an image here. The technique works in both IE4+ and NS6+, and can be used to create some interesting “fading” effects. Here is the simple way to just place an image with opacity.

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">

In -moz-opacity:0.5 accepted range of values are 0 to 1, where 0 would make the image disappear and in alpha(opacity=50) range is between 1 to 100. We have combined the code both for IE and Mozilla for code compatibility.

We can also alter the opacity of image using javascript.

Head section code

<script>
function alteropacity(imageobject, opacity){
 if (navigator.appName.indexOf("Netscape")!=-1
  &&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
 else if (navigator.appName.indexOf("Microsoft")!= -1 
  &&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}
</script>

Body Section Code

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5" 
onMouseover="alteropacity(this, 100)" onMouseout="alteropacity(this, 30)">

Change Image Opacity Easily Using CSS or JS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/change-image-opacity-easily-using-css-js/feed/ 2 How to Gain Maximum from CSS http://www.webstylepress.com/css-maximum-benefits/ http://www.webstylepress.com/css-maximum-benefits/#comments Mon, 10 Nov 2008 09:13:35 +0000 Hiroshi http://www.webstylepress.com/?p=364 How to Gain Maximum from CSS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> CSS is a simple file which controls the visual appearance of a web page without compromising its structure. Why to use it and how to use it properly. If you don’t use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite heavy. Fact is that we live in a busy world, and people will not wait more than 5 seconds for web page to load. Some web developers implement the CSS on wrong way. They write their CSS in HTML code of the page, like this:

<html>
<head> 
<title>My Page</title>
<style>
A { font-family: Verdana; font-size:8pt; color:black; text-decoration:none } 
</style>
</head>
<body>some content</body>
</html>

Correct way is to link the external CSS file in the pages. i.e.

<link rel='stylesheet' href='css/styles.css' type='text/css' media='all' />

How to Gain Maximum from CSS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/css-maximum-benefits/feed/ 0 DIV Issues, Problems and Solutions http://www.webstylepress.com/div-issues-problems-and-solution/ http://www.webstylepress.com/div-issues-problems-and-solution/#comments Sun, 26 Oct 2008 20:48:04 +0000 Hiroshi http://www.webstylepress.com/?p=323 DIV Issues, Problems and Solutions is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> DIV based table less websites are common (essential, precisely speaking) now a days. Web 2.0 Web style is also about DIV based Validated websites. DIV is a little bit tricky to handle than simple tables. Here are few very essential known issues which I have been facing and their solutions.

Blank Line Spaces Problem

Sometimes we use blank DIV. Suppose we use a DIV of 1px height. But its empty. Its behavior in IE and Firefox will be different. To avoid that use [ & n b s p ; ] or place blank gif image of 1px height in that.

Top-Padding Issue

Do not give top-padding to any element which is in div containing id as in example beneath:

<div id="some-id">
 <div class="some-class">
  text
 </div>
</div>

In above case top padding will be applied at class named as some-class and not at id named some-id.

Content Overlaps In spite of Not Using BR (line breaks)

Well, consider header, content and footer. These are three parts of website and in some cases if they just overlaps then you are missing clear both property of CSS.

Use clear:both; in css for every different part of website, for line break.

~~ Header ~~
<div style="clear:both;"></div>
~~ Body ~~
<div style="clear:both;"></div>
~~ Footer ~~

Vertical Alignment of Content In DIV

Things will be always top aligned in case of DIV.
So when placing images in the center of box then you will have to use top padding for that image via CSS.

UL LI List Padding Margin Problem In DIV

UL, LI have default spacings (padding and margin). Whether you define these 0 in CSS or whatever, the spacing between li will be different in IE and Firefox which is not ok when you are placing two lists besides each other and you require same height for both Lists.

Use line-height for li distances and not padding or margin and define max-height property in CSS for UL tag.

Naming Classes

Start class or id names with text and not with numbers.

i.e.
class=”nav” is ok
class=”2-nav” is not ok

Blocked Elements and Inline Elements

Tags with default line breaks are blocked elements while tags with no default line break are inline elements. You can write inline elements in the same line but not blocked elements.
i.e.
DIV, p are blocked elements.
strong, a, span are inline elements.

Difference Between ID and Class

Id is unique throughout the website. Id can not be used more than once in a web page. While you can use the same class for many tags in html.
id is unique and is not repeated throughout site but class can be applied at multiple tags.

Div With Blank Bottom Padding

Sometimes even when we define div height and there are no breaks after that but it takes some space or bottom padding and pushes next content a little more down.

Use overflow hidden property at that div via CSS, containing image, data or whatever which is causing bottom blank space (this problem occurs usually in i.e.6).

overflow:hidden;

Float and Align

mozilla firefox looks for float for alignment and not the text-align. Floating for DIV is shifting Whole DIV to right or left while aligning left or right for DIV is left or right alignment of data or content containing that DIV.

DIV Issues, Problems and Solutions is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/div-issues-problems-and-solution/feed/ 0 Create Rounded Flexible Div Without Images http://www.webstylepress.com/rounded-div-without-images/ http://www.webstylepress.com/rounded-div-without-images/#comments Sun, 26 Oct 2008 17:59:12 +0000 Hiroshi http://www.webstylepress.com/?p=306 Create Rounded Flexible Div Without Images is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Nifty Corners Cube is a solution to get rounded corners without images, and this third version is build by three main components:

  • A javascript file, named “niftycornerscube.js”
  • A CSS file, named “niftycorners.css”
  • The javascript calls specific for the pages

Nifty Corners Cube

Create Rounded Flexible Div Without Images is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/rounded-div-without-images/feed/ 0 Modern Font Styles For Websites http://www.webstylepress.com/modern-font-styles-for-websites/ http://www.webstylepress.com/modern-font-styles-for-websites/#comments Sun, 26 Oct 2008 17:45:27 +0000 Hiroshi http://www.webstylepress.com/?p=304 Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> I have described about using nice and clean fonts in web page. Now lets see some more details about using fonts in web pages.

As we know Verdana, Arial and Tahoma are being used from the beginning. In Web 2.0 Style, and many open source softwares such as WordPress, now-a-days some other fonts are being used which are neat and clean and stylish too. Best part is, to use these, no installation of fonts is needed. In Windows XP these are present by default. I have selected some examples of look and feel of some chosen fonts over here.

Font Styles Comparison

Arial “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Verdana “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Tahoma “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Trebuchet MS “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Georgia “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Grande “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Sans Unicode “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

sans-serif “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Font Families

It happens so that we can define a family of fonts while creating web page. If one font is not available in user’s machine; then next font style will be displayed. i.e

<style type="text/css">
.myfont { font-family: Geneva, Arial, Helvetica, sans-serif; }
</style>

Suppose Geneva is not present in user’s machine, then system will pick next font Arial for style. So it is recommended to use font-families.

The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes.

There are two types of font-family values:
* family-name: The name of a font-family, like “times”, “courier”, “arial”, etc.
* generic-family: The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

Separate each value with a comma, and always offer a generic-family name as the last alternative.

If a family-name contains white-space, it should be quoted. Single quotes must be used when using the “style” attribute in HTML.

Here is the list of font families commonly available on all systems.

Arial, Helvetica, sans-serif
‘Times New Roman’, Times, serif
‘Courier New’, Courier, monospace
Georgia, ‘Times New Roman’, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/modern-font-styles-for-websites/feed/ 0 Astyle Visual CSS Editor http://www.webstylepress.com/astyle-visual-css-editor/ http://www.webstylepress.com/astyle-visual-css-editor/#comments Tue, 23 Sep 2008 21:20:15 +0000 Hiroshi http://www.webstylepress.com/?p=89 Astyle Visual CSS Editor is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

CSS (Cascading Style Sheets) allows you to separate the representation definitions of such structured documents as HTML, XHTML, XML from their content, which is an effective principle in the design of web sites. Astyle is a free CSS editor for developers with many features.

  • Visual easy-to-use interface
  • Graphic tree-type view of attachment files and the CSS structure
  • Grouped view of properties and selectors
  • Automatic selection and grouping of CSS selectors from a markup language document
  • Source CSS, HTML, XML highlight code editor
  • Active preview current selectors and documents with IE and Mozilla support
  • Clean up HTML document via CSS
  • Icon associate dictionary
  • Copy, Paste and Cut operations
  • Drag and Drop operations

Astyle Visual CSS Editor

Astyle Visual CSS Editor is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/astyle-visual-css-editor/feed/ 0 Simple and Powerful Form Validation http://www.webstylepress.com/simple-and-powerful-form-validation/ http://www.webstylepress.com/simple-and-powerful-form-validation/#comments Sun, 21 Sep 2008 22:56:17 +0000 Hiroshi http://www.webstylepress.com/?p=82 Simple and Powerful Form Validation is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Standardize the way you create forms on the web. A clean css framework to build web forms based on semantic HTML that gives superior user experience. Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

Download Example of Uniform

Download, Updates, Customizations

Uniform Homepage

Simple and Powerful Form Validation is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/simple-and-powerful-form-validation/feed/ 0 Wrapping Text – Breaking Text with No Spaces into New Line http://www.webstylepress.com/wrapping-text/ http://www.webstylepress.com/wrapping-text/#comments Mon, 08 Sep 2008 16:16:40 +0000 Hiroshi http://www.webstylepress.com/?p=53 Wrapping Text – Breaking Text with No Spaces into New Line is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Text like, a b c d e f and so on written in HTML will do fine in any browser, we all know that.

What about the following!
abcdefghijklmnopqrstuvwxyz….NoWordBreaksAndSentenceGoesOnAndOn…
The text with no spaces.

If there are no breaks in words then the sentence will proceed straight and cause horizontal scroll in web page. In blogs or in any other applications where users can comment or put some data, they can write such spam or anything that can cause your web page layout to break. We have a solution to that. Write text in pre tag and apply following CSS to it.

pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

This will fix the problem and in IE it will cause line break and avoid horizontal scroll while in Mozilla Firefox it will add an inline frame and put all the data in it.

Download Example
More Detail and Examples

Wrapping Text – Breaking Text with No Spaces into New Line is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/wrapping-text/feed/ 0