CSS – Evo Web Dev

Accessible Hiding of Elements with CSS

Developers commonly use display: none to hide content on the page. Unfortunately, this simple and common action can be problematic for users of screen readers. Below [...]
Accessibility, CSS | Type: CSS

Add current class to post type navigation menu

The examples show posts (where the homepage is the blog list), but this works for any custom post type as well. I’ve used it forever; don’t [...]
CSS, Nav Menu, PHP | Type: PHP

Add Persistent Text-Resize Button

Example shows ‘bigger’ class added to all paragraphs on a page, but CSS targets specific paragraph types. jQuery toggles the class and also makes the class [...]
Accessibility, CSS, Javascript, jQuery | Type: Javascript

B&W Image to Color on Hover

Cool little bit of CSS magic. img.saturation { filter: saturate(0); } /*turns color image into B&W*/ img.saturation:hover { filter: saturate(1); } /*restores color*/
CSS | Type: CSS

Change background and color of Chrome autofill

.top .search-form input:-webkit-autofill, .top .search-form input:-webkit-autofill:hover, .top .search-form input:-webkit-autofill:focus, .top .search-form input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 100px #222 inset !important; -webkit-text-fill-color:#fff!important; }
CSS, Forms | Type: CSS

Child Theme Style Header

Header info for child theme style sheet.
Child Theme, CSS, WP/CP | Type: CSS

Clearfix

Maybe the most widely used clear after float.
CSS | Type: CSS

CSS Grid Layout

The smart way to do layout.
CSS | Type: CSS

CSS-only Accordians

When javascript doesn’t make the grade. HTML <div class="wrapper"> <div class="half"> <p>Open multiple</p> <div class="tab"><input id="tab-one" name="tabs" type="checkbox" />  <label [...]
CSS, Javascript | Type: CSS