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 is a better way:…
Accessibility, 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 Cursor Showcase»
View, experience and choose a cursor for your application.
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 <strong>multiple</strong></p> <div class="tab"><input id="tab-one" name="tabs" type="checkbox" /> <!--can open several tabs at once--> <label for="tab-one">Label One</label> <div class="tab-content">…
CSS, Javascript | Type: CSS
CSS-only Mobile Menu»
Mobile menu that doesn't use javascript. Uses hidden checkbox to toggle state.
CSS, Responsive | Type: CSS
Eliminate Blue Outline on PopupMaker Content»
.popmake-content { outline:none!important; }
CSS | Type: CSS
Embed Responsive YouTube Videos»
First, the CSS: .youtube-video { aspect-ratio: 16 / 9; width: 100%; } Then add the class to the iframe embed code: <iframe class="youtube-video" src="https://www.youtube.com/embed/xxxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;…
CSS, Responsive, Video | Type: CSS
