Archive for the ‘CSS’ Category

CSS3: Plugin to build cur and ico for Photoshop

Saturday, April 28th, 2012

http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html

CSS: Less JavaScript and Java Less Processor

Thursday, February 23rd, 2012

less

Asual Java Less processor (not on maven central yet ;(

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 */
}
a:focus{
  outline:0; // Firefox (remove border on link click)
}

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/