Web_Designer_UK__May_2018

LightBox
Open Wear
Create an animated
slant box border effect
Create an effect for images and other types of content components that responds to user interaction
1. HTML initiation
The first step is to create the page document architecture
from HTML. This consists of the HTML document
definition, which holds the head and body sections. While
the head section is used to load the external CSS file, the
body section is used to store the HTML created in step 2.
Hover Frame: Slant
*** STEP 2 HERE
2. Visible HTML
The visible content consists of a series of containers
using the 'slant' class. You can place any content inside
these containers. This example uses an individual image
for each example container. The HTML is designed to be
kept to a minimum, without any unnecessary elements
for formatting or embedded styling.
3. CSS initiation
With the HTML now complete, create a new file called
'styles.css'. The first definition in this file sets the HTML
document and body container to display as a block with
no margin or padding. This guarantees that the page will
display without any visible border spacing. Optionally, you
could add other properties, such as setting their
min-height to 100%, meaning that the page is sized to fit
the full screen.
html,body{
display: block;
margin: 0;
padding: 0;
}
4. Container class
The slant container is identified using the 'slant' class.
This element uses relative positioning, along with an
inline-block display mode to allow it to flow as a normal
text item while having sizing-related properties if required.
Overflow is hidden to support the feature created in
steps 5 and 6.
.slant{
position: relative;
display: inline-block;
overflow: hidden;
}
5. Border slant
The slanted border feature is made from a box element
overlaying the content container. This is achieved using
the '::before' selector, which is used to define a virtual
element inside CSS. This is set to be placed at the bottom
of the slant container with a width and height that will
cover enough space for the effect to work.
.slant::before{
content: "";
display: block;
position: absolute;
bottom: -3em;
left: -2em;
width: 150%;
height: 6em;
}
6. More border slant
The border slant needs to match the page background
colour for the effect to work. Additionally, the element
needs to be rotated via the transform attribute so that it
doesn’t appear as a straight line. Finally, a transition with a
duration of one second is applied so that any changes to
the rotation transform appear animated.
.slant::before{
background: #fff;
transform: rotate(8deg);
transition: transform 1s;
}
7. Hovered slant
The rotation is required to change when the slant is
being hovered. This step sets the rotation angle when
this occurs. The changes that occur will appear animated
due to the previous step’s transition attribute. Changing
the -8 to another number will alter the angle that the
slant rotates towards.
.slant:hover::before{
transform: rotate(-8deg);
}
***
lightbox _________________________________________________21