CSS Basic / discoverweb.info

Archive for the ‘CSS Basic’ Category

CSS drop shadow Examples

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;
      }

Posted in CSS Basic

Comments Off

CSS Opacity/transparent Effect

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

Posted in CSS Basic

Comments Off

CSS text shadow

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

Posted in CSS Basic

No Comments »

css clear property

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>

Posted in CSS Basic

Comments Off

Indent means the first line of a paragraph.

This text indent property gives the space for the beginning line of a paragraph or the word.

Text indent Example

This Text is Indent by 25px, The css used is “text-indent: 25px;”

This Text is Indent by 50px, The css used is “text-indent: 50px;”

This Text is Indent by 75px, The css used is “text-indent: 75px;”

Negative Text indent CSS

For negative text indent the first line will be indented to the left. For Example

This Text is Indent by -15px,
Only the first line not other lines
The css used is “text-indent: -15px;”

Posted in CSS Basic

Comments Off

Archive for the ‘CSS Basic’ Category

CSS drop shadow Examples

Here we are going to see Drop shadow Effects Examples

1.How to create basic drop shadow Box

2.Create drop shadow Box with inset css property

3.Create double color border using drop shadow method

4.css image shadow and image drop shadow

CSS Opacity/transparent Effect

Example for transparent Image css

Example for Back ground image transpatent and Text Transparent CSS

CSS text shadow

Example for css shadow effect

This Text used text shadow Effect

css clear property

clear:both property with Examples

CSS Text Indent Property

Indent means the first line of a paragraph.

Negative Text indent CSS

Recent Posts

Categories