Pens from Nathan Ford https://codepen.io/nathanford/ en nospam@codepen.io Copyright 2024 2015-09-18T17:25:40-07:00 A Pen by Nathan Ford https://codepen.io/nathanford/pen/VvaqeN https://codepen.io/nathanford/pen/VvaqeN Nathan Ford

See the Code - See it Full Page - See Details

]]>
A Pen by Nathan Ford 2015-09-18T17:25:40-07:00
A Pen by Nathan Ford https://codepen.io/nathanford/pen/GJQKgY https://codepen.io/nathanford/pen/GJQKgY Nathan Ford

See the Code - See it Full Page - See Details

]]>
A Pen by Nathan Ford 2015-06-30T15:50:41-07:00
A Pen by Nathan Ford https://codepen.io/nathanford/pen/bNYqwr https://codepen.io/nathanford/pen/bNYqwr Nathan Ford

See the Code - See it Full Page - See Details

]]>
A Pen by Nathan Ford 2015-02-06T13:25:23-07:00
Faking shape exclusion with pure CSS https://codepen.io/nathanford/pen/xxQZpJ https://codepen.io/nathanford/pen/xxQZpJ Nathan Ford

See the Code - See it Full Page - See Details

Wrapping the text of a single P element around an image without clearing the top or bottom. Implemented using a :before psuedo-element floated the same direction of the image, with -100% margin in the opposite direction of the float. Image distance from top depends on height of psuedo-element.

]]>
Faking shape exclusion with pure CSS 2014-09-17T15:18:38-07:00
Exploring float and clear understanding, continued https://codepen.io/nathanford/pen/rNvegJ https://codepen.io/nathanford/pen/rNvegJ Nathan Ford

See the Code - See it Full Page - See Details

Floats and clears can be confusing. Here are a set of examples to show how each combination of float and clear works.

]]>
Exploring float and clear understanding, continued 2014-08-11T12:44:34-07:00
Exploring float and clear understanding https://codepen.io/nathanford/pen/NWMNeN https://codepen.io/nathanford/pen/NWMNeN Nathan Ford

See the Code - See it Full Page - See Details

Floats and clears can be confusing. Here are a set of examples to show how each combination of float and clear works.

]]>
Exploring float and clear understanding 2014-08-11T11:40:33-07:00
Faking shape exclusion with pure CSS https://codepen.io/nathanford/pen/abqQVo https://codepen.io/nathanford/pen/abqQVo Nathan Ford

See the Code - See it Full Page - See Details

Wrapping the text of a single P element around an image without clearing the top or bottom. Implemented using a :before psuedo-element floated the same direction of the image, with -100% margin in the opposite direction of the float. Image distance from top depends on height of psuedo-element.

]]>
Faking shape exclusion with pure CSS 2014-07-30T13:34:00-07:00
Faking shape exclusion with pure CSS https://codepen.io/nathanford/pen/VwQVMj https://codepen.io/nathanford/pen/VwQVMj Nathan Ford

See the Code - See it Full Page - See Details

Wrapping the text of a single P element around an image without clearing the top or bottom. Implemented using a :before psuedo-element floated the same direction of the image, with -100% margin in the opposite direction of the float. Image distance from top depends on height of psuedo-element.

]]>
Faking shape exclusion with pure CSS 2014-07-30T13:31:04-07:00
Faking shape exclusion with pure CSS https://codepen.io/nathanford/pen/GRQwvW https://codepen.io/nathanford/pen/GRQwvW Nathan Ford

See the Code - See it Full Page - See Details

Wrapping the text of a single P element around an image without clearing the top or bottom. Implemented using a :before psuedo-element floated the same direction of the image, with -100% margin in the opposite direction of the float. Image distance from top depends on height of psuedo-element.

]]>
Faking shape exclusion with pure CSS 2014-09-04T08:25:29-07:00
Overflow trick for blurbs https://codepen.io/nathanford/pen/dyRWVz https://codepen.io/nathanford/pen/dyRWVz Nathan Ford

See the Code - See it Full Page - See Details

Stop text from wrapping floated images.

]]>
Overflow trick for blurbs 2014-06-13T08:43:22-07:00