Fun With Boxes by

# Fun with Boxes
## Borders

##### Catchy Title
Useful information

</div>

The default note box is simple and spans one column. You can add the "wide" class to extend it (or any element) across the page horizontally, but this may have unexpected effects on your formatting.

##### Catchy Title
Useful information

</div>

Getting rid of the border is easy, but I recommend a little padding, or else the text will look odd due to being flush with the edge of the box.

##### Catchy Title
Useful information

</div>

##### Catchy Title
Useful information

</div>

##### Catchy Title
Useful information

</div>

If you want to _alter_ the borders you'll find some unexpected behavior. This is because GM Binder uses the "border-image" CSS property. Specifically, the default is:
___
`url(/assets/img/sidebars.png) 12 stretch;`
___
you can alter this with a new image, or override it with standard CSS border attributes:

##### Catchy Title
Useful information

</div>

\columnbreak

```css
.decriptive {
    padding: 10px;
    border: none;
}
```
<div class='spacer invisible'></div>
<div class='spacer invisible'></div>

```css
.decriptive.n1 {
    border: red;
}
.decriptive.n2 {
    border-color: red;
}
.decriptive.n3 {
    border: solid red;
}
```
<div class='spacer invisible'></div>
<div class='spacer invisible'></div>
<div class='spacer invisible'></div>

```css
.decriptive {
    padding: 10px;
    border: 2px dotted red;
}
```

\pagebreak

## Colors

##### Catchy Title
Useful information

</div>

You can easily change the solid color of the background and text colors with "background-color" and "color" attributes, respectively. You can even replace the background with an image using the "background-image" property:

##### Catchy Title
Useful information

</div>

## Filters and blend modes

##### Catchy Title
Useful information

</div>

Note that if you want to change the color of an existing image, you need to use the "filter" attribute. Lots more detail on image manipulation in this excellent [watercolor guide](https://www.gmbinder.com/share/-Kx5i9fuxhuci6BUrbJq). Note that this does effect the _entire_ element. Including text, borders, etc. Great for a single hue theme, but bad if you want more colors in your palette.

##### Catchy Title
Useful information

</div>

##### Catchy Title
Useful information

</div>

You can use "opacity" or "mix-blend-mode" to give the box some of the page texture. There is also a "background-blend-mode" property which can be used with "background-image" and "background-color" to blend the background image with a solid color.

___

**Tldr**: If your goal is to overhaul the boxes, your best bet is to settle on an image or color for the background, then select an image for your borders. But you can use filters to do a lot with just the defaults.

\columnbreak

```css
.decriptive.n1 {
    background-color: red;
    color: white;
}
.decriptive.n2 {
    background-image: url("http://www.textures4photoshop.com/tex/thumbs/stained-paper-texture-seamless-for-photoshop-thumb44.jpg");
    color: darkslategray;
}
```

```css
.descriptive {
    filter: hue-rotate(60deg) saturate(8);
}
```

```css
.descriptive.n1 {
    background-color: #ffdfff;
    mix-blend-mode: multiply;
}
.descriptive.n2 {
    background-color: #ffdfff;
    opacity: 0.75
}
```