fbpx
April 6, 2020
css effects
CSS

CSS EFFECTS | Add Special Effect To Web Documents Using CSS

In this tutorial we will be looking at CSS effects and how to add special effects to text or elements on the web page using CSS. In the previous tutorial we looked at CSS @rules and how to add special rules during web coding for browser processing. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS @ RULES | Understanding The Importance of Some @Rules In CSS

CSS EFFECTS

CSS allows developers to add special effects to Text or images on the web page using special effect properties but some of these effects are only visible to internet explorer users. If you intend building a web page for all browsers, you might want to ignore the use of special CSS effects. Below is the list of effects we are going to be looking at today

  • Alpha Channel– The alpha channel can be used to alter or control the opacity of the target object to make it blend with the web page background.
  • Drop shadow effect – The drop shadow is used to add shadow effect to the object on the web page
  • Invert effect –  The invert effect is used to map or control the colors of object to their opposite colors in the color spectrum
  • Mask Effect  – The mask effect is used to convert transparent pixel to a define color and make opaque object transparent

The Alpha Channel Effect

The alpha channel which is used to control the opacity of an object and can take different value. The list below shows the values that can be used for this CSS effects

S/N EFFECT PROPERTY DESCRIPTION
1 opacity Specify the opacity level which ranges from 0-100. 0 = full opacity, 100 = fully opaque
2 finishopacity Specifies the level of opacity at the end of the object
3 style use to specify the shape of the opacity gradient
1= uniform
2= linear
3= radial
4= rectangular
4 startX Specifies X coordinate for the opacity gradient to begin
5 startY Specifies Y coordinate for the opacity gradient to begin
6 finishX Specifies X coordinate for the opacity gradient to end
7 finishY Specifies Y coordinate for the opacity gradient to END

example shown below

<html>
   <head>
   </head>
   <title>DEVELOFERD ILLUSTRATION OF ALPHA CHANNEL EFFECT</title>
   <body>
     
      <div style = "width: 120px; 
         height: 50; 
         font-size: 10pt; 
         font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
         color: red;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=480, FinishY=0)">DEVELOFERD ILLUSTRATION OF ALPHA CHANNEL EFFECT</div>
   </body>
</html> 

RESULT

DEVELOFERD ILLUSTRATION OF ALPHA CHANNEL EFFECT
DEVELOFERD ILLUSTRATION OF ALPHA CHANNEL EFFECT

Drop shadow effect

The drop shadow is used to create shadow for the object either in the X-horizontal or Y-vertical direction. Below is the list of values that can be used with this property.

S/N EFFECT PROPERTY DESCRIPTION
1 color Use to specify the color of the object shadow
2 offX Specifies the number of pixel the drop shadow should offset from the original image. Positive value moves the drop shadow to the left and negative value moves the drop shadow to the right
3 offY Specifies the number of pixel the drop shadow should offset from the original image. Positive value moves the drop shadow down and negative value moves the drop shadow up.
4 positive If set to true all opaque objects get s drop shadow. If set to false all transparent objects gets a drop shadow

Example

<html>
   <head>
      <title>ILLUSTRATION OF DROP SHADOW EFFECT</title>
   </head>
   
   <body>
      
      <div style = "width: 250; 
         height: 90; 
         font-size: 20pt; 
         font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
         color: red; 
         filter:drop-shadow(3px 3px 2px green);">DEVELOFERD ILLUSTRATION OF DROP SHADOW EFFECT</div>
   </body>
</html>

RESULT

ILLUSTRATION OF DROP SHADOW EFFECT
DEVELOFERD ILLUSTRATION OF DROP SHADOW EFFECT

Invert effect

The invert effect is used to map the color of the object to its opposite color in the color spectrum . The only value that goes into the filter property using this effect is “invert” which can take any value from 0-100. Example shown below

<html>
   <head>
      <title>ILLUSTRATION OF INVERT EFFECT</title>
   </head>
   
   <body>
      
      <div style = "width: 300; 
         height: 90; 
         font-size: 20pt; 
         font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
         color: red; 
         filter:invert(100);">DEVELOFERD ILLUSTRATION OF INVERT EFFECT</div>
   </body>
</html>

RESULT

ILLUSTRATION OF INVERT EFFECT
DEVELOFERD ILLUSTRATION OF INVERT EFFECT

The above example shows how the color red was inverted to the opposite color in is color spectrum

Mask Effect

The mask effect is use to switch between transparent pixels and opaque. This effect takes only “color” as value. Example shown below

<html>
   <head>
      <title>ILLUSTRATION OF MASK EFFECT</title>
   </head>
   
   <body>
      
      <div style = "width: 300; 
         height: 90; 
         font-size: 20pt; 
         font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
         color: red; 
         filter: Mask(Color=pink);">DEVELOFERD ILLUSTRATION OF MASK EFFECT</div>
   </body>
</html>

RESULT

ILLUSTRATION OF MASK EFFECT
DEVELOFERD ILLUSTRATION OF MASK EFFECT

CONCLUSION

CSS effects helps developers add special effect filters to objects. This is a very important property when constructing quality web pages mostly for internet explorer users . A good knowledge of this will help you structure a good web page with the use of effect filters. Lets move on to the next topic on CSS MEDIA TYPES

Leave a Reply

Your email address will not be published. Required fields are marked *