Pure CSS3 menu button effect.
A Pen by Nathan Schmidt on CodePen.
Example of a responsive grid using element queries instead of media queries.
A Pen by Tyson Matanich on CodePen.
Similar to Masonry, but with less heavy javascript. This particular version is limited to just square and 2:3 tall images, so it's definitely not as flexible as masonry, just snappier. All positioning is done in CSS, with just a single Javascript loop over the elements to update the classes. Note that bad images would expose the background.
A new technique for responsive grids I've been working on which uses inline-block and text-align: justify.
Take a look at this article for an explanation of the fundamentals of the technique:
http://www.barrelny.com/blog/text-align-justify-and-rwd/
Essentially, margins are calculated by the browser and never specified in the CSS. This saves a lot of tedious work! Also by not having to use floats, clearfixes, or nth-child, we avoid many common problems associated with more traditional methods.
A responsive image grid that uses a RSS feed to display the most recent posts as images. The algorithm gets the first image of each blog post and displays them in the grid.
Read More: http://blog.donovanglover.com/2013/02/get-first-image-of-blog-post-wordpress/
A Pen by Donovan Glover on CodePen.
A list of images that by default is two-columns. As screen real estate becomes available, more columns are added.
A Pen by Brad Frost on CodePen.
<div class="bGImg"> | |
<img src="http://www.stockvault.net/data/2010/11/24/116234/small.jpg" /> | |
<p>THIS IS SOME OVERLAY TEXT</p> | |
</div><div class="bGImg"> | |
<img src="https://farm4.staticflickr.com/3774/10670407354_bba85826ce_n.jpg" /> | |
<p>THIS IS SOME OVERLAY TEXT</p> | |
</div><div class="bGImg"> | |
<img src="http://www.stockvault.net/data/2010/11/24/116234/small.jpg" /> | |
<p>THIS IS SOME OVERLAY TEXT</p> | |
</div><div class="bGImg"> |
Quickly put together lazy load of a JSON feed using AngularJS.
A Pen by Zachary Wills on CodePen.
add_filter( 'bp_get_directory_title', 'change_activity_title' ); | |
function change_activity_title( $data ) { | |
if ( 'Sitewide Activity' === $data ) { | |
$data = 'Name'; | |
} | |
return $data; | |
} |