Skip to main content

How to Decorate Text With Shadow Effects Using CSS

You may already learned about ghost button and zoom effect on this blog. In this post, you will learn how to decorate text, paragraph and links with shadow effects. It is very simple to decorate text, paragraph and links with/without shadow effects. If you have a little bit knowledge of HTML/CSS, you can do more. To do so you need to remember some codes or just copy the others code and try yourself by changing the values.
To decorate text with shadow effects, you need to apply CSS property with style attributes. The CSS text-shadow property used to apply shadow to text/paragraph and color property used to apply color to text/paragraph. Also box-shadow property is used to apply to elements and is only used to apply horizontal and vertical shadow for a division. You can decorate text with shadow effects in different ways.

Inline - Inline CSS is used to apply unique style to a single HTML element by using style attributes.

Internal - Internal CSS is used to apply unique style to a single page by using a <style> element in the <head> section.

External - External CSS is used to apply unique style to multiple pages using external style sheet. Users need to create an external style sheet and then need to link the style sheet in the <head> section. Popularly this is used in blogging platform like Blogger/WordPress etc. Read also : How to put adsense ad below blogger post.

Decorating Texts Using Inline CSS


For decorating text with shadow effects you use <h1> to <h6> tag and tag must be closed with end tag like </h1> to </h6> tag. Below are the examples of Inline CSS style.

Example 1

<h1 style="color: blue; text-decoration: none; text-shadow: rgb(170, 171, 171) 2px 2px;"> All Blogger Buzz </h1>

Demo :   

All Blogger Buzz


Example 2

<h1 style="color: red; text-decoration: none; text-shadow: 0 2px #0000FF, 0 2px #00FF00;"> All Blogger Buzz </h1>

Demo :    

All Blogger Buzz


Example 3

<h1 style="color: blue; text-decoration: overline; text-shadow: 2px 2px 2px;"> All Blogger Buzz </h1>

Demo :   

All Blogger Buzz


Example 4

<h1 style="color: red; text-decoration: underline; text-shadow: 2px 5px 5px;"> All Blogger Buzz </h1>

Demo :   

All Blogger Buzz


Example 5

<h1 style="color: blue; text-decoration: line-through; text-shadow: 0 5px 5px;"> All Blogger Buzz </h1> Read also : How to make money online from home.
Demo :   

All Blogger Buzz


Example 6 : Blur Effects

<h1 style="color: blue; text-decoration: none; text-shadow: 0 0 2px #0000FF, 0 0 2px #FF0000;"> All Blogger Buzz </h1>

Demo :    

All Blogger Buzz


Example 7 : Multiple Shadows

<h1 style="color: white; text-decoration: none; text-shadow: 2px 3px 4px blue , 0 0 20px red , 0 0 15px green;"> All Blogger Buzz </h1>

Demo :    

All Blogger Buzz


Example 8 : 

<h1 style="color: yellow; text-decoration: none; text-shadow: -2px 0 black, 0 1px red, 1px 0 red, 0 -1px blue;"> All Blogger Buzz </h1>

Demo :  

All Blogger Buzz


Decorating Links Using Inline CSS


You can use anchor <a> ..... </a> tag with different style attributes.

<a href="type-link-URL" style="color: blue; text-decoration: none; text-shadow: rgb(170, 171, 171) 2px 2px;">How To Make Money Online From Home </a>

Example :    How To Make Money Online From Home

Decorating Paragraph Using Inline CSS


To decorate block of text/paragraph you just need to add <div> ...... </div> tag with different style attributes. Use below codes to decorate block of text/paragraph.


<div style="color: green; text-decoration: none; text-shadow: rgb(170, 171, 171) 2px 2px; background-color: yellow; box-shadow: -5px -5px 20px 20px;" > Type your paragraph here </div>

You can decorate any text with shadow effects according to your choice by changing the property and value of color, tex-decoration, text-shadow, box-shadow etc. in the above code as per your choice. Read also : How to create adsense for search and make money from it.

