Select Lesson
Margins quiz
5 min
Box shadow
2 min
Text shadow text-shadow:
5 min
Inset for box shadow box-shadow:
, inset
5 min
Multiple shadows
5 min
Browser support for shadows
3 min
Some background image CSS
5 min
Styling lists —ul
, ol
5 min
Lesson 18. Shadow effects
15 min
Special Styles Quiz
5 min
letter-spacing
property
5 min
Special Styles HTML/CSS
Level OneMargins quiz
5 min
Box shadow
2 min
Text shadow text-shadow:
5 min
Inset for box shadow box-shadow:
, inset
5 min
Multiple shadows
5 min
Browser support for shadows
3 min
Some background image CSS
5 min
Styling lists —ul
, ol
5 min
Lesson 18. Shadow effects
15 min
Special Styles Quiz
5 min
letter-spacing
property
5 min
60 min
Special Styles (optional)
These are some cool CSS you can apply to images
Code Avengers Quiz
Margins quiz
Concepts
Box shadow
The box-shadow
property adds a drop shadow to a box, image or text.
box-shadow: [horizontal offset] [vertical offset] [blur radius]
[optional spread radius] [color];
Parameter | Image |
---|---|
###The horizontal offset:
The horizontal offset determines the horizontal position of the shadow. A positive value will position the shadow to the right of the box and a negative offset will position the shadow to the left of the box. img {
| |
###The vertical offset:
The vertical offset determines the vertical position of the shadow. A negative offset will position the shadow above the box and a positive value will position the shadow below the box.
img {
| |
###The blur radius: (optional)
The blur radius controls the blur of your shadow. The higher the value the more blurred it will be, and the further the shadow will extend beyond the box. For example, a shadow with 3px vertical offset and a 3px blur radius, will have a 6px total shadow.
img {
| |
###The spread radius: (optional)
The spread radius controls the size of the shadow. Positive values increase size and negative decrease.
img {
| Color> |
###Color: (optional)
The color parameter controls the color of the shadow using hex,
named
, RGBa or
HSLa
color values. If the color value is omitted, box shadows are automatically made to match the foreground color (which is the text color). (Notes on color values →)
img {
Example color
Color used in the box shadow is
| Transparent> |
###Transparent color: (optional)
The color parameter can be transparent, if you use color systems with
alpha
values like RGBa or
HSLa
color values. EG rgba(88, 137, 210, .5) . This creates a nice shadowy effect and allows what is behind the image's box shadow to show through a bit, like a real shadow. (Notes on color values →)
img {
Example transparent colorColor used in the box shadow is the transparent version ofmediumSeaGreen :
rgba(126, 199, 166, .5) (RGBa), or
hlsa(153, 37%, 53%, .5) (HSLa)
|
Most HTML selectors can use box shadow
Remember that most elements can be thought of as boxes. Here are examples of a few:
Concepts
Text shadow text-shadow:
Now that we understand how the box-shadow property works, we can take a look at another CSS shadow property; text-shadow
. The text-shadow property is simpler than box-shadow and only uses four elements:
text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];
As you can see, all of these elements were used with box-shadow. So if you understood box-shadow, this will be easy for you.
Horizontal offset
Vertical offset
Example:
img {
text-shadow: 0px 10px #000;
text-shadow: [horiz. offset] [vert. offset] [color];
}
Blur radius (optional)
Example:
img {
text-shadow: 10px 10px 5px #000;
text-shadow: [horiz. offset] [vert. offset] [color];
}
Color (optional..but...)
Example:
div {
text-shadow: 5px 5px midnightBlue;
text-shadow: [horiz. offset] [vert. offset] [color];}
Color is not a required parameter but when the color is not added the color defaults to the text color...making everything every hard to read.
Concepts
Inset for box shadow box-shadow:
, inset
The box shadow can go inside the box. Once you understand the basics of box-shadow it is easy to jump into creating "inner" or "inset" shadows.
To make this happen, all we really need to do is add the word "inset" into our code. This is a great trick for making buttons look cool.
Inset values:
box-shadow: inset [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
Horizontal offset
div {
box-shadow: inset 0 0 20px #5e58d2;
}
Essentially all the values perform the same way, only the shadow is place inside of the box instead of outside. Each parameter impacts the over all look of the inner shadow. Below we have changed lots of the values, read them and look at the differences from button to button
Concepts
Multiple shadows
You can actually add more than one drop shadow to a box, image or piece of text using the same code we use for making a single shadow. To do this we set the shadow property to a comma-separated list of shadow values (We add the value information over and over again, separated by commas. )
Image
Lets add multiple colors to an image.
Heads up!
Notice we are swapping between in‑line and internal CSS in our examples, this is to remind you how you can use either, though internal is easier to read.Text
Concepts
Browser support for shadows
Box shadows work with the latest versions of all 5 popular web browsers.
Figure description:
The numbers in the table refer to the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- refer to the first version that worked with a prefix. (Optional) Here is more info on browser prefixes
Basically, not everyone updates their browsers and you should add code, like the code, below to make your code backwards compatible for those people.
Concepts
Some background image CSS
Add background
The background-image
property is used to set one or more background images for an element.
The background of an element includes not only the element but the padding and border (but not the margin).
The background is set by adding the following CSS code to your chosen element (in this case the html tag):
html{
background-image: url(???)
}
The URL will be the link to your desired image.
Transparent background image
There are other fun ways of enhancing the way your page looks. You can choose to use background-images that are semi transparent (these will be.png), which will allow the background color show through the image.
You can Google search an image and if you hit TOOLS and open the COLOR menu you can check TRANSPARENT.
It will filter your images so you can find an image with a checkerboard background that is see-through.
Take a look at this example:
Example:
Background shorthand
We can also short hand this code:
html {
background: lightcoral;
url(/images/textures/light14a.png);
}
A background-image is automatically placed at the top-left corner of an element and repeated vertically and horizontally. This can also be altered using CSS code.
background-repeat
background-repeat
controls the repetition of a background image.
The property accepts four values:
repeat
: normal setting.no-repeat
: image is displayed once without repetition.repeat-x
: image is repeated horizontally across the x-axis.repeat-y
: image is repeated vertically across the y-axis.
Example:
html{
background-repeat:no-repeat
}
background-position
background-position
controls the exact placement of an image by specifying the horizontal and vertical starting point in one of three ways.
We will cover two for now:
- Keywords: using two key words. The first one controls the horizontal position;
left, center, right
; and the second one controls the vertical position;top, center, bottom
.
ie : background-position: right bottom;
- Precise values: positions image using pixels or ems using two values. The first to specify the distance between the image's left edge and the container's left edge and the second to specify the distance between the image's top edge and the container's top edge.
ie. background-position: 50px 100px;
Learn the full range of values at W3schools
Concepts
Styling lists —ul
, ol
list-style-type
property
In html we were able to create bulleted and numbered lists using un-ordered<ul>
and ordered<ol>
lists.
But we don't always want to settle for the way the browser automatically formats the lists. We are able to change the type of bullets and numbers using the property list-style-type
.
Here is the CSS:
Types of bulleting
disc
circle
square
Types of numbering
decimal
decimal-leading-zero
upper-alpha
lower-alpha
upper-roman
lower-roman
Graphic bullets list-style-image
If your not satisfied with the squares and circles for your bullets you can create your own using the list-style-image
property. This allows you to specify a path to a graphic on your site and apply it to your bulleting.
Example:
In this example, the bullet point is replaced with an image of a star using the list-style-image property.
list-style-image: url(/images/goldStar.png);
HTML/CSS 1 Lesson
Lesson 18. Shadow effects
Code Avengers Quiz
Special Styles Quiz
Extension: Concepts
letter-spacing
property
Adjusts the space between text.
Negative Letter Spacing Tightens up the Text : -5px
Negative Letter Spacing Tightens up the Text : -3px
Negative Letter Spacing Tightens up the Text : -1px
No Letter Spacing
Positive Letter Spacing Spreads Text Out : 10px
Positive Letter Spacing Spreads Text Out : 5px
Positive Letter Spacing Spreads Text Out : 1px
Example:
h1{
letter-spacing:-1px
}
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F