Archive for the ‘CSS’ Category

Color Palette Builders: Kuler and Color Scheme

Saturday, December 10th, 2011

Grid Design Resources

Wednesday, November 30th, 2011

HTML5: iOS like spinning wheel in HTML5/CSS3

Friday, May 20th, 2011

iOS Spinning Wheel in HTML5/CSS
http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

CSS3: Preserve 3D for iOS, iPhone, iPad hardware acceleration

Monday, April 4th, 2011

To 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, 2011

Demo: http://kaylarose.github.com/Glowform/

Source: http://github.com/kaylarose/Glowform

CSS3: Cool Twitter like Button (3D like)

Wednesday, March 23rd, 2011

The Result:
CSS Button

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, 2010

My preferred way:

text-shadow: #333 0px -1px -1px;
or
.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, 2010

Highlight first item

tr:first-child{
	background: #ddddff;
}

Highlight odd items

tr:nth-child(odd){
	background: #e0e0e0;
}
Note: Works on any html element