Nov. 21st, 2019
Fast & Easy Layout Enhancements

Four ways to spruce up
any layout!
Quick, stress-free layout enhancements!
Below are some common elements that are quick and easy to put into your layout, and are some of the most common 'little things' I see people using to really polish off their journals. If you've ever wondered how to do any of the following, here's how!Custom cursors
You can replace your custom cursor with any of the base cursors, but typically what I see a desire for is replacing your mouse cursor with images, so here's the code for that. You'll want to add this tobody
and a:hover
if you have a custom image for link hover. Example:body{cursor:url(body_cursor_image_url), auto;}
a:hover{cursor:url(link_hover_cursor_ima ge_url), auto;}
Add your image and plug it in where you want it!
cursor:url(cursor_url), auto;
Page Highlight
The background and text color when you select content on the page by clicking and dragging, double-clicking, or using select all.::selection{background:#000;color:#fff;}
::-moz-selection{background:#000;color:#f ff;}
Custom Scrollbar
A custom page scrollbar is a great way to add a little extra finish! Be sure to try outborder-radius
and inset box-shadow
for an extra polished look. RGBA color values with transparency will also work on these! You can also add :hover
selectors.::-webkit-scrollbar{width:5px;background:t ransparent;} /* sets the width of your scrollbar */
::-webkit-scrollbar-track{background:#00 0;} /* sets the background of the entire track */
::-webkit-scrollbar-thumb{background:#55 5;} /* sets the background of the scrollbar */
Hover Transitions
The way an element's hover function behaves; usually seen in links or image tags. You'll want to put this in the NON-hover state for a seamless transition and not the:hover
element. For example:a, a:active, a:visited, a:link{color:#000;transition:all 0.5s ease-in-out;}
a:hover{color:#ddd;}
This can be used for more than just colors. Try out opacity or a CSS filter on your images! You can find more transition options in this generator under Transitions, but for brevity's sake I've just added the one I use in most of my layouts for link hovers.
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;