I'd like to interrupt the regularly scheduled broadcast to bring you the news that the EU will be holding a moment of silence today at noon, for Paris.
For those not in the know, a rash of terrorist attacks were carried out in Paris over the course of Saturday, 14th November. Facebook became awash in a sea of blue, white and red as users changed their profile pictures in a show of solidarity.
I'm just going to get into the act here, and show you how to slap an entire overlay of the blue-white-red on your website.
Take this HTML and the "lorem ipsum" text as your Average Joe website.
<!DOCTYPE html>
<html>
<head>
<title>Paris Demo</title>
<style type="text/css">
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
<html>
<head>
<title>Paris Demo</title>
<style type="text/css">
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Now add this div, and the paragraph. Google Translate tells me that it means "we are united". I'll have to take Google's word for it because my French is absolument merde.
<body>
<div id="paris_wrapper">
<p>#NousSommesUnis</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="paris_wrapper">
<p>#NousSommesUnis</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Modify as follows. This ensures that the overlay goes away upon being clicked.
<div id="paris_wrapper" onclick="this.style.display='none';">
<p>#NousSommesUnis</p>
</div>
<p>#NousSommesUnis</p>
</div>
Next, of course, is styling. Add the paris_wrapper CSS. Its width and height properties have been set to 100% to fill the entire screen. top and left are set to 0 for the same reasons. position is set to "fixed" to ensure that this overlay follows even if you scroll. That's for the layout.
For the rest of it,
cursor:pointer ensures that the user knows the overlay is clickable.
text-align:center justifies the text.
background-color:rgba(252,252,254,08.8) sets the white part of the overlay, semi-transparently.
<style type="text/css">
#paris_wrapper
{
width:100%;
height:100%;
top:0;
left:0;
position:fixed;
cursor:pointer;
text-align:center;
background-color:rgba(254,254,254,0.8);
}
</style>
#paris_wrapper
{
width:100%;
height:100%;
top:0;
left:0;
position:fixed;
cursor:pointer;
text-align:center;
background-color:rgba(254,254,254,0.8);
}
</style>
Next, we add another specification to style the text in the overlay. Mostly cosmetic. Modify as you see fit.
<style type="text/css">
#paris_wrapper
{
width:100%;
height:100%;
top:0;
left:0;
position:fixed;
cursor:pointer;
text-align:center;
background-color:rgba(254,254,254,0.8);
}
#paris_wrapper p
{
margin-top:10%;
color:#888888;
font-size:5em;
font-family:arial;
font-weight:bold
}
</style>
#paris_wrapper
{
width:100%;
height:100%;
top:0;
left:0;
position:fixed;
cursor:pointer;
text-align:center;
background-color:rgba(254,254,254,0.8);
}
#paris_wrapper p
{
margin-top:10%;
color:#888888;
font-size:5em;
font-family:arial;
font-weight:bold
}
</style>
Now, we add the blue and red parts of the overlay.
#paris_wrapper p
{
margin-top:10%;
color:#888888;
font-size:5em;
font-family:arial;
font-weight:bold
}
#paris_wrapper::before,#paris_wrapper::after
{
content:"";
display:block;
width:33%;
height:100%;
position:absolute;
top:0;
}
#paris_wrapper::before
{
left:0;
background-color:rgba(0,0,254,0.5);
}
#paris_wrapper::after
{
right:0;
background-color:rgba(254,0,0,0.5);
}
{
margin-top:10%;
color:#888888;
font-size:5em;
font-family:arial;
font-weight:bold
}
#paris_wrapper::before,#paris_wrapper::after
{
content:"";
display:block;
width:33%;
height:100%;
position:absolute;
top:0;
}
#paris_wrapper::before
{
left:0;
background-color:rgba(0,0,254,0.5);
}
#paris_wrapper::after
{
right:0;
background-color:rgba(254,0,0,0.5);
}
This basically adds two block-level elements to your paris_wrapper div, both with a width of 33% (because one-third of 100% is roughly that) and a height of 100%. They are then colored blue and red respectively and positioned.
Here you go. Hope this is helpful for your moment of silence.
Vive la francais,
T___T
T___T
No comments:
Post a Comment