Ricardo-Diaz

effect and adds shadow to the top of the box and the bottom. Looks like center is lifted.

The HTML

<div class="box effect7">
<h3>Effect 7</h3>
</div>
The CSS

.box h3{

Ricardo-Diaz

This effect will create a curved shadow at the bottom of the box.

The HTML

<div class="box effect6">
<h3>Effect 6</h3>
</div>
The CSS

.box h3{

Ricardo-Diaz

This is expands on the effect 2 and will increase the angle of the shadows.

The HTML

<div class="box effect5">
<h3>Effect 5</h3>
</div>
The CSS

.box h3{

Ricardo-Diaz

Effect 4 will lift the corner on the bottom right of the box.

The HTML

<div class="box effect4">
<h3>Effect 4</h3>
</div>
The CSS

.box h3{

Ricardo-Diaz

This uses half of the effect approve and will add a lifted corner to the bottom left of the box.

The HTML

<div class="box effect3">
<h3>Effect 3</h3>
</div>
The CSS

.box h3{

Ricardo-Diaz

This effect will add shadows to the bottom corners of the boxes to create a lifted corner look on the boxes. This effect uses both the :before and :after properties to create new elements used for the corners.

The HTML

<div class="box effect2">
<h3>Effect 2</h3>
</div>
The CSS

.box h3{

Ricardo-Diaz

//Creates a box shadow effect underneath
The HTML

<div class="box effect1">
<h3>Effect 1</h3>
</div>

The CSS

.box h3{

Ricardo-Diaz

//3D Button Effect

$bottomSide: #3852b1;
$rightSide: #203891;

.button, #rcp_submit {
  border: 0; // kill default styling
  background: #4e68c7;
  box-shadow:
    // right side           // bottom

Ricardo-Diaz

// Search Form HTML
<section class="search">
<!--Creates a box that expands-->
	<div class="open-search">
		<span data-icon""></span>
	</div>
	
	<!-- search box with options to search different options -->
	
	<div class="close-search">

Ricardo-Diaz

//Flex Images

figure img {
  max-width: 100%;
  height: auto !important;
}