CSS Text Shadow Property

-

CSS Text Shadow Property
 

CSS Text Shadow Property

CSS text-shadow is property used to add a shadow effect to text.

text look stylish ,attractive and sometimes easier to read.

Syntax of Text Shadow 


text-shadow: horizontal-shadow vertical-shadow blur-radius color;

✅ Horizontal  Shadow (Required)

  • Positive value  ➡  right
  • Negative value ➡  left

✅ Vertical Shadow (Required)

  • Positive value   ➡  down
  • Negative value  ➡  up

✅ Blur Radius (Optional)

  • Controls Softness of shadow
  • 0 ➡  sharp shadow

✅ Color (optional  but Recommended)

  • Defines shadow color

Why We Use Text Shadow

 ✔  Enhance website Ul
 ✔  Design attractive headings
 ✔  Create 3D or glowing effects.
 ✔  Improve text visibility

Real World Use

  • Website headings
  • Logo design
  • Hero section titles
  • Buttons
  • Banner text

Why Use Text-shadow

  1. Improve text visibility
  2. Create 3D effect
  3. Create glow effect
  4. Make headings stylish

CSS Text Shadow Property

Examples

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px  blue;
}
 h2{
   text-shadow:2px 2px 2px pink;
 }
</style>
</head>
<body>

<h1>CSS Text Shadow Property</h1>
<h2>https://webdesigningtheory.blogspot.com/ </h2>

</body>
</html>

CSS Text Shadow Property

Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2]  

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>

  • <head> section  contains metadata and css styles,not visible content.

  • Contains styles, metadata and page setting 

Step 4] 

<style> tag Internal CSS Section

<style>
h1 {
  text-shadow: 2px 2px  blue;
}
 h2{
   text-shadow:2px 2px 2px pink;
 }

 Applies a text shadow all <h1> and <h2> element.

 ✔  2px   ➡   Horizontal shadow (moves right).

✔  2px   ➡   Vertical shadow (moves down).

✔  2px   ➡   Blue effect.

✔ Pink  ➡   Shadow color.
 

Step 5]

   Closing tag


<</style>
</head>

Step 6]

<body> section


<h1>CSS Text Shadow Property</h1>
<h2>https://webdesigningtheory.blogspot.com/ </h2>

  • <h1> displays  main heading with blue shadow.
  • <h2> display website link text with soft pink shadow.

Step 7]

closing the Tag

  </body>   </html>

CSS Text Shadow Property
Output

CSS Text Shadow Property


Related Post :-

What is css Margin

CSS Conic Gradient Syntax

Comments

Post a Comment

Popular posts from this blog

text properties in css

-
Image
       T ext properties in css 1] This css property allows us to change the case of the text. 2] used to control the text capitalization. 3] css property can be used to make the appearance of next    all-lowercase and ,all uppercase can first character each word uppercase. Text properties  1] text-transform : uppercase; 2] text-transform : lowercase; 3] text-transform : capitalize; 1)  text-transform : uppercase;    Transforms all characters to uppercase. Example :-  <! DOCTYPE html > < html > < head >           < title > css text-transform property </ title >       < style >               p              {                   text-transform : uppercase ;              }       </ style > ...
Read more

CSS text-emphasis-color Property

-
Image
 Learn CSS text-emphasis-color Property  Learn CSS text-emphasis-color Property The text-emphasis-color property in Cascading Style Sheets (CSS) is used to set the color of emphasis marks applied to text. Syntax: selector  {   text-emphasis-color : color ;  }   Learn CSS text-emphasis-color Property Example <! DOCTYPE html > < html > < head > < style > h1 {     text-emphasis-style : circle ;   text-emphasis-color : blue ; } p {   text-emphasis-style : triangle ;   text-emphasis-color : red ; } h2 {   text-emphasis-style : double-circle ;   text-emphasis-color : orange ; } h3 {     text-emphasis-style : sesame ;   text-emphasis-color : red ; } </ style > </ head > < body > < h1 > CSS text-emphasis-color Property </ h1 > < p > https://webdesigningtheory.blogspot.com/ </ p > < h2 > Web Designing Theory </ h2 > < h3 > ...
Read more

css id selector

-
Image
        CSS ID Selector 1] css id selector  attribute  is the unique identifier in an html document. 2] id selector use # character. 3] css id selector is used to apply style specific HTML element. Syntax :- #id  { // css property } CSS id selector  Example:- <! DOCTYPE html > < html > < head >     < title > css id selector </ title >     < style >         #web         {             text-align : center ;             color : brown ;         }     </ style > </ head > < body >     < h2 id = "web" >         hello https://webdesigningtheory.blogspot.com/ </ h2 >         < h3 > This is program of Css ID Selector </ h3 >     </ h2 >     </ body ...
Read more

How to insert image in html

-
Image
  How to insert image in html Q] What Is The  Image  Tag  In  HTML?  The  <img src="">  HTML  tag is used to display an image on a web page .  It is a self -closing tag.  which means it does not need a separate closing tag  The <img> tag use embed  image in HTML page.  Image are not technically  insert in web page.  image are linked to the web pages. The <img> tag is empty it contains attributes only and does not have a closing tag. Syntax :-  <img src="image_path" alt="alternative -text" > Q] What Are Image  Tag.? Image tagging is process of identifying and labeling the contents of an image tag  This can be done manually by someone looking at the image and typing in description/  automatically using machine Html IMG Attribute :-  1] src :-   src is use to specify the path to image.  It is a necessary  attribute that describes source or pat...
Read more

How to create form Submit Button in HTML

-
Image
   Submit    Button <input type= "submit"> A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐Submit Button in HTML  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong > input type="submit" </ strong > defines a button for submitting form data to a form-handler: </ p > < form action = "/action.asp" > First name: < br > < input type = "text" name = "firstname" value = "Sanjay" >< br > Last name: < br > < input type = "text" name = "lastname" value = "jadhv" >< br >< br > < input type = "submit" value = ...
Read more