Pens from Tobias Reinhardt https://codepen.io/papatoob/ en nospam@codepen.io Copyright 2024 2013-05-25T11:06:06-07:00 Just some blockquote testing https://codepen.io/papatoob/pen/kGjMVV https://codepen.io/papatoob/pen/kGjMVV Tobias Reinhardt

See the Code - See it Full Page - See Details

]]>
Just some blockquote testing 2013-04-12T08:44:46-07:00
Centered caption on top of image https://codepen.io/papatoob/pen/nLGqmv https://codepen.io/papatoob/pen/nLGqmv Tobias Reinhardt

See the Code - See it Full Page - See Details

In this pen I'm trying to display an image caption on top of its image when it's hovered (centered both horizontally and vertically). I do not want any unnecessary markup (otherwise there would have been solutions using "display: table-cell") nor any pixel based calculations. I'm not finally happy with the current solution since the negative "margin-top" being half the line-height does not seem totally uncalculated, but I can live with it for now. And there might be better ways for dealing with the image border; it's not really beautiful depending on the overall image brightness and its size. The second approach needs some JavaScript to set the caption's line-height to the complete image height.

]]>
Centered caption on top of image 2013-03-19T16:30:06-07:00
converTable: plugin demonstration https://codepen.io/papatoob/pen/npgOVg https://codepen.io/papatoob/pen/npgOVg Tobias Reinhardt

See the Code - See it Full Page - See Details

This is basically just a demo and test pen for my jQuery plugin "converTable", which converts tables into definition lists (for oversized tables only by default). The plugin, however, needs some adjustments; for example I'll try to create the data-title attributes automatically or to even skip this and use the column names directly. This plugin can help especially on smaller screens, when sometimes tables will enforce horizontal scrolling. I guess it's kind of a responsive thing.

]]>
converTable: plugin demonstration 2013-05-25T11:06:06-07:00
Photo framed images https://codepen.io/papatoob/pen/nZQJEG https://codepen.io/papatoob/pen/nZQJEG Tobias Reinhardt

See the Code - See it Full Page - See Details

Uses the border-image property to frame an image in a somehow photo-realistic way. Additionally, a "handwritten" caption can be applied. There are some pixel based calculations in here, which is not ideal. And, of course: IE. But whatever. The jQuery part is not really neccessary; it simply helps to keep the HTML part a little cleaner. Of course, you can remove it and some of the CSS if you don't want captions at all.

]]>
Photo framed images 2013-03-02T20:03:17-07:00