Category "CSS" (10)
Sticky footer solution by Steve Hatcher ... Reveal Code
CSS: Centering Percentage Width/Height Elements 
If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the width and height of the element you're trying to center, but what if they are percentages? ... Reveal Code
.center {
position: absolute;
left: 50%;
top: 50%;
/*
Nope =(
margin-left: -25%;
margin-top: -25%;
*/
/*
Yep!
*/
transform: translate(-50%, -50%);
/*
Not even necessary really.
e.g. Height could be left out!
*/
width: 40%;
height: 50%;
}
CSS: Different links style
Different links style depending on the type of these links ... Reveal Code
/* External links */
a[href^="http://"]{
text-decoration: underline;
}
/* Emails */
a[href^="mailto:"]{
border-bottom: 1px dotted #0080FF;
}
/* PDF files */
a[href$=".pdf"]{
padding-right: 20px;
background: url(images/pdf_icon.png) no-repeat center right;
}
CSS: Table borders for ie9 & ie10
fix error with some tables in ie. ... Reveal Code
table{
border-top: 1px solid #000;
}
tr{
border-left:1px solid #000;
border-bottom:1px solid #000;
}
td{
border-right:1px solid #000;
}
CSS: Cross-Browser Inline-Block
…for very old browsers. ... Reveal Code
This is awesome
CSS: Cross-browser transparency
Cross-browser transparency. Works equally well in IE, FF, Chrome, Safari and Opera. ... Reveal Code
.transp-element {
filter: alpha(opacity=80); /* IE */
-khtml-opacity: 0.8; /* Safari (old) */
-moz-opacity: 0.8; /* FF */
opacity: 0.8; /* FF, Safari, Opera */
}
An CSS3 Trick to smooth big fonts. ... Reveal Code
h1.title{
text-shadow:-1px -1px 1px rgba(255,255,255,0.2), /* наверх и влево */
1px 1px 1px rgba(255,255,255,0.2), /* вниз и вправо */
1px 1px 1px rgba(0,0,0,0.7); /* тёмная тень */
}
CSS: Box shadow
Cross-browser CSS box shadow ... Reveal Code
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
CSS: Rounded corners
Cross-browser CSS rounded corners ... Reveal Code
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
Keep. Track. Share.
