Web Development

<div class="blog-teaser">
  <h3>The Button we're going to be making:</h3>
  <div>
    <button class="linear-gradient-button-example">Hover Me!</button>
  </div>
</div>


CSS3 Gradients provides us developers with endless opportunities to be creative with our UI. We often use gradients to produce aesthetic backgrounds spanning two or more colors across an element in a smooth transition. Today, we're going to be using these gradients in a different manner, ensuring each transition between colors will be a sharp, non-blended conversion.

This can be achieved by specifying the points in which the gradient will be changing to different colors. We can do this by introducing a parameter for positioning, placed after each color declaration. A simple two-colored gradient with a sharp transition would look something like this:

``` css
background-image: linear-gradient(to left, hotpink 0%, hotpink 50%, purple 50%, purple 100%)
```
The block of code you can see above would produce the below gradient.

<div class="linear-gradient-example"></div>

In order to create some stylish button hover states using gradients, we will be adding our styles to the button, which will likely be inserted using a `<button>`, or an `<a>` tag. Then, using `background-size`, we would apply the size `100%` to our element the gradient, making sure only the **second** half of the gradient is being shown.

In this example, I am going to be initially setting the `background-position` to 100%, so it will show the second half (which will render purple) of the gradient, and then specifying `background-position: 0%` in the hover state. This is because I prefer the transition to carry out from left to right, rather than right to left. Feel free to use whichever you'd prefer in your own project!

``` css
.button {
  background-image:linear-gradient(
    to left, 
    hotpink 0%,
    hotpink 50%,
    purple 50%,
    purple 100%
  );
  background-size:200%;
  background-position:100%;
  transition:all .3s ease-in-out;
}

.button:hover {
  background-position:0%;
}
```

Above is the barebones needed for a gradient-based hover state. Now, we're going to be adding the gradient angle, and other awesome styles required to create the awesome button at the top of the page.

Firstly, we're going to change `to left`, to a degree value of our choice. I'm going to go with `-70deg`, but please play around with these numbers and find your favorite!

Then, we'll add `transform: scale(1.05)`, and the `box-shadow`. These are used together as the scale property allows us to enlarge the button without moving around the other elements on our page, and the box-shadow works perfectly in making the button look like it's jumping up out of the screen!

The final code for the button seen at the top of the page is as follows:

``` css
.button {
    background-image: linear-gradient(
      -70deg, 
      hotpink 0%,
      hotpink 50%,
      purple 50%,
      purple 100%
    );
    background-size: 220%;
    background-position: 100%;
    transition: all .3s ease;
  
    /* Unnecessary styling */
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-shadow: -1px 0px 1px rgba(0,0,0,.7);
}
  
.button:hover {
    background-position: 0%;
    transform: scale(1.05);
    box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0.15);
}
```

<div><a href="https://codepen.io/Kubsz/pen/MWedvyy" target="_blank" rel="noopener">View Example Codepen</a></div>

Utilizing gradients to create stylish hover states

thumbnail_kubs.jpg

kubs.jpg

Web Developer

Web Design

Using CSS to position a footer at the bottom of the page should be such a simple concept, but for many reasons, it can be an extremely tedious task that could take up valuable development time. 

In this method, we're going to be using flexbox to achieve our goal, wrapping the footer and other main page elements in a flex container.

Firstly, let's run through the specific components that make up our average webpage:
- **Navigation bar**: sticks to the top of the page, likely to never move
- **Footer**: rests at the bottom of the page after all of the content in the body has rendered
- **Body**: contains all the content between the nav and the footer

