Full tutorial: http://hofmannsven.com/2013/laboratory/svg-stacking/
Demo (with a div): http://hofmannsven.com/demo/svg-stacking/
Demo (with a background image): http://hofmannsven.com/demo/svg-stacks/background/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Oscilloscope</title> | |
| <style type="text/css"> | |
| .visualizer { | |
| display: block; | |
| width: 100%; | |
| height: auto; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "origin": [ | |
| "<svg width=\"400\" height=\"200\">#pattern#</svg>" | |
| ], | |
| "circlecolor": [ | |
| "pink", | |
| "cyan", | |
| "yellow", | |
| "orange", | |
| "gray", |
yoren
/ functions.php
Last active
September 14, 2022 21:02
Add Featured Image Thumbnail URL to wp-json/wp/v2/posts Endpoint
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function my_rest_prepare_post( $data, $post, $request ) { | |
| $_data = $data->data; | |
| $thumbnail_id = get_post_thumbnail_id( $post->ID ); | |
| $thumbnail = wp_get_attachment_image_src( $thumbnail_id ); | |
| $_data['featured_image_thumbnail_url'] = $thumbnail[0]; | |
| $data->data = $_data; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| Plugin Name: Simple Popular Posts Lite | |
| Plugin URI: - | |
| Description: - | |
| Version: 2015.03.01 | |
| Author: khromov | |
| Author URI: http://snippets.khromov.se | |
| License: GPL2 | |
| */ |
fijiwebdesign
/ detect-available-fonts.js
Last active
October 10, 2025 12:49
Detect available fonts with JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * JavaScript code to detect available availability of a | |
| * particular font in a browser using JavaScript and CSS. | |
| * | |
| * Author : Lalit Patel | |
| * Website: http://www.lalit.org/lab/javascript-css-font-detect/ | |
| * License: Apache Software License 2.0 | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * Version: 0.15 (21 Sep 2009) | |
| * Changed comparision font to default from sans-default-default, |
Gaya
/ responsive-svg-sprite-template.scss
Last active
September 15, 2017 14:19
Responsive SVG Sprite Mixin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Generate a SVG-sprite mixin for Sass | |
| * ==================================== | |
| * | |
| * Gaya Kessler - http://gaya.ninja - http://twitter.com/GayaNinja | |
| * | |
| * SVGSprite is a wonderful package, but doesn't enable responsive sprites out of the box. | |
| * This moustache template generates a sass file with a mixin for the generated SVG-sprite. | |
| * Calculates the position and size of the background by filename. | |
| * Included SVG image scales to width and height. |
pburtchaell
/ styles.css
Last active
February 12, 2025 08:45
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
| * | |
| * To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
| * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
| * the height of element `.foo` —which is a full width and height cover image. | |
| * | |
| * iOS Resolution Quick Reference: http://www.iosres.com/ | |
| */ | |
nciske
/ clean_post_content.php
Last active
January 4, 2016 07:59
Cleanup WP post content (e.g. after a migration from another CMS)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Warning: this will overwrite every post in your database | |
| // BACKUP FIRST! | |
| clean_post_content(); | |
| function clean_post_content() { | |
| $posts = get_posts(array( | |
| 'post_type' => array('post'), // or page, or cpt | |
| 'post_status' => 'publish', // or any, draft, etc |
hofmannsven
/ README.md
Last active
November 18, 2020 12:11
How to create SVGs with layers for the web.
hatefulcrawdad
/ foundation5-grid.css
Created
June 18, 2013 17:31
Sneak peek at what we're thinking about for the Foundation 5 Grid.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Row and Column defaults */ | |
| .row { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; width: 100%; } | |
| .row .row.collapse { margin-left: 0; margin-right: 0; max-width: none; width: auto; } | |
| .row .row { margin-left: -0.9375em; margin-right: -0.9375em; max-width: none; width: auto; } | |
| .row.collapse .column, .row.collapse .columns { padding-left: 0; padding-right: 0; float: left; } | |
| .column, .columns { padding-left: 0.9375em; padding-right: 0.9375em; width: 100%; float: left; position: relative; } | |
| /* Up to 640px */ | |
| @media only screen { | |
| .small-1 { width: 8.33333% } |