CSS Issues
Practical CSS code snippets and examples.
Table of contents
- Animation
- Bootstrap
- Borders
- Boxes
- Buttons
- Colors
- Effects
- Flexbox
- Font Awesome
- Forms
- Globals
- Images
- JavaScript
- Layout
- Links
- Lists
- Media
- Miscellaneous
- Navigation
- Research
- Responsive
- Tables
- Typography
- Utility
- iOS
Animation 
| Description | Issue # |
|---|---|
| Animated ellipsis … | 87 |
| Make something blink | 79 |
| Animating things on hover | 28 |
Bootstrap
| Description | Issue # |
|---|---|
| Bootstrap 4 grid tips | 180 |
| BootStrap 3 semantic/contextual colors | 136 |
| Bootstrap3 showing/hiding utils | 125 |
| JS/css breakpoint mingle | 123 |
| Bootstap 4 contextual colors | 114 |
| Brand colors | 70 |
| Pull left and right | 60 |
| Bootstrap close button | 59 |
| Bootstrap 4 font stack | 21 |
Borders
| Description | Issue # |
|---|---|
| Multiple-border box | 177 |
| Css circle | 23 |
Boxes
| Description | Issue # |
|---|---|
| Multiple-border box | 177 |
| Fix gaps between inline-block children without changing markup | 122 |
| Highlight box | 107 |
| Timer box | 76 |
| Callout CSS and html | 69 |
| Hero gradient overlay | 34 |
| Css circle | 23 |
Buttons
| Description | Issue # |
|---|---|
| Hover highlight using background image | 184 |
| Input with button on same line, no widths | 174 |
| Font Awesome icons | 165 |
| Logo background image | 151 |
| Cool Button | 124 |
| Bootstrap close button | 59 |
| Title or button with line behind it in center | 56 |
| Play button image | 52 |
| Button class | 40 |
| Cursor hand pointer (finger) | 20 |
Colors
| Description | Issue # |
|---|---|
| BootStrap 3 semantic/contextual colors | 136 |
| Bootstap 4 contextual colors | 114 |
| Brand colors | 70 |
Effects
| Description | Issue # |
|---|---|
| Highlight outline text with no shift | 129 |
| Gradient text | 126 |
| Funky ass animated link hover underline shit | 110 |
| box shadow underline | 84 |
| Animated box shadow | 47 |
| Hero gradient overlay | 34 |
| Top/bottom inset borders | 27 |
| Global link transitions | 10 |
Flexbox
Font Awesome
| Description | Issue # |
|---|---|
| Font Awesome icons | 165 |
| Blockquotes using FontAwesome | 152 |
| Font Awesome checkbox and radios | 109 |
| Fontawesome Plus and minus for accordion-like headings | 98 |
| Font-awesome svg rounded icon | 92 |
Forms
| Description | Issue # |
|---|---|
| Form radio and checkbox with label text that does not wrap under inputs | 196 |
| Text area that grows as you type | 179 |
| Input with button on same line, no widths | 174 |
| Search box | 160 |
| Custom select box | 116 |
| Font Awesome checkbox and radios | 109 |
| Styling placeholder text | 104 |
| Forms | 49 |
Globals
| Description | Issue # |
|---|---|
| Better box model | 143 |
| Hide semantically “untitled” empty headings | 141 |
| Full page body and html | 138 |
| Overflow html/body auto | 83 |
| Selection | 35 |
| .h1 - .h6 | 4 |
Images
| Description | Issue # |
|---|---|
| Proportional scaling image element | 176 |
| Image captions | 170 |
| Align image right, left and center | 169 |
| Remove outline from a linked image | 168 |
| Responsive images | 167 |
| Aliased images | 161 |
| Logo background image | 151 |
| Paralax | 65 |
JavaScript
| Description | Issue # |
|---|---|
| Hide/show with .no-js/.js classes | 195 |
| Basic accordion using jQuery | 188 |
| JS/css breakpoint mingle | 123 |
Layout
Links
| Description | Issue # |
|---|---|
| Disable pointer events (mouse click) | 186 |
| Hover highlight using background image | 184 |
| Remove outline from a linked image | 168 |
| Disable iOS callout on click | 164 |
| Remove link outline | 146 |
| Links | 140 |
| Funky ass animated link hover underline shit | 110 |
| box shadow underline | 84 |
| Social icons and shit | 68 |
| Bold hover | 24 |
| Global link transitions | 10 |
Lists
| Description | Issue # |
|---|---|
| Custom list counter with nested lists | 191 |
| Custom list counter | 178 |
| Default list styles | 73 |
| Lists | 50 |
Media
| Description | Issue # |
|---|---|
| Proportional scaling image element | 176 |
| Image captions | 170 |
| Align image right, left and center | 169 |
| Responsive media wrapper | 150 |
| Background video | 131 |
| New MM | 53 |
| Play button image | 52 |
| More media stuffs | 17 |
Miscellaneous
| Description | Issue # |
|---|---|
| Disable pointer events (mouse click) | 186 |
| Attribute Selectors | 135 |
| Gradient text | 126 |
| On the topic of units | 117 |
| Pure CSS tabs/accordion | 103 |
| Crosshairs with CSS | 96 |
| Non-empty attributes | 90 |
| Ear | 78 |
| Arrows/triangles | 77 |
| Pattern overlays | 66 |
| Modal background cover | 54 |
| Animated box shadow | 47 |
| Non-scrollable body when modal or slide nav are open | 46 |
| Top/bottom inset borders | 27 |
| Wiffle faux column borders | 26 |
| Css circle | 23 |
| Cursor hand pointer (finger) | 20 |
Navigation
| Description | Issue # |
|---|---|
| Basic accordion using jQuery | 188 |
| Breadcrumb examps | 63 |
Print
| Description | Issue # |
|---|---|
| Grayscale printing | 163 |
| Exact color printing | 162 |
Research
| Description | Issue # |
|---|---|
| On the topic of units | 117 |
| CSS flags | 89 |
| Alternative to normalize | 88 |
| When to rem/em | 22 |
| adjacent sibiling combinator | 9 |
Responsive
| Description | Issue # |
|---|---|
| Two column layout with flexbox enhancement | 181 |
| Responsive images | 167 |
| Responsive media wrapper | 150 |
| Responsive scrolling box | 149 |
| JS/css breakpoint mingle | 123 |
| Overflow html/body auto | 83 |
Tables
| Description | Issue # |
|---|---|
| Tables spacing | 199 |
| Table with alternating colors for rows and columns | 198 |
| Table with colored left column | 190 |
| Table column widths | 189 |
| Zebra stripes | 100 |
| Table styles | 72 |
Typography
| Description | Issue # |
|---|---|
| Multi-line padded text | 166 |
| Blockquotes using FontAwesome | 152 |
| Stop words from breaking out of containers | 148 |
| Multi-line padded text | 142 |
| Hide semantically “untitled” empty headings | 141 |
| Font stacks | 137 |
| Justified left CSS text | 130 |
| Gradient text | 126 |
| Better Helvetica | 94 |
| Ellipsis | 93 |
| Title or button with line behind it in center | 56 |
| Blockquote style | 55 |
| Font-sizing 62.5% and rems | 25 |
| Bold hover | 24 |
| When to rem/em | 22 |
| Bootstrap 4 font stack | 21 |
| Baseline grid css | 5 |
| .h1 - .h6 | 4 |
Utility
| Description | Issue # |
|---|---|
| Hide child element using text-indent | 201 |
| Hide/show with .no-js/.js classes | 195 |
| CSS debug utility | 187 |
| Disable pointer events (mouse click) | 186 |
| Responsive scrolling box | 149 |
| Fix margin collapse | 147 |
| Remove link outline | 146 |
| Hide an element | 145 |
| Clearing floats | 144 |
| Remove first and last margin from children in container | 128 |
| Bootstrap3 showing/hiding utils | 125 |
| JS/css breakpoint mingle | 123 |
| tidy | 101 |
| Disable selection | 97 |
| Ellipsis | 93 |
| Pull left and right | 60 |
iOS
| Description | Issue # |
|---|---|
| Disable iOS callout on click | 164 |