A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
Use: include jquery, include jquery.fitvids.js
Add: fitvid class to video container divs
FitVids >>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(".fitvid").fitVids();
});
Transparent Shadow
Modify positioning (use rgba color values for transparency): http://css-shadow.com/
.shadow {
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
box-shadow: 5px 5px 10px rgba(0,0,0,0.7); }
Create a custom icon for your external website links.
a[href^="http://"] {
background: url(/images/external.png) center right no-repeat;
padding-right: 13px; }
a[target="_blank"] {
background: url(/images/external.png) center right no-repeat;
padding-right: 13px; }
Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.
Anyway, I have a recommendation for your CSS going forward:
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
This gives you the box model you want. Applies it to all elements.
Full Article: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Reddit Discussion: Is it a bad practice to apply a global “box-sizing: border-box;”?
