Tips
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;
}
Fixed Footer on the bottom of the page
Opaque Colours
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;
}
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.
CSS Sorcery
a[href]{}
article[class]{}
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
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, Mar 05 21