![Website page structure](https://api.csslab.app/uploads/page_structure_23b8f2f776.png "Website page structure")

In order to achieve our goal, we're going to be grouping all of these elements together in a very large flex container, I'll call it '.content'. We can achieve the same result by setting these styles to the ```<body>``` tag as long as your nav, body, & footer are direct children to the body. Don't worry, it will make sense why we're doing this in no time.  Below is the HTML & CSS required for our page structure.

``` html
<div class="content">
    <nav> Nav </nav>
    <section> Body </section>
    <footer> Footer </footer>
</div>
```
``` css
.content {
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
```
Once our flex container has been set with a minimum height of the users' viewport height, we can discuss the issue.

A very common issue when it comes to styling a footer occurs when it doesn't stick to the bottom of the page, instead, resting below all of our body content. We're going to be tackling this issue by ensuring the body content grows to consume all of the remaining whitespace on the viewport that the footer would otherwise sit above. This is achieved by setting the below-stated flex property to the **body** container of all of your content.

``` css
section {
    flex-grow:1;
}
```
That's it! The body content should grow to fill the remaining whitespace that the page footer or nav doesn't take up. This is my favorite solution to ensure the footer sticks to the bottom of the page no matter what the document height is!

The full source code for this blog as well as a working CodePen is below.

``` html
<body>
  <div class="content">
    <nav>
      Nav
    </nav>
    <div class="body">
      Body
    </div>
    <footer>
      Footer
    </footer>
  </div>
</body>
```
``` css
body {
  margin:0;
  min-height:100vh;
}
.content {
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
nav {
  background-color:salmon;
  height:100px;
}
.body {
  background:lightpink;
  height:200px;
  flex:1;
}
footer {
  background:hotpink;
  height:150px;
}
```

<div><a href="https://codepen.io/Kubsz/pen/dyXEbEM" target="_blank" rel="noopener">View Example Codepen</a></div>

Vertically positioning footer once and for all using flexbox

<div class="blog-teaser">
  <h3>The hamburger we're going to be making:</h3>
  <div class="full-width">
<button class="hamburger--3">
  <input class="checkbox" type="checkbox">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>
</div>
</div>

When it comes to creating responsive navigation bars, utilizing hamburger menu icons tied with a side menu is one of the most well-known methods available. A good rule of UX is to reward the user with different **states** as they click buttons throughout your website to help them visualize different interactions within the application, this can be achieved really well with a click effect on a hamburger.

The awesome thing about a hamburger icon is that it can be smoothly & easily transitioned into an **X**, which is a great icon for a close button.

### The HTML Structure
The most simple method to produce this, would be to create a button, with three `<span>` elements as seen below:

``` html
<button class="hamburger">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>
```

###  Styling the Hamburger

Once this is created, we can convert the button to an adequate shape which can fit 3 bars vertically aligned on top of each other using the below CSS declarations:

```css
/* remove default button styling  */
button {
  outline:none;
  background-color:transparent;
  border:none;
}

.hamburger {
  width:60px;
  height:40px;
  background-color:transparent;
  position:relative;
}

.bar {
  height:8px;
  width:100%;
  position:absolute;
  left:0;
  
  background-color:#000;
  border-radius:4px;
}

/* style each bar */
.bar:nth-of-type(1) {
  top:0;
}
.bar:nth-of-type(2) {
  top:calc(50% - 4px);
}
.bar:nth-of-type(3) {
  top:calc(100% - 8px);
}
```

What we've got so far:

<div class="full-width">
<button class="hamburger--1">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>
</div>

### Planning the Animation
Now we have the initial state setup, we need to do a few things:

1. Decide what event will handle the button animation (hover, click, ect)
2. Choose a way to handle the event
3. Animate the button when the event is called

I'll be showcasing in this blog, the two most common methods to handle events. The event I will be using will be a **click** event. But before we do anything,  we have to create an active class and style that bad boy!

In order to convert the hamburger into an **X**, we have to undertake a couple of steps. Firstly, the middle bar has to go. I'll be using opacity:0 to hide the element, as that will eliminate any possibility for it to shift around any other elements. I will access the 2nd bar, by using the `nth-of-type(n)` pseudo-element. 

```css
.hamburger--active .bar:nth-of-type(2) {
  opacity:0;
}
```

<div class="full-width">
<button class="hamburger--1">
  <span class="bar"></span>
  <span class="bar" style="opacity:0"></span>
  <span class="bar"></span>
</button>
</div>

Now, we have to style the other two bars. Both bars will need to be vertically centered. In order to achieve this, we must set the `top` property to 50%.

This doesn't quite achieve what we want, however, as our `transform-origin` is set by default to the top left of the element. This means the property `top: 50%` will not account for the 8px of thickness the bar has. Which will result in a bar slightly further down than we want, and no one likes an unsymmetrical cross!

In order to fix this, we need to transform the element on the Y-axis by 50% of its thickness (4px).

```css
.hamburger--active .bar:nth-of-type(1),
.hamburger--active .bar:nth-of-type(3) {
  transform:translateY(-50%);
  top:50%;
}
```

Great! Our bars are vertically centered, on top of each other for now:

<div class="full-width">
<button class="hamburger--2">
  <span class="bar" style="transform:translateY(-50%);top:50%"></span>
  <span class="bar" style="opacity:0"></span>
  <span class="bar" style="transform:translateY(-50%);top:50%"></span>
</button>
</div>

Now, to the rotation. It's quite simple! All we have to do is add a 45deg  and -45deg rotation to the elements respectively: 

```css
.hamburger--active .bar:nth-of-type(1) {
  transform:rotate(45deg);
}
.hamburger--active .bar:nth-of-type(3) {
  transform:rotate(-45deg);
}
```

<div class="full-width">
<button class="hamburger--2 hamburger--2--active">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>
</div>

### Handling Events & States
Awesome, to the methods of event handling, the first is using Javascript! This method requires an event listener to be attached to the button, then adding a class to the button to change the styling.

```js
const button = document.querySelector('.hamburger');

const handleClick = (e) => button.classList.toggle('hamburger--active');

button.addEventListener('click', handleClick);
```

The next method is called the checkbox hack and works with **no Javascript**, which consists of adding a transparent checkbox above the button, and styling the button according to the `input:checked` pseudo-element, using the `~` adjacent sibling selector to target the individual bar elements.

The full code to achieve this is below:

```html
<button class="hamburger">
  <input class="checkbox" type="checkbox">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>
```

```css
/* remove default button styling  */
button {
  outline:none;
  background-color:transparent;
  border:none;
}

.hamburger {
  width:60px;
  height:40px;
  background-color:transparent;
  border:none;
  position:relative;
}

.checkbox {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
  opacity:0;
  
  cursor:pointer;
}

.bar {
  height:8px;
  width:100%;
  position:absolute;
  left:0;
  
  background-color:#FF70EC;
  border-radius:4px;
  
  transform-origin:center;
  transition:all .3s;
}
.bar:nth-of-type(1) {
  top:0;
}
.bar:nth-of-type(2) {
  top:calc(50% - 4px);
}
.bar:nth-of-type(3) {
  top:calc(100% - 8px);
}

.checkbox:checked ~ .bar:nth-of-type(2) {
  opacity:0;
}

.checkbox:checked ~ .bar:nth-of-type(1),
.checkbox:checked ~ .bar:nth-of-type(3) {
  transform:translateY(-50%);
  top:50%;
}
.checkbox:checked ~ .bar:nth-of-type(1) {
  transform:rotate(45deg);
}
.checkbox:checked ~ .bar:nth-of-type(3) {
  transform:rotate(-45deg);
}
```
<div class="full-width">
<button class="hamburger--3">
  <input class="checkbox" type="checkbox">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>
</div>

And there we go! You've added a hamburger animation to your awesome website! If you'd like to check out some more awesome menu icon hover animations, check out our [Menu Icon](https://csslab.app/menu-icons) components page.

CSSLab Blog

Creating awesome hamburger menu icon animations

Vertically positioning footer once and for all using flexbox

Utilizing gradients to create stylish hover states

csslab

CSSLab Links

Selections