Logo

Navigation
  • Home
  • Services
    • ERP Solutions
    • Implementation Solutions
    • Support and Maintenance Solutions
    • Custom Solutions
    • Upgrade Solutions
    • Training and Mentoring
    • Web Solutions
    • Production Support
    • Architecture Designing
    • Independent Validation and Testing Services
    • Infrastructure Management
  • Expertise
    • Microsoft Development Expertise
    • Mobile Development
    • SQL Server Database and BI
    • SAP BI, SAP Hana, SAP BO
    • Oracle and BI
    • Oracle RAC
  • Technical Training
    • Learn Data Management
      • Business Intelligence
      • Data Mining
      • Data Modeling
      • Data Warehousing
      • Disaster Recovery
    • Learn Concepts
      • Application Development
      • Client Server
      • Cloud Computing Tutorials
      • Cluster Computing
      • CRM Tutorial
      • EDI Tutorials
      • ERP Tutorials
      • NLP
      • OOPS
      • Concepts
      • SOA Tutorial
      • Supply Chain
      • Technology Trends
      • UML
      • Virtualization
      • Web 2.0
    • Learn Java
      • JavaScript Tutorial
      • JSP Tutorials
      • J2EE
    • Learn Microsoft
      • MSAS
      • ASP.NET
      • ASP.NET 2.0
      • C Sharp
      • MS Project Training
      • Silverlight
      • SQL Server 2005
      • VB.NET 2005
    • Learn Networking
      • Networking
      • Wireless
    • Learn Oracle
      • Oracle 10g
      • PL/SQL
      • Oracle 11g Tutorials
      • Oracle 9i
      • Oracle Apps
    • Learn Programming
      • Ajax Tutorial
      • C Language
      • C++ Tutorials
      • CSS Tutorial
      • CSS3 Tutorial
      • JavaScript Tutorial
      • jQuery Tutorial
      • MainFrame
      • PHP Tutorial
      • VBScript Tutorial
      • XML Tutorial
    • Learn Software Testing
      • Software Testing Types
      • SQA
      • Testing
  • Career Training
    • Career Improvement
      • Career Articles
      • Certification Articles
      • Conflict Management
      • Core Skills
      • Decision Making
      • Entrepreneurship
      • Goal Setting
      • Life Skills
      • Performance Development
      • Personal Excellence
      • Personality Development
      • Problem Solving
      • Relationship Management
      • Self Confidence
      • Self Supervision
      • Social Networking
      • Strategic Planning
      • Time Management
    • Education Help
      • Career Tracks
      • Essay Writing
      • Internship Tips
      • Online Education
      • Scholarships
      • Student Loans
    • Managerial Skills
      • Business Communication
      • Business Networking
      • Facilitator Skills
      • Managing Change
      • Marketing Management
      • Meeting Management
      • Process Management
      • Project Management
      • Project Management Life Cycle
      • Project Management Process
      • Project Risk Management
      • Relationship Management
      • Task Management
      • Team Building
      • Virtual Team Management
    • Essential Life Skills
      • Anger Management
      • Anxiety Management
      • Attitude Development
      • Coaching and Mentoring
      • Emotional Intelligence
      • Stress Management
      • Positive Thinking
    • Communication Skills
      • Conversation Skills
      • Cross Culture Competence
      • English Vocabulary
      • Listening Skills
      • Public Speaking Skills
      • Questioning Skills
    • Soft Skills
      • Assertive Skills
      • Influence Skills
      • Leadership Skills
      • Memory Skills
      • People Skills
      • Presentation Skills
    • Finding a Job
      • Etiquette Tips
      • Group Discussions
      • HR Interviews
      • Interview Notes
      • Job Search Tips
      • Resume Tips
      • Sample Resumes
 

CSS3 Opacity

By Exforsys | on March 15, 2007 |
CSS3 Tutorial

CSS3 Opacity

Need for Handling Transparency:

Before the introduction of features in CSS3 for handling transparency of images the web design though took over in various aspects had a great limitation embedded in it. That is the print design can handle overlaying of text on a background which could either be an image or color background.

This overlaying of text on background ability have the print design the ability of giving fading of text effect in the background and thereby handling the feature of transparency of images. But in contrast the web design lacked this powerful ability before the introduction of features in CSS3 which was handled in CSS3 by its powerful feature of opacity.

What is Opacity in CSS3:

Opacity is actually a property of CSS3 which gives its the ability to change the opacity of web design objects or elements and thereby make the element achieve the effect of fading and appearing thereby handling transparency of images. In short opacity is actually a property introduced in the version of CSS3 which would help users to define and handle the transparency of images on web screen with respect to its background.

Structure of Opacity in CSS3:

The general syntax of the powerful feature opacity in CSS3 is as below:

opacity: <alphavalue> | inherit