Decorating Text Using Internal CSS


Most of the blogging platform uses Internal CSS style sheet. If you are using internal CSS style sheet then no need to upload separate style sheet file to your server. Internal CSS style sheet is used to apply unique style to a single page by using a <style> element in the <head> section.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   color: yellow;
   font-family: tahoms;
   font-size: 250%;
   text-decoration: none;
   text-shadow: -2px 0 blue, 0 1px black, 1px 0 black, 0 -1px black;;
}
p  {
   color: green;
   word-wrap: break-word;
   font-family: courier;
   font-size: 150%;
   padding: 30px;
}
a  {
   color: red;
   font-size: 250%;
   text-decoration: none;
   text-shadow: 0 2px #0000FF, 0 2px #00FF00;
}
div {
   color: red;
   text-align : justify;
   text-decoration: none;   
}

</style>
</head>
<body>
-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
</body>
</html>

Decorating Text Using External CSS


If you do want to write the code repeatedly for different text/paragraphs for new blog post then it is better to use the CSS code inside your theme/template with External-block using <style> element in the <head> section.  External style sheet can be written in any text editor and the file not contain any HTML code and it is saved with .css extension. Here is how the CSS <style> attribute looks.

h1 {
   color: yellow;
   font-family: tahoms;
   font-size: 250%;
   text-decoration: none;
   text-shadow: -2px 0 blue, 0 1px black, 1px 0 black, 0 -1px black;;
}
a  {
   color: red;
   font-size: 120%;
   text-decoration: none;
   text-shadow: 0 2px #0000FF, 0 2px #00FF00;
}
p  {
   color: green;
   word-wrap: break-word;
   font-family: courier;
   font-size: 150%;
   padding: 30px;
}
div {
   color: red;
   text-align : justify;
   text-decoration: none;   
}

After that save the file as style.css and use the below syntex to add this style sheet in your html page

<link href="style.css" rel="stylesheet" type="text/css" />

Thanks for reading this post. Subscribe to our news letter and give your few second to share this post on social networks.

Comments

Popular posts from this blog

How To Change Default File Download Path in UC Browser

All of us known that UC browser is the most popular, fast and less data consuming mobile browser for android devices. Many of us use UC browser on daily basis on our smart phones. By default UC browser has download path to internal memory device which is /storage/sdcard0/download. sdcard0 is the built in memory or internal memory of your device. Read also : How to fix HTTP and HTTPS Mixed Content Errors.


Do you know that this default download path can be changed? Since, internal memory is fixed, and once you exceed this value you can't download more. You need to move some data from mobile memory to the external memory which is sdcard1. If you change this default path to external memory card (sdcard1), you can download more data directly to your desired directory. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Here, I will show you, how to change this default download path from internal memory card sdcard0 to external memory card sdcard1. To do so you need to…

How To Rename A WhatsApp Group

We all know that WhatsApp is the most popular messaging service for Android, BlackBerry, iPhone and for other platforms. In this post, I will show you how to rename an existing WhatsApp group. To rename an existing WhatsApp group your smartphone must have internet connection. After that you need to follow the below steps. Read also : How to track lost/stolen mobile phone and erase data remotely.


Step 1. Open WhatsApp application on your smartphone.

Step 2. After that you need to click CHATS tab and click on your group name.

Step 3. Once you click on your group name, you will able to see chat details. Now you need to click vertical dots located extremely top right corner and then click Group info. Read also : How to setup AdSense page level ads.

Step 4. Now you can easily rename your group. To rename the group just click Edit icon and then type the desired group name and click OK.

In this way you can rename a WhatsApp group.


Thanks for reading the post. Let me know have you ever changed y…

Calculation of Total Marks, Percentage, Division, Remarks, Maximum & Minimum Number of Students in MS Excel

In this post, I will help you to learn how to calculate total marks, percentage, division, maximum number, minimum number and remarks of students of a class very fast. At first you need to look over the above image very carefully. The above image shows the marks obtained by six students of a class.


Formula to calculate Total Marks of all students within seconds 

