CSS Tips Tricks

Design

Tips

Always put the list of properties for the declerations in the same order. It makes checking easier.
Pick a standard order and stay with it.
 
width
floating
margins & padding
borders
fonts
colors text styles
 
Modern Browsers the default font size is 16 px. 76% = 12 px. So your body font size is 76%.
This affects everything, all relative to this font size.
So if youw ant a width of 755px, then you need 62.5 em (755 / 12).

Standards for naming CSS elements.

Everything You Need To Know About CSS Margins

istock 474611556.jpg

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

See also - CSS Text 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/
 
 
 

Fixed Footer on the bottom of the page

 
@media (min-width: 769px) {
     wrap {
     min-height: calc(100vh - 89px);
     }
}
 
where vh = view height

Opaque Colours

Try RGBA for colors has fourth argument for opacity

Font Sizing

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

Best Text, no network requests:

body {
    color: #212121;
    font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.02em;
}

 

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

istock 894011494.jpg

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

Clear Floated Elements

The simplest way to clear a single (or series of) floated element(s) is to declare overflow:hidden on the parent element.

Styling ordered list numbers demo page

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:

Em vs. Px

Start your CSS stylesheet with

 
html {
font-size: 62.5%;
}
This apparently bizarre number brings your standard font size so that 1em = 10px (This is because the default size for ‘medium’ text in all modern browsers is 16px). And from that point on, you can easily use ‘em’ all over your stylesheet, even if you wanted to use pixels, simply by dividing by 10.
This doesn’t mean that pixels have no use: I tend to use pixels for things like borders and for padding/margin of images that have fixed sizes. But never for fonts or for padding/margins around text.
It all boils down to this: using ems will make your life a lot easier when dealing with cross-browser and cross-OS font rendering issues, so stick with that and be consistent throughout your CSS design and you’ll skip all sort of pain later.
 
html { font-size: 62.5%; } – Several people don’t seem to like this one. I’ll admit it felt pretty hacky to me too when I first came across it, but after a while I can tell you that it does make your life easier. Those who suggest to use font-size: 10px instead don’t really get the point: percentages and em are relative dimensions, meaning that you never mess with the browser defaults, whichever they happen to be on that platform, you just keep on working off of them with multiplication factors. It’s a subtle difference but makes sizes much more uniform across operating systems (if you don’t believe me, try it yourself!)
 
 

Leading

Many designer fail to give the right importance to that feature and, as result, they may get “descenders” of a line overlapping “ascenders” of a lower one. Alternatively, if you put too much space between the rows, you will get a loose, hard to read text.

To avoid these issues, a good rule of thumb to start with is 140% of the font size.

For example: imagine your typeface dimension is 20pt, the right line-height is about 26-28pt.

This page contains information I gathered and thought were very useful. See more notes on design.

Just to let you know, this page was last updated Friday, Apr 19 24