mhulse / css-issues

Practical CSS code snippets and examples.
11 stars 1 forks source link
copy-paste css css3 snippets

CSS Issues

Practical CSS code snippets and examples.

Table of contents

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 

Description Issue #
Flexbox full page body and html with sticky header and footer 183
Two column layout with flexbox enhancement 181
Another flexbox layout (login landing page) 119
Flexbox sticky footer 112
Flexbox full screen layout with header and footer 105
Flexbox tips 95
Flexbox items in a line, with one element taking up leftover space 91
Flexbox lines centered content 86
Timer box 76
Flex split 75
Simple flexbox column layout with margins inbetween 18

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 

Description Issue #
Form radio and checkbox with label text that does not wrap under inputs 196
Flexbox full page body and html with sticky header and footer 183
Two column layout with flexbox enhancement 181
Bootstrap 4 grid tips 180
Input with button on same line, no widths 174
Align image right, left and center 169
Calc columns 158
Text on left, middle and right, same line 157
Source order, primary column/content first 156
Centering absolutely 155
Something on left, something on right, fluid 154
Simple two-column float, fixed left sidebar 153
Clearing floats 144
Better box model 143
Full page body and html 138
Sticky footer layout for IE9+ and modern browsers 132
Fix gaps between inline-block children without changing markup 122
Another flexbox layout (login landing page) 119
Horizontal Rules 113
Flexbox sticky footer 112
CSS columns masonry emulation 108
Flexbox full screen layout with header and footer 105
Flexbox items in a line, with one element taking up leftover space 91
Flexbox lines centered content 86
Flex split 75
waffle grid thingy 58
Viewport and calc 48
Hero gradient overlay 34
Simple flexbox column layout with margins inbetween 18
Fixed column 16

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