CSS Tips Tricks

Fun with Shadows

1. To put a shadow on one side of your object:

box-shadow: 0 29px 5px -5px white;

Where the -5px is the spread and it puts the shadow on one site. When this spread value is positive, it creates an outline.

2. To get multiple outlines on an object, add multiple box-shadows.

 

Blur Backgrounds (behind modals)

main.de-emphasized {
filter: blur(3px) contrast(.8) brightness(.8);
}

Creating Charts

Max's Chart is a simple way to create charts using PHP and css. http://www.phpf1.com/product/php-chart-script.html

Swap Image using jQuery and CSS

$(function() {
    $(".hoverswap").hover(
        function () {
            $(this).attr("src", $(this).attr("src").replace(/.png/, "_over.png"));
        },
        function () {
            $(this).attr("src", $(this).attr("src").replace(/_over.png/, ".png"));
        }
    );
});

Style numbers of an ordered list in different way than the content of each list item

ol {
    font: italic 1em Georgia, Times, serif;
    color: #999999;
}
ol p {
    font: normal .8em Arial, Helvetica, sans-serif;
    color: #000000;
}

CSS3 Blur text:
color: transparent;
 
text-shadow: #111 0 0 5px;

http://jsbin.com/welcome/23340/

Font Sizing

Wondering what to use: pixels, ems, rems, media queries. Use ems, here is why.

 

Styling Ampersands

@font-face {
font-family: Ampersand; src: local('Baskerville'),
local('Goudy Old Style'), local('Palatino'), local('Book Antiqua');
unicode-range: U+26; }
h1 {
font-family: Ampersand, Helvetica, sans-serif;
}

CSS Tip

 
You can create squares using
 

embossed

 
Look into accept=content-type-list for
page

Style numbers of an ordered list in different way than the content of each list item.

ol {
    font: italic 1em Georgia, Times, serif;
    color: #999999;
}
ol p {
    font: normal .8em Arial, Helvetica, sans-serif;
    color: #000000;
}

 
Curved cutout corners, with radial gradients

background: #58a; background:
    radial-gradient(circle at top left,
             transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right,
             transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right,
             transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left,
             transparent 15px, #58a 0) bottom left;
background-size: 50% 50%; background-repeat: no-repeat;

 

Color Tint

img {
transition: .5s filter;
filter: sepia() saturate(4) hue-rotate(295deg);
}
img:hover, img:focus {
filter: none; }

Resources and Links

Explanations

General Reference Material

Flexbox

Reference

CSS Sorcery

section[id="sideBar"]{color: red}

Style all links that are fully qualified URLs, knowing that ^ means "starts with":
a[href^="http"]{}

Need to style a link to a ZIP or a PDF? Totally fine, too. Use the $ which means "ends with"

a[href$=".zip"]:after{content:"(zip)"}

Style an image based on one word existing in the alt attribute? Let's use the space substring selector:
 
img[alt~="Insurance"]{}

Style an image based on the name of the image file itself? Also doable, even if you're image is this-image-shot-april-2-2014.png. The | is a hyphen substring selector:

CSS Sites to Sort Through

 

Less

Preboot is a comprehensive and flexible collection of LESS utilities.