Checklists > 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.

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.

CSS Tip

 
You can create squares using <hr>
 
<hr width="15 size="15"> embossed
<hr width="15" size="15" noshade>
 
Look into accept=content-type-list for <form> page <optgroup>

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;
}

Resources and Links

Explanations

General Reference Material

Flexbox

 

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.