First you need to find out the Total Mark of a single student who is on the top of the list i.e, Mani. To calculate Total Mark of Mani, click on the Total Mark cell address of Mani i.e, H6 and then type the formula =sum(1st subject's cell address i.e, b6:last subject's cell address i.e, g6) and then press Enter on the keyboard or click anywhere on the worksheet. Here b6 and g6 are cell address of 1st subject (English) and last subject (Biology) of that student. Read also : How to Enable HTTPS for Blogger Blog.

After getting results, click on the resultant cell address of Total Mark of the 1st student i.e., Mani an…

Change UC Browser Default Homepage in Android Phones

We all know that Android OS operated Smartphones and Tablets are great for web browsing. Like other browsers, uc browser has a default search engine Yahoo is set for web search. UC browser provides different kind of search facilities under 5 different categories namely Web, Video, Shop, Image and APP.


In this post, I will show you how to change the default search engines of uc browser in Android devices for their 5 different categories. To do so you just need to follow the below steps. Read also : How to Enable HTTPS for Blogger Blog.

Change Default Homepage for UC Web search

Step 1. At first you need to open UC browser
Step 2. After that click Search. Follow the below image.
Step 3.Once you click Search, you will able to see the default search engine's icon for Web search like y for Yahoo, g for Google. Now you need to click that search icon. Follow the below image. Read also : How to change UC browser default download path.

Step 4. Once you click the search icon, you will able t…

Set UC Bowser as Default Browser in Android Device

UC browser is the most popular and free mobile browser for android phones developed by UCWeb also known as UC Mobile. UC browser becomes most popular among mobile internet users because of its less consuming data than any other mobile browser. It can be downloaded from UCWeb or Google Play Store. Read also : How to change UC browser default download path.


In this post, I will show you how to set UC browser as default browser in your Android phones. To do so you need to follow the below steps.

Steps to set UC browser as default browser

Step 1.At first open UC browser.
Step 2. In the second step, tap the horizontal bar. Read also : How to make money online from home.


On the next image, you will able to see Bookmarks, History, Refresh etc. icons. Now swipe this menu screen to the left and tap Settings. Read also : How to transfer large files without mobile data.


Step 3. Now you will able to see the option Set as Default Browser which is inactive.




Step 4. Now you need to tap Set Up but…

How to Put AdSense Ad Below Blogger Post Title

AdSense is one of most used affiliate program by majority of expert bloggers for their website monetization in all over the world.  One of the prime reason to use AdSense to monetize website/blog is that AdSense is a cookie based contextual advertising program that shows targeted ads, relevant to the content and reader of a website.

When you visit any blog/website, you may noticed that most of blogs display AdSense ad just below post title. Successful bloggers advised to put AdSense ad below post title because this is the best place where you will get more response and also increase the page CTR (Click Through Rate). It does not work well for every blogger and does not guarantee to make more money from this ads but you must need to experiment with AdSense at different spots to get more response.
Steps to create Google AdSense ad code To create AdSense ad code follow the below the five steps.

Step 1. At first you need to create adsense ad. To create adsense ad, login to your adsens…

How To Lock / Track Lost Smartphone Remotely & Erase All Data

Are you worried about data from your lost / stolen android phone? Now you can lock your lost / stolen android phone remotely. You can erase all data from your lost android phone remotely. Now Google's new service tool (Android Device Manager) helps android owners to track / lock lost android phone remotely. In this post, I will share some tips so that you can prevent misuse of your lost mobile data. Read also : How to make your blog push notification ready.


Whats is Android Device Manager

Android Device Manager (ADM) is a tool that locates lost or stolen android devices such as android mobile phones and tablets. ADM also helps owners to Ring, Lock or Erase all the data from the phone remotely. If somehow your android mobile phone / tablet has been lost or stolen use ADM immediately to find location or lock the phone with a password and erase everything from your mobile phone. Read also : How to setup AdSense page level ads.

How to Setup Android Device Manager

Before using ADM, you …