Color Palette Builders: Kuler and Color Scheme
Saturday, December 10th, 2011- Color Scheme Designer: Very well done.
- Adobe Kuler: good as well, harder to export the CSS values
Archive for the ‘CSS’ Category
Grid Design Resources
Wednesday, November 30th, 2011HTML5: iOS like spinning wheel in HTML5/CSS3
Friday, May 20th, 2011
CSS3: Preserve 3D for iOS, iPhone, iPad hardware acceleration
Monday, April 4th, 2011To have the iOS WebKit browser accelerate your html element, put the following css property to it
-webkit-transform-style: preserve-3d;
CSS3: Cool glowing form border all in CSS3
Saturday, April 2nd, 2011CSS3: Cool Twitter like Button (3D like)
Wednesday, March 23rd, 2011The Result:
The HTML:
<a href="#" class="btn"><span>Press this!</span></a>
The CSS:
.btn {
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
-moz-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
-webkit-transition: -webkit-box-shadow .2s ease-in-out;
-moz-transition: -moz-box-shadow .2s ease-in-out;
-o-transition: -o-box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(19,65,88,.8);
background: #3194c6;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background: -moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.btn:active {
-webkit-box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
-moz-box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
}
.btn:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}
Source: Type Study: An All CSS Button
iOS: WebKit UIWebView remove tap/click highlight/border with CSS
Thursday, February 10th, 2011-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; /* disable text select */ -webkit-touch-callout: none; /* disable callout, image save panel (popup) */ -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
Source: YUIBlog
CSS3: Text inset
Monday, December 13th, 2010My preferred way:
text-shadow: #333 0px -1px -1px;
.inset-text {
font-size: 32px;
color: #344251;
text-shadow: 1px 1px 0px #bad3ed;
font-weight: bold;
}
Source: http://stylizedweb.com/2009/10/22/how-to-create-inset-text-with-css3/
Or
h1.insetType {
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
Source: http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/
CSS: Box Shadow on Chrome, Firefox, WebKit, IE7, IE8
Thursday, November 11th, 2010.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Source: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
CSS: item / row selectors nth-child(odd) and first-child
Wednesday, November 10th, 2010Highlight first item
tr:first-child{
background: #ddddff;
}
Highlight odd items
tr:nth-child(odd){
background: #e0e0e0;
}
Note: Works on any html element