mhulse / css-issues

Practical CSS code snippets and examples.

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
• Print
• 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 

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