CSS Shadow Effects
========== ======
With CSS you can add shadow to text and to elements. we have following properties for adding shadow to
content or tag.
1. text-shadow
2. box-shadow
1. text-shadow
===========
The CSS text-shadow property applies shadow to text.
here horizontal shadow (2px) and the vertical shadow (2px) are required values and we can also provide extra
blur value and required color value.
for example,
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
---->>The following example shows a white text with black shadow:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
---->> To add more than one shadow to the text, you can add a comma-separated list of shadows.
--->> The following example shows a red and blue neon glow shadow:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
----->> The following example shows a white text with black, blue, and darkblue shadow:
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
---->> You can also use the text-shadow property to create a plain border around some text (without
shadows):
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
======== =======
2. box-shadow
=========
The CSS box-shadow property applies shadow to elements or tag.
---->> if you want to specify only the horizontal shadow and the vertical shadow
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>
---->> Next, add a color to the shadow:
div {
box-shadow: 10px 10px grey;
}
---->> Next, add a blur effect to the shadow:
div {
box-shadow: 10px 10px 5px grey;
}
===== ==============
display property
======= =======
The display property is the most important CSS property for controlling layout or design of the our webpage.
Every HTML element has a default display value depending on what type of element it is. The default display
value for most elements is block or inline.
---->> if you want to hide any existing tag in html then we can use disply : none value
---->>if you want to display any hidden tag in html then we can use disply : block value
regular values for display property are ,
none --->> The element is completely removed
block --->> Displays an element as a block element (like <p>).
It starts on a new line, and takes up the whole width
inline --->> Displays an element as an inline element (like <span>).
Any height and width properties will have no effect
inline-block ---->> Displays an element as an inline-level block container.
The element itself is formatted as an inline element, but you can apply height and width
values
flex ---->> Displays an element as a block-level flex container
text-align property
========== ========
The text-align property specifies the horizontal alignment of text in an element.
To display the left side text inside an element, use text-align: left;
To display the right side text inside an element, use text-align: right;
To just center the text inside an element, use text-align: center;
justify --->> This value Stretches the lines so that each line has equal width (like in newspapers and
magazines)
text-align-last property
=============== =======
The text-align-last property specifies how to align the last line of a text.
Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if
you have a <div> with three paragraphs in it, text-align-last will apply to the last line of EACH of the
paragraphs.
syntax:
=======
text-align-last: auto|left|right|center|justify|
possible values are,
auto ---->> Default value. The last line is justified and aligned left
left ---->> The last line is aligned to the left
right ---->> The last line is aligned to the right
center ---->> The last line is center-aligned
justify ---->> The last line is justified as the rest of the lines
text-decoration property
============== ========
The text-decoration property specifies the decoration added to text, and it is a shorthand property for:
text-decoration-line (required)
text-decoration-color
text-decoration-style
text-decoration-thickness
CSS Syntax
==========
text-decoration: text-decoration-line text-decoration-color text-decoration-style text- decoration-
thickness
example:
=======
h1{
text-decoration: underline dotted blue 20%;
}
The text-decoration-line property sets the kind of text decoration to use (like underline, overline, line-
through).
text-decoration-line: none|underline|overline|line-through;
The text-decoration-color property specifies the color of the text-decoration (underlines, overlines, line-
through).
text-decoration-color : red;
The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed,
double).
text-decoration-style: solid|double|dotted|dashed|wavy;
The text-decoration-thickness property specifies the thickness of the decoration line.
text-decoration-thickness: auto|length/percentage;
text-transform property
============= ========
The text-transform property controls the capitalization of text.
text-transform: none|capitalize|uppercase|lowercase
none No capitalization. The text renders as it is. This is default
capitalize Transforms the first character of each word to uppercase
uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
user-select property
=========== ========
The user-select property specifies whether the text of an element can be selected.
In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to
prevent this.
user-select: auto|none|text|all;
for example,
auto --->> Default. Text can be selected if the browser allows it
none --->> Prevent text selection
text --->> The text can be selected by the user
all --->> Text selection is made with one click instead of a double-click
text-indent property
=========== =========
The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
text-indent: length;
################ ################## ####################
CSS Backgrounds
===============
The CSS background properties are used to add background effects for elements.
In these chapters, you will learn about the following CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)
CSS background-color
=====================
The background-color property specifies the background color of an element.
Example
=======
The background color of a page is set like this:
body {
background-color: lightblue;
}
With CSS, a color is most often specified by:
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
Opacity / Transparency
======== ===========
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The
lower value, the more transparent:
Example
=======
div {
background-color: green;
opacity: 0.3;
}
Note:
=====
When using the opacity property to add transparency to the background of an element, all of its child
elements inherit the same transparency. This can make the text inside a fully transparent element hard to
read.
Transparency using RGBA
============ =========
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The
following example sets the opacity for the background color and not the text:
Example
=======
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
CSS background-image
===================
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Example
=======
Set the background image for a page:
body {
background-image: url("paper.gif");
}
Note: When using a background image, use an image that does not disturb the text.
The background image can also be set for specific elements, like the <p> element:
Example
=======
p{
background-image: url("paper.gif");
}
CSS background-repeat
======================
The background-repeat property sets if/how a background image will be repeated.
By default, the background-image property repeats an image both horizontally and vertically.
background-repeat: repeat|repeat-x|repeat-y|no-repeat
If the image above is repeated only horizontally (background-repeat: repeat-x;)
To repeat an image vertically, set background-repeat: repeat-y;
Showing the background image only once is also specified by the background-repeat property:
background-repeat: no-repeat;
Q. Write a program to display multiple colors as Background to a Element?
======================= =============== =======================
Example:
========
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: linear-gradient(red, yellow, blue);
/*background-image: radial-gradient(red, green, blue);
/*background-image: repeating-linear-gradient(red, yellow 10%, green 20%);*/
/*background-image: repeating-radial-gradient(red, yellow 10%, green 15%);*/
/*background-image: conic-gradient(red, yellow, green);*/
/*background-image: repeating-conic-gradient(red 10%, yellow 20%);
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>
This demo shows some different techiques on how to set a background image of a HTML element.
</p>
</body>
</html>
