1
00:00:02.02 --> 00:00:03.05
- [Chris] Hi, this is Chris Converse

2
00:00:03.05 --> 00:00:06.03
and in this episode we'll
blur an image with CSS.

3
00:00:06.03 --> 00:00:08.01
This will give us the
ability to adjust the design

4
00:00:08.01 --> 00:00:10.09
for readability without the
need to alter the original image

5
00:00:10.09 --> 00:00:12.06
in a graphics application.

6
00:00:12.06 --> 00:00:14.00
So if you'd like to follow along

7
00:00:14.00 --> 00:00:15.04
download the Exercise Files

8
00:00:15.04 --> 00:00:20.06
and we'll begin by opening the
HTML file in a text editor.

9
00:00:20.06 --> 00:00:23.02
Now once you have the HTML
file open in a text editor

10
00:00:23.02 --> 00:00:25.00
you'll see up in the
head area we have a link

11
00:00:25.00 --> 00:00:27.02
to a file called style.css,

12
00:00:27.02 --> 00:00:29.04
we'll be opening this in a moment.

13
00:00:29.04 --> 00:00:30.09
And if you open this in a web browser

14
00:00:30.09 --> 00:00:33.01
you'll see the beginnings of our layout.

15
00:00:33.01 --> 00:00:35.06
Now the first thing we
need to do is add the image

16
00:00:35.06 --> 00:00:38.05
into the HTML, so we can style it with CSS

17
00:00:38.05 --> 00:00:40.02
and add our blur effect.

18
00:00:40.02 --> 00:00:45.02
And I want the image to be
behind our main element here.

19
00:00:45.02 --> 00:00:47.06
So after the body element
before the main element

20
00:00:47.06 --> 00:00:50.04
let's come in here and add our image.

21
00:00:50.04 --> 00:00:52.07
So we'll type image space,

22
00:00:52.07 --> 00:00:55.00
we'll set the source equal to,

23
00:00:55.00 --> 00:00:56.05
let's go into the images directory

24
00:00:56.05 --> 00:00:59.06
and choose background.jpg,

25
00:00:59.06 --> 00:01:01.08
then we'll end the image tag.

26
00:01:01.08 --> 00:01:04.06
And now when we apply
the blur effect in CSS

27
00:01:04.06 --> 00:01:07.01
we'll be able to see the
blurring on the edges,

28
00:01:07.01 --> 00:01:08.07
and this isn't very attractive.

29
00:01:08.07 --> 00:01:10.09
So what we're going to
do is put this image

30
00:01:10.09 --> 00:01:13.04
in another container in a div element,

31
00:01:13.04 --> 00:01:15.05
so we can actually scale
this up a little bit

32
00:01:15.05 --> 00:01:16.08
and crop out the edges,

33
00:01:16.08 --> 00:01:19.09
so we don't see the blurring
effect on the edges.

34
00:01:19.09 --> 00:01:23.02
So I'm going to Tab in the image element,

35
00:01:23.02 --> 00:01:24.09
and then before the image element

36
00:01:24.09 --> 00:01:28.06
let's add a div element, then a space,

37
00:01:28.06 --> 00:01:35.04
let's add a class on this
called background_image,

38
00:01:35.04 --> 00:01:37.06
then we'll end the div element,

39
00:01:37.06 --> 00:01:38.08
and then after the image element

40
00:01:38.08 --> 00:01:40.09
let's come in here and end the div.

41
00:01:40.09 --> 00:01:42.07
So again, this container
is going to allow us

42
00:01:42.07 --> 00:01:45.09
to crop out the edges of the blurring.

43
00:01:45.09 --> 00:01:47.09
So with this in place save your HTML.

44
00:01:47.09 --> 00:01:50.03
Let's go back to our Exercise Files,

45
00:01:50.03 --> 00:01:55.01
let's find styles.css, let's open this up,

46
00:01:55.01 --> 00:01:57.07
let's scroll down to the
bottom of the CSS file

47
00:01:57.07 --> 00:02:00.04
after the main selector rule here.

48
00:02:00.04 --> 00:02:06.06
And let's start by targeting
the background class.

49
00:02:06.06 --> 00:02:09.07
So we'll type
.background_image, then a space,

50
00:02:09.07 --> 00:02:13.04
put in our brackets,
let's split this open,

51
00:02:13.04 --> 00:02:14.08
and then first property we're going to set

52
00:02:14.08 --> 00:02:16.09
is going to be position.

53
00:02:16.09 --> 00:02:20.04
We're going to set this to absolute.

54
00:02:20.04 --> 00:02:26.00
Next line, let's set a
left property of 0 pixels.

55
00:02:26.00 --> 00:02:29.02
Next we'll set a bottom property,

56
00:02:29.02 --> 00:02:33.04
we're going to set this to 0 pixels.

57
00:02:33.04 --> 00:02:39.04
Next we'll set a width, we're
going to set this to 100%.

58
00:02:39.04 --> 00:02:44.06
Next line, we'll set a
height to 100% as well.