In the above the alphavalue denotes any value in the range from number 0.0 to 1.0 inclusive of both. In this the number 0.0 denotes fully transparent image which means that the background image to the element would be completely visible and number 1.0 denotes fully opaque which means that the background image to the element would be completely invisible. The default initial value is 1.0.

For example

opacity:1.0

The above example denotes the transparency of element to be completely opaque thereby making all the background images below the element defined to be completely invisible.

The option inherit is optional which if included denotes that the opacity property of the element defined should be maintained in the same way as that of its parent opacity. The opacity feature is handled and supported by Netscape browsers and is not supported by non-Mozilla browsers and is also not supported by Internet Explorer6 and Internet Explorer 7. The above statement may put the users feel that Internet Explorer being famous browser could not handle opacity property making it less powerful ability. But it is not so because though Internet Explorer does not support opacity property of CSS3 it supports an equivalent property alpha filter which is a property of Microsoft. The alpha filter property of Internet Explorer takes any value in the range from number 0 to 100 inclusive of both. In this the number 0 denotes fully transparent image which means that the background image to the element would be completely visible and number 100 denotes fully opaque which means that the background image to the element would be completely invisible. Thus it now clear from the alpha filter property that if one wants to handle transparency of images in CSS3 using Internet Explorer then they must multiply opacity by 100 and add the corresponding alpha filter.

So the general syntax for handling transparency of images in CSS3 using Internet Explorer property of alpha filter is as below:

filter: alpha(opacity=value);

The Mozilla-based browsers also support the property of opacity of CSS3 but some of the Mozilla-based browsers use the syntax with keywords as

-moz-opacity

for handling opacity property of CSS3

Apart from the above representation placement position also has to be specified along with the sytax of opacity definition. The placement position supported by Internet Explorer and Mozilla-based browsers is float:left

An example of the representation is given below:

<span style="float:left;filter:alpha(opacity=30);-moz-opacity:.30;opacity:.30;">

One more feature which makes using opacity property powerful is the way or syntax of opacity property is convenient to handle. This is because one can use the same value for rgb but still can achieve shades in images by using the opacity property defined in CSS3 instead of achieving different shades by giving different values for rgb which is inconvenient for users to handle. The example given below explains this in detail.

Defining using opacity property of CSS3 takes the below format:

<div style=" background: rgb(255, 0, 0) ; opacity: 0.1;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.3;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.5;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.7;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

Instead of inconvenient way of handling using rgb without opacity property as shown below:

<div style=" background: rgb(241, 182, 178) ; "></div>
<div style=" background: rgb(243, 152, 132) ; "></div>
<div style=" background: rgb(247, 86 , 84) ; "></div>
<div style=" background: rgb(251, 35, 40) ; "></div>
<div style=" background: rgb(255, 0, 0) ; "></div>

The above concepts and effects of transparency which we applied for background images of elements defined can also be applied to elements transparency. That is the user can define the opacity in the same way for the image or element directly which will make the element to fade and appear in and out of the background. Let us see an example to understand this concept of handling transparency for background images in detail:

<img src="http://exforsys.com/sample/test/training.jpg"
style="opacity:0.3;filter: alpha(opacity=30) ;" />

« « Ajax Challenges
CSS3 Wrapping » »

Author Description

Avatar

Editorial Team at Exforsys is a team of IT Consulting and Training team led by Chandra Vennapoosa.

Free Training

RSSSubscribe 394 Followers
  • Popular
  • Recent
  • CSS3 Links Creation and Usage

    March 19, 2007 - 0 Comment
  • CSS3 Introduction

    February 6, 2007 - 0 Comment
  • CSS3 Selectors

    February 7, 2007 - 0 Comment
  • CSS3 Multi Column Feature

    March 9, 2007 - 0 Comment
  • CSS3 Advantages

    March 12, 2007 - 0 Comment
  • CSS3 Wrapping

    March 15, 2007 - 0 Comment
  • CSS3 Links Creation and Usage

    March 19, 2007 - 0 Comment
  • CSS3 Wrapping

    March 15, 2007 - 0 Comment
  • CSS3 Advantages

    March 12, 2007 - 0 Comment
  • CSS3 Multi Column Feature

    March 9, 2007 - 0 Comment
  • CSS3 Selectors

    February 7, 2007 - 0 Comment
  • CSS3 Introduction

    February 6, 2007 - 0 Comment

Exforsys e-Newsletter

ebook
 

Related Articles

  • CSS3 Links Creation and Usage
  • CSS3 Wrapping
  • CSS3 Advantages
  • CSS3 Multi Column Feature
  • CSS3 Selectors

Latest Articles

  • Project Management Techniques
  • Product Development Best Practices
  • Importance of Quality Data Management
  • How to Maximize Quality Assurance
  • Utilizing Effective Quality Assurance Strategies
  • Sitemap
  • Privacy Policy
  • DMCA
  • Trademark Information
  • Contact Us
© 2023. All Rights Reserved.IT Training and Consulting
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptReject Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT