Snippets

Little useful bits.

HTML
CSS
Sass
SVG
htaccess
JavaScript
jQuery
WordPress
PHP

Add Body Class Just For IE
Add Spaces to Dock in OS X
Base64 Encode of 1x1px Transparent GIF
Basic Microformatted hCard
Button With Line Breaks
Comments in HTML
Cufon 101
Embedding Flash
Embedding Quicktime
Embedding Windows Media
Empty Table Markup
Example Form Markup
Form Submission Opens New Tab/Window
Get Directions Form (Google Maps)
Get Rid of White Flash when iframe Loads
Glyphs
HTML5 Article Structure with hNews
HTML5 Page Structure
iPhone Calling and Texting Links
Keep Flash Behind Other Elements
Left & Right Halves Layout
Lorem Ipsum Paragraph
Mailto Links
Make IE 6 Crash
Meta Refresh
Meta Tag For Forcing IE 8 to Behave Like IE 7
Meta Tag to Prevent Search Engine Bots
Multiple File Input
Open Link in a New Window
Post Data to an iframe
Proper Tags for Displaying Content Edits
Responsive Meta Tag
Serving Up Universal IE 6 Stylesheet
Set iPhone Bookmark Icon
Standard List Navigation
Start a Web Server With One Terminal Command on OS X
Stop IE Page Load Flicker
Test Page
The Common DOCTYPES
Tooltips for Acronyms
Top & Bottom Halves Layout
Turn Off Autocomplete for Input
Use Firebug in Any Browser
Video For Everybody (HTML5 Video with Flash Fallback)
View Source of RSS Feed in Firefox
XHTML 1.0 STRICT Page Structure

“Shake” CSS Keyframe Animation
“Stitched” Look
A Complete Guide to Flexbox
A Complete Guide to Grid
Absolute Center (Vertical & Horizontal) an Image
Accessibility/SEO Friendly CSS Hiding
All Stylesheet Media Types
Animated Grainy Texture
Basic Link Rollover as CSS Sprite
Basics of Google Font API
Better Helvetica
Blurry Text
Bouncy Animated Loading Animation
Browser Specific Hacks
Center DIV with Dynamic Height
Centering a Website
Change Autocomplete Styles in WebKit Browsers
Change Text Selection Color
Comments in CSS
Common Unicode Icons
Compress CSS with PHP
Corner Ribbon
Cross Browser Inline-Block
Cross Browser Opacity
Cross-Browser hr Styling
Cross-Browser Min Height
CSS Box Shadow
CSS Diagnostics
CSS Font Families
CSS Hacks Targeting Firefox
CSS Only Image Preloading
CSS Text Shadow
CSS Triangle
CSS3 Zebra Striping a Table
Custom Checkboxes and Radio Buttons
Custom File Input Styling in WebKit/Blink
Custom Radio Buttons
Diagonal Graph Paper Gradient
Drop Caps
End Articles with Ivy Leaf
Exactly Center an Image/Div Horizontally and Vertically
Expanding Boxes Navigation
Fancy Ampersand
Fixed Footer
Fixed Positioning in IE 6
Flip an Image
Fluid Typography
Font Shorthand
Font Stacks
Force File Upload Input Button To Right Side In WebKit
Force Vertical Scrollbar
Forcing Grayscale Printing
Give Clickable Elements a Pointer Cursor
Glowing Blue Input Highlights
Gradient Text
Gradient Underlines
Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
Hexagon With Shadow
Hide Scrollbar in Edge, IE 10/11
Internationalization Language CSS
iPad Orientation CSS
iPad-Specific CSS
Keyframe Animation Syntax
Layered Paper
Link Pseudo-Classes (In Order)
Make “Pre” Text Wrap
Make Non-Password Inputs Use Bullets (or Bullet Alternatives)
Media Queries for Standard Devices
Meyer Reset
Mixins for Rem Font Sizing
Momentum Scrolling on iOS Overflow Elements
Monotone an Image with CSS
Multiple Backgrounds Syntax
Multiple Borders
Multiple Columns
Named Colors and Hex Equivalents
Nested & Expandable Folders
Noise Data URI Image
Non-Form Fieldset Look
Not-Terrible Image Resizing in IE
Orientation Lock
Page Curl Shadows
Perfect CSS Sprite / Sliding Doors Button
Picross Style Buttons
PNG Hack/Fix for IE 6
Prevent Bounce Scroll in Lion
Prevent Superscripts and Subscripts from Affecting Line-Height
Print URL After Links
Quality Abbreviations
Remove Button Text in IE7
Remove Dotted Link Borders
Remove Gray Highlight When Tapping Links in Mobile Safari
Remove Margins for First/Last Elements
Remove Scrollbar from Textarea in IE
Removing Dotted Outline
Retina Display Media Query
Reversing Text
Ribbon
Rounded Corners
Scale on Hover with Transition
Signify “PDF Bombs”
Simple and Nice Blockquote Styling
Slide In Image Boxes
Smiley Slider
Solarized Theme for CodeMirror and Prettify
Spinny Leaf Menu
Stacked Paper Effect
Standard CSS Image Replacement
Star Wars Crawl Text
Sticky Footer
Style Links Depending on Destination
Style Override Technique
Style Placeholder Text
System Font Stack
Text Dripping Blood
Text Rotation
The Clearfix: Force an Element To Self-Clear its Children
Toggle Visibility When Hiding Elements
Top Shadow
Transparent Background Images
Transparent Inside Border
Triangular List Bullets
Truncate String with Ellipsis
Tucked Corners
Turn Off Number Input Spinners
Two-Color Three-Dimensional Blocks and Text
Typewriter Effect
Useful CSS3 LESS Mixins
Using @font-face

@extend Wrapper a.k.a Mixtend
Advanced Type Checking
BEM Mixins
Black and White Opacity Functions
Caching the Current Selector (&) in Sass
Centering Mixin
Clamping a Number
Color Luminance Function
Correctly Adding Unit to Number
Covering Mixin
CSS Triangle Mixin
Custom Scrollbars Mixin
Deep Get/Set in Maps
Easing Map Get Function
Fix a Number to N Digits
Functional Programming Functions
Maintain Aspect Ratio Mixin
Material Shadows Mixin
Mixin for Offset Positioning
Mixin to Manage Breakpoints
Mixin to Prefix Properties
Mixin to Qualify a Selector
Opposite-direction Function
Placing Items on a Circle
Power Function
Px to Em Functions
Sass Things for Links
Simple Asset Helper Functions
Simplifying Contexts and Events
Sorting Function
Str-replace Function
Strip-unit Function
Striped Gradient Mixin
Tint and Shade Functions
Use a Sass Variable for a Selector
Viewport Sized Typography with Minimum and Maximum Sizes

Adobe Illustrator Export Options
Curved Text Along a Path
Shape Morphing Icons in Button on Click
SVG Knockout Text
SVG Patterns
Text Lock-Up

301 Redirects
Active Gzip Compression
Allow Single URL Through .htaccess Password Protection
Append / Prepend Files
Custom Error Pages
Denying and Allowing Access
Different Directory Index Page
Fancy Indexing
Force charset utf-8
Force Correct content-type for XHTML Documents
Force Favicon Requests to Correct Location
Force Files to Download (Not Open in Browser)
Force HTTPS
Get The Dreamhost Stats Page Working on a WordPress Site
iPad Detection
iPhone Catcher
Password Protect Folder(s)
PHP Error Logging
Prevent Image Hotlinking
Remove File Extention from URLs
Serve SVG with the Correct Content Type
Set Expires
Shock Teenage Gangsters with wp-config Redirect
Subdirectories URL Internally Redirect to Query String
Temporary Maintenance using Mod_Rewrite
Use PHP inside JavaScript
WWW / No-WWW

Adjust Server Time
Append Login Credentials to URL
Append Non-Breaking Space Between Last Two Words
Applying Even/Odd Classes
Associative Array Syntax
Automatic Copyright Year
Automatic Mailto Links
Basic Database Connection, Random Query, Display Result
Basic SimplePie Usage
Build a Calendar Table
Calendar Function
Change Date from dd/mm/yyyy to yyyy-dd-mm
Change Graphics Based on Season
Change Month Number to Month Name
Check if File Exists / Append Number to Name
Check if Website is Available
Cleaning Variables
Comments in PHP
Concatenate Array for Human Reading
Convert Accented Characters
Convert BR to Newline
Convert Comma Separated String into Array
Convert HEX to RGB
Count Script Excecution Time
Create Data URI’s
Create Unique AlphaNumeric
Create URL Slug from Post Title
Crop Image
Cross Domain GET Forwarding
Debugging $_REQUEST
Detect AJAX Request
Detect IE5 or IE6
Detect Location by IP
Discover and Display Meta Tags
Display a User Gravatar from an Email Address
Display Array Contents
Display FeedBurner Feed Count
Display Styled Directory Contents
Email Address Validation
Email Protector
English Time to Seconds
Error Page to Handle All Errors
Extract Email Addresses
Find All Links on a Page
Find File Extension
Find Highest Numerically Named File
Find the Full Path to a File
Find URLs in Text, Make Links
Force Leading Zero
Generate CSV from Array
Generate Expiring Amazon S3 Link
Get All-Time Number of MySQL Queries
Get Current File Name
Get Current Page URL
Get FeedBurner Subscriber Count with cURL
Get File Last Updated Date
Get File Size
Get Geo-IP Information
Get Image Information
Get Latest Twitter Status
Get Suffix of Given Number/Date
Get Users IP Address
Get Width/Height of Image
Highlight a Substring
HTML Tidy
HTTP or HTTPS
Import CSV into MySQL
Increase Maximum PHP Upload Size
Insert Element Every nth Loop
Intelligent PHP Cache Control
Login Function
Make Random Number
MySQL Backup Class
MySQL Database Access Class
MySQL Restore Class
Options to Truncate Strings
Output Buffering
Pagination Function
Parse JSON
Perform Function on Each Item of an Array
PHP Array Contains
PHP Date Parameters
PHP IE Detection
PHP Include
PHP Redirect
PHP Zebra Striping a Table
POST Validation Loop
Quick Alphabetic Navigation
Random Hex Color
Random Slogan Displayer
Random String from Pre-Determined Characters
Randomize Background Image
Randomize File Name
Read/Write Files
Return Only One Variable from MySQL Query
RSS Generator
Sanitize Database Inputs
Send a Text Message
Send Email
Separate First and Last Name
Server Side Image Resizer
Simple Zipcode Range Tester
Time Ago Function
Truncate Long String Exactly In Middle
Truncate String by Words
Unzip Files
Update Values of Entire Table
URL Validation
Variable Variables
Zero Padded Numbers

“Go Back” Button
1024×768 Bookmarklet
Add a Number to Two Variables At Once
Add Data Attribute of User Agent
Add To Favorites (IE)
addClass Function
addEventListener Polyfill
Array of Country Names
Async Script Loader with Callback
Async Sharing Buttons (G+, Facebook, Twitter)
Auto Select Textarea Text
Basic Alert
Bind Different Events to Click and Double Click
Break Out of iframe
Call Function with Random Timer
Check if font-family is Honored
Check if Function Exists Before Calling
Check if Number is Even/Odd
Clear Field on Focus
Comments in JavaScript
Convert Polygon to Path Data
Cookie Getter/Setter
Cross-Browser Dependency-Free DOM Ready
CSS for when JavaScript is Enabled
Current Page with JavaScript
Default Arguments for Functions
Detect Internet Explorer
Detect Javascript On/Off, With Notification
Different Stylesheet Pending the Time of Day
Different Stylesheets for Different Days of the Week
Empty an Array
Error-Free Console Logging
Fix IE 10 on Windows Phone 8 Viewport
Format Currency
Get All Possible DOM Events
Get Object Size
Get URL and URL Parts in JavaScript
Get URL Variables
Get YouTube Key from a Link
Global Variables
htmlEntities for JavaScript
Inject New CSS Rules
Input with Disappearing Background Image
Intervals
JavaScript Array Contains
JavaScript MD5
JavaScript Required Content with Fallback Content
KeyboardEvent Value (keyCodes, metaKey, etc)
Lazy Loading Images
Lighten / Darken Color
Loop Over querySelectorAll Matches
Loop Through Array Without Wasteful Lookups
Make HTML5 Elements Work in Old IE
Modern Event Handling
Move Cursor to End of Input
Multiline String Variables in JavaScript
Namespaced Javascript Template
PageVisibility API
Perform Function At Timed Intervals
Prevent Background Image Flickering in IE
Prevent Embedded JavaScript from Failing Validation
Print Object To Screen
Put Comma Values in Numbers
Random Hex Color
Redirect
Redirect Mobile Devices
Redirect to SSL
Remove an Element
Remove Inline Styles
Remove the Last Character from a String
Replacements for setInterval Using requestAnimationFrame
Saving contenteditable Content Changes as JSON with Ajax
Select Random Item from an Array
Shuffle Array
Strip HTML Tags in JavaScript
Strip Numbers from a String
Strip Whitespace From String
Support Tabs in Textareas
Test for Internet Explorer in JavaScript
Test if dragenter/dragover Event Contains Files
Test if Element Supports Attribute
Test if Mac or PC with JavaScript
Toggle (Show/Hide) Element
Trim First/Last Characters in String
Unescape HTML in JS
Validate HTML Bookmarklet
Viewport Size, Screen Resolution, Mouse Postition
Word Count Bookmarklet

A jQuery hasAttr() Equivalent
Add :nth-of-type to jQuery
Add Active Navigation Class Based on URL
Add Non-Breaking Space on Title to Prevent Widows
Adding/Removing Class on Hover
Animate Height/Width to “Auto”
Append Site Overlay DIV
Automatically Discover Document Links And Apply Class
Better Broken Image Handling
Browser Detection + Apply Classes to HTML Element
Calculate Distance Between Mouse and Element
Change WMode with jQuery
Check for Empty Elements
Check if Checkbox is Checked
Check if Element Exists
Check if Element is inside Another Specific Element
Check if Event was Triggered or Native
Check if jQuery is Loaded
Clear a File Input
Clear Default Search String on Focus
Click Once and Unbind
Combine Slide and Fade Functions
Compare jQuery Objects
Cycle Through a List
Detect First Visible Element of Certain Class
Disable / Re-enable Inputs
Disable Parent Links in Nested List Navigation
Display Browser and Version
Display Last Tweet
Display Latest FeedBurner Post
Display Loading Graphic Until Page Fully Loaded
Display Only First X Divs, Toggle Rest
Done Resizing Event
Draggable without jQuery UI
Equalize Heights of Divs
Exclude $(this) from Selector
Fade Image Into Another Image
Fade One Image to Another Menu
Fallback for CDN hosted jQuery
Find all Internal Links
Find and Wrap Ampersands
Fire Event When User is Idle
Fix Min/Max-Width for Browsers Without Native Support
Fix Select Dropdown Cutoff in IE 7
Fixing .load() in IE for cached images
Fixing IE z-index
Force iframe to Reload
Get an Images Native Width
Get Query Params as Object
Get X, Y Coordinates of Mouse Within Box
Highlight All Links To Current Page
Highlight Related Label when Input in Focus
Image Preloader
Inputs That Remember Original Value
Insert Element Between Other Elements
jQuery Duplicate Plugin
jQuery JSON getting with error catching
jQuery Plugin Template
jQuery Sticky Footer
jQuery Tweetify Text
jQuery Zebra Stripe a Table
Keep Text Inputs in Sync
Konami Code
Link Nudging
Load jQuery Only If Not Present
Load Only a Section of a Page
Loading jQuery
Make Entire Div Clickable
Make jQuery :contains Case-Insensitive
Move Clicked List Items To Top Of List
Move Cursor To End of Textarea or Input
Mover Cursor to End of Textarea
Open External Links In New Window
outerHTML jQuery Plugin
Partial Page Refresh
Password Strength
Paste Events
Persistant Headers on Tables
Remove Specific Value from Array
Resize iFrame to Fit Content (Same Domain Only)
Run JavaScript Only After Entire Page Has Loaded
Scroll Page Horizontally With Mouse Wheel
Search/Replace
Select Element Only if Children are Not Animated
Select List Item Only If Doesn’t Contain Another List (and is top level)
Serialize Form to JSON
Set/Clear Default Input Value
Show Most Recent Flickr Uploads
Show Most Recent Picasaweb Uploads
Shuffle Children
Shuffle DOM Elements
Simple Auto-Playing Slideshow
Simple jQuery Accordion
Sliding Background Links
Smarter Event Binding
Smooth Scrolling
Styled Popup Menu
Target Only External Links
Test if at least one checkbox is checked
Toggle Text
Track Window Resizes through Google Analytics
Trigger Click on Input when Label is Clicked
Triple Click Event
Underline Individual Words
Validate Age
Window load event with minimum delay
Working with Attributes

Remove Width and Height Attributes From Inserted Images
“Edit This” Button on Posts and Pages
Add Category Name to body_class
Add class to links generated by next_posts_link and previous_posts_link
Add/remove contact info fields
Admin Panel Link Only For Admins
Allow SVG through WordPress Media Uploader
Apply Custom CSS to Admin Area
Automatic Social Media Links
Base Threaded Comments Styling
Bloginfo Shortcode
Change Avatar Size
Custom Database Error Page
Custom Loop/Query Based on Custom Fields
Customize Comments Markup
Customize Login Page
Detect Gists and Embed Them
Disable Automatic Formatting
Disable Automatic Formatting Using a Shortcode
Display a Tag Cloud
Display Author Info
Display Image Next To Each Tag
Display Post Divider In Between Posts
Dump All Custom Fields
Dynamic Title Tag
Embed a Page inside a Page
Enable All Possible Post Formats
Facebook “Like” Button for WordPress
Find ID of Top-Most Parent Page
Get Content by ID
Get Featured Image URL
Get ID from Page Name
Get The First Image From a Post
HTML5 Shim in functions.php
ID the Body Based on URL
If Page Is Parent or Child
Include Any File From Your Theme
Include jQuery in WordPress Theme
Increase Custom Fields Dropdown Limit
Insert Images with Figure/Figcaption
Insert Images within Figure Element from Media Uploader
List Posts, Highlight Current
Login/Logout and User Welcome
Make Archives.php Include Custom Post Types
Move WordPress Admin Bar to the Bottom
Natural Sort Using Post meta_key
Output Excerpt Manually
Paginate Custom Post Types
Prevent CSS Caching
Prevent Search Bots from Indexing Search Results
Recent Posts Function
Remove Admin Bar For Subscribers
Remove Gallery Inline Styling
Remove LI Elements From Output of wp_nav_menu
Remove Link to the WLW Manifest File
Remove Paragraph Tags From Around Images
Remove Private/Protected from Post Titles
Remove Specific Categories From The Loop
Remove the 28px Push Down from the Admin Bar
Remove Whitespace from Function Output
Remove WP Generator Meta Tag
Removing Jetpack CSS
Replace Excerpt Ellipsis with Permalink
Reset Admin Password in Database
Reset Admin Password Through Database
Run a Loop Outside of WordPress
Run Loop on Posts of Specific Category
Shortcode for Action Button
Shortcode in a Template
Show Your Favorite Tweets with WordPress
Shrink the Admin Bar / Expand on Hover
Spam Comments with Very Long URL’s
the_category with Excludes
Turn On More Buttons in the WordPress Visual Editor
Turn on WordPress Error Reporting
Using Custom Fields
Year Shortcode

Email Address

Lots of great stuff that isn't published anywhere else!

CSS-Tricks web host since day one. Save 20% with code CSSTRICKS.

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. It is made possible through sponsorships from products and services we like.