59
00:02:44.06 --> 00:02:48.07
And then finally, we'll set an
overflow property of hidden.

60
00:02:48.07 --> 00:02:51.03
So again, this is the container
that's holding the image,

61
00:02:51.03 --> 00:02:53.04
so anything that goes
outside of this container

62
00:02:53.04 --> 00:02:55.09
from that image will be
hidden from the browser.

63
00:02:55.09 --> 00:02:58.08
And this means we won't get
horizontal or vertical scrolling

64
00:02:58.08 --> 00:03:02.08
by making the image a little bit larger.

65
00:03:02.08 --> 00:03:04.08
So now after we create this rule

66
00:03:04.08 --> 00:03:06.04
let's come down here,
let's add another rule,

67
00:03:06.04 --> 00:03:11.05
and let's target the image
inside of the background class.

68
00:03:11.05 --> 00:03:16.07
So background_image, space, img,

69
00:03:16.07 --> 00:03:19.02
targeting the image inside.

70
00:03:19.02 --> 00:03:23.04
Let's come in here and set
a width property to 100%,

71
00:03:23.04 --> 00:03:25.08
and then on the next line
let's add a filter property

72
00:03:25.08 --> 00:03:28.03
where we can set our blur.

73
00:03:28.03 --> 00:03:31.06
So we'll type filter: space,

74
00:03:31.06 --> 00:03:35.07
then the word blur, (), then a ;,

75
00:03:35.07 --> 00:03:37.01
and then inside of the parentheses

76
00:03:37.01 --> 00:03:41.05
we'll set a blur of 7
pixels, so we'll type 7px.

77
00:03:41.05 --> 00:03:43.02
And now with these CSS rules in place

78
00:03:43.02 --> 00:03:44.09
if you save your CSS and
go back to the browser

79
00:03:44.09 --> 00:03:46.08
and hit reload we'll now see the image

80
00:03:46.08 --> 00:03:49.03
is being blurred and positioned.

81
00:03:49.03 --> 00:03:51.06
Now the blurring effect I was
talking about on the edges

82
00:03:51.06 --> 00:03:54.03
can be seen over here on the sides,

83
00:03:54.03 --> 00:03:56.00
so we want to crop this out.

84
00:03:56.00 --> 00:03:58.07
So what we're going to do is make
the image a little bit larger

85
00:03:58.07 --> 00:04:03.02
and position the image
inside of its container.

86
00:04:03.02 --> 00:04:06.01
So back to our CSS, I'll
scroll up here a little bit,

87
00:04:06.01 --> 00:04:08.01
let's come in here and change
some of the properties.

88
00:04:08.01 --> 00:04:12.00
So for the width let's
change this to 110%,

89
00:04:12.00 --> 00:04:14.06
so it will be 10% larger
than the container,

90
00:04:14.06 --> 00:04:17.00
which is defined up here.

91
00:04:17.00 --> 00:04:18.03
Then after the blur property

92
00:04:18.03 --> 00:04:21.00
let's come in here and add
a few additional properties.

93
00:04:21.00 --> 00:04:22.09
Let's start with the position value,

94
00:04:22.09 --> 00:04:25.08
let's set this to absolute.

95
00:04:25.08 --> 00:04:29.03
On the next line we're going
to set a left property,

96
00:04:29.03 --> 00:04:30.04
and for the left property

97
00:04:30.04 --> 00:04:33.07
we're going to set this to negative 5%.

98
00:04:33.07 --> 00:04:36.04
Since we're increasing
the overall width by 10%

99
00:04:36.04 --> 00:04:38.07
I want the left side to be 5%,

100
00:04:38.07 --> 00:04:40.07
which is half of the 10% larger size,

101
00:04:40.07 --> 00:04:44.01
to be cropped off to the left.

102
00:04:44.01 --> 00:04:45.08
And then let's come in here
and set a bottom property

103
00:04:45.08 --> 00:04:48.06
to negative 5% as well.

104
00:04:48.06 --> 00:04:53.07
And then finally we'll come in
here and set a opacity to .8.

105
00:04:53.07 --> 00:04:55.06
With those in place save your CSS,

106
00:04:55.06 --> 00:04:56.09
go back to the browser,

107
00:04:56.09 --> 00:04:58.00
we'll now see that our image

108
00:04:58.00 --> 00:05:00.08
is 10% larger than the container,

109
00:05:00.08 --> 00:05:02.04
it touches all four sides,

110
00:05:02.04 --> 00:05:04.01
and we don't see that
effect of the blurring

111
00:05:04.01 --> 00:05:06.09
happening on the edges.

112
00:05:06.09 --> 00:05:08.08
And so using the filter
and opacity properties

113
00:05:08.08 --> 00:05:10.04
we're able to modify the appearance

114
00:05:10.04 --> 00:05:13.00
of an image using only CSS.

115
00:05:13.00 --> 00:05:15.02
And so with that I'll
conclude this episode.

116
00:05:15.02 --> 00:05:18.01
And as always, thanks for watching.