CSS – Create a Fixed Icon Bar
Some sites have a fixed icon bar sitting off to the side of the screen with their social channels always being displayed. This is how to create one.
CSS – Create a Loading Spinner
Using pure CSS animation you can create a loading spinner for your site.
CSS – Create a Polaroid-Type Image
Before we all had cameras in our phones, people could take a Polaroid photo which would print directly from the camera, and had a unique, framed look.
CSS – Create a Team Member Image Rollover
If your site has a team member page with images, names, phone, email, etc., you can create rollovers to show all the pertinent info for each team member.
CSS – Disable a Form Input
You may have a form field that auto populates information via JavaScript so you need to disable the input so that the user cannot change the value.
CSS – Disable a Text Link
There may come a time when you have an HTML text link that needs to be temporarily disable for some reason (perhaps it’s auto-created by a CMS, but the page is not yet finished).
CSS – Expand a Search Field When in Use
To give a site an interesting and modern feel, the transition property can be used to expand the length of the search field when the user clicks into it.
CSS – Fading in a Page on Load
Fading in a page on load can give site items like a sidebar or icon boxes that load slowly the time to finalize their size/color without the user noticing.
CSS – Getting a Pre Tag to Wrap Long Lines
HTML pre tags are used to format text just as it is written, whitespace and all. However, you may want to allow long lines of text/code to wrap.
CSS – Hide Placeholders when the Field has Focus
Placeholders are text shown inside a form field that suggests to the user the type of input requested. They can be hidden with CSS when the field has focus.
CSS – Replace Text Using Position and Visibility
Replacing text is usually done on the server side or with JavaScript, but there may be times when replacing text using CSS is the only viable solution.
CSS – Transition the Fill Color for an SVG
When you have an SVG on your site and need to transition the fill color on hover, for instance, you need to set the fill in CSS as well as the SVG itself.