Posts tagged css

Comment styling with CSS3 and -webkit-transform

Here’s a quick little tip that might come in handy for someone. I’m working on the mobile version of a magazine’s site which will be targeting WebKit browsers. The design I’m implementing calls for a list of comments that alternates the display of the commenter’s name (and timestamp info) left and right. This can be done with a single image, use of the nth-child(even) CSS selector, and -webkit-transform: scaleX(-1). The fiddle here uses jQuery, but I’m using Zepto.js (mostly jQuery-compatible syntax in just a couple of kb) for the actual implementation.

Miscellaneous thoughts:

  • For bonus points, the comment arrow could be implemented with a small canvas to remove the need for an image at all.
  • AFAIK, there doesn’t seem to be an agreed upon microformat for comments.

(Tumblr users need to click through to view the fiddle)

Posted on January 26, 2011 · 10 notes
I’m excited to announce that I have launched a redesign of my business/portfolio site Black Ant Media. I started in on a redesign about a year ago and never finished it. They say if you’re too busy to update your own site, that’s a good thing. But when you’re in the business of selling your supposed expert services, not having any work to view is an embarrassment.

I had been wanting to play with MooTools for a while now, so I took the opportunity to use it on this redesign. I came away from the experience feeling like PHP is to jQuery (everyone structures their code differently) as Rails is to MooTools (established OO patterns that pretty much everyone follows). The MooTools Fx classes offer some of the smoothest animations I’ve come across. There is still much I want to learn about this framework, but I’m really impressed so far.

I’m using the lightweight (no database) Stacey CMS for the portfolio. Since this is a single-page site, I decided to load all of the project information dynamically from Stacey using AJAX calls and fetching JSON data.

I had a fun time working on the contact form as well. For WebKit browsers, the form flips around when you submit it turning your message into an envelope that gets dropped into a slot. On the server side, I use Akismet to check for spam submissions. Please send me a message if you’d like to try it out.

I few other buzzwords I incorporated: HTML5, Sass, TypeKit, Modernizr, hCard microformat, and parallax background scrolling.

I still have a bunch of cleanup/refactoring to do and I need to make a mobile version, but I’m really pleased with how it has turned out so far.

Oh, and all of the code lives in public Github repo if you want to check it out. Hit me up on Twitter with any questions or feedback.

I’m excited to announce that I have launched a redesign of my business/portfolio site Black Ant Media. I started in on a redesign about a year ago and never finished it. They say if you’re too busy to update your own site, that’s a good thing. But when you’re in the business of selling your supposed expert services, not having any work to view is an embarrassment.

I had been wanting to play with MooTools for a while now, so I took the opportunity to use it on this redesign. I came away from the experience feeling like PHP is to jQuery (everyone structures their code differently) as Rails is to MooTools (established OO patterns that pretty much everyone follows). The MooTools Fx classes offer some of the smoothest animations I’ve come across. There is still much I want to learn about this framework, but I’m really impressed so far.

I’m using the lightweight (no database) Stacey CMS for the portfolio. Since this is a single-page site, I decided to load all of the project information dynamically from Stacey using AJAX calls and fetching JSON data.

I had a fun time working on the contact form as well. For WebKit browsers, the form flips around when you submit it turning your message into an envelope that gets dropped into a slot. On the server side, I use Akismet to check for spam submissions. Please send me a message if you’d like to try it out.

I few other buzzwords I incorporated: HTML5, Sass, TypeKit, Modernizr, hCard microformat, and parallax background scrolling.

I still have a bunch of cleanup/refactoring to do and I need to make a mobile version, but I’m really pleased with how it has turned out so far.

Oh, and all of the code lives in public Github repo if you want to check it out. Hit me up on Twitter with any questions or feedback.

Posted on January 21, 2011 · 17 notes
I rarely buy web design books (preferring to absorb tips and techniques online), but my credit card comes out when Andy Clarke publishes something. Hardboiled Web Design looks like another work of art with minimal nonsense.

I rarely buy web design books (preferring to absorb tips and techniques online), but my credit card comes out when Andy Clarke publishes something. Hardboiled Web Design looks like another work of art with minimal nonsense.

Posted on October 19, 2010 · 15 notes
The Pure CSS Reddit Alien is not happy in IE. /via simurai

The Pure CSS Reddit Alien is not happy in IE. /via simurai

Posted on September 14, 2010 · 35 notes
I’m a little embarrassed to say that I had never heard of simurai until today. This guy (or girl?) is doing some amazing experimental work with CSS3. This refractive glass text effect is just one example. Also don’t miss simuari’s delicious looking CSS3 buttons.

I’m a little embarrassed to say that I had never heard of simurai until today. This guy (or girl?) is doing some amazing experimental work with CSS3. This refractive glass text effect is just one example. Also don’t miss simuari’s delicious looking CSS3 buttons.

Posted on September 2, 2010 · 90 notes
CSS ninja style class t-shirt
Posted on July 27, 2010 · 28 notes

I love this subtle effect on the redesigned Flickr pages. When you click the star to favorite a photo, they are running a Javascript animation that doubles the size of the star image (actually of the entire Flickr sprite sheet), drops the opacity to zero, and applies a slight easing effect [1]. A similar effect could be done with Webkit and Mozilla CSS effects, but I guess they don’t want to give IE the cold shoulder just yet.

[1] Found by spelunking through fave-star.js

Posted on June 24, 2010 · 5 notes
Inspired by the recent Responsive Web Design ALA article, Jon Hicks builds a brilliant fluid site design for his blog. The structure dynamically switches between a one, two, three, or four column layout depending on browser width.

Inspired by the recent Responsive Web Design ALA article, Jon Hicks builds a brilliant fluid site design for his blog. The structure dynamically switches between a one, two, three, or four column layout depending on browser width.

Posted on June 23, 2010 · 3 notes
Animated Pure CSS Twitter Fail Whale - the practicality to work ratio is very low here, but overall awesome level is way high.

Animated Pure CSS Twitter Fail Whale - the practicality to work ratio is very low here, but overall awesome level is way high.

Posted on June 14, 2010 · 9 notes
Here’s a quick tip for creating a subtle depressed link effect as shown above. I’ve been using this type of UI treatment on a current project in place of a heavier tabbed interface. I’m indicating the currently selected link with just a few lines of CSS. Well, Sass actually - you can reconstruct the CSS easily enough.


ul#participant-nav
  :float right
  
ul#participant-nav li 
  :display inline


ul#participant-nav li a
  :display block
  +rounded(15px)
  :float left
  :line-height 24px
  :padding 0 1.4em
  :color #333
  :margin-left 0.5em  


ul#participant-nav li a:hover,
ul#participant-nav li a.active
  +box-shadow(inset 0 1px 0 #b2b2b2)
  :background-color #dbdbdb  


And here are the Sass mixins being used:


=rounded($radius: 4px)  
  :border-radius $radius  
  :-moz-border-radius $radius  
  :-webkit-border-radius $radius  
  
=box-shadow($attributes: 2px 2px 3px #888)
  :box-shadow $attributes
  :-webkit-box-shadow $attributes
  :-moz-box-shadow $attributes


As a bonus, here’s the Sass for the “Add Participant” button that’s shown:


.small-button
  :display inline-block
  +rounded(15px)
  +box-shadow(1px 1px 0 #aaa)  
  :height 24px
  :line-height 24px
  :padding 0 1.4em
  :color #333
  :font-size 11px
  :font-weight bold
  :background-color #eee
  :background-image url(/images/bg/small_button_gradient.png)
  :background-repeat repeat-x
  :border solid 1px #ccc


The background image is just a grey-to-transparent (bottom-to-top) gradient that I can use on any colored button, giving it a subtle shading. I’ll probably convert this piece to CSS3 gradients, but this technique is pretty darn simple.

Anyhow, when the button is clicked, I add a “depressed” class and show the new participant form:


.small-button.depressed
  +box-shadow(inset 0 1px 0 #b2b2b2)
  :border-bottom none
  :background-color #dbdbdb      
  :background-image none
  :-webkit-transform translateY(1px)
  :-moz-transform translateY(1px)

Here’s a quick tip for creating a subtle depressed link effect as shown above. I’ve been using this type of UI treatment on a current project in place of a heavier tabbed interface. I’m indicating the currently selected link with just a few lines of CSS. Well, Sass actually - you can reconstruct the CSS easily enough.


ul#participant-nav
  :float right
  
ul#participant-nav li 
  :display inline


ul#participant-nav li a
  :display block
  +rounded(15px)
  :float left
  :line-height 24px
  :padding 0 1.4em
  :color #333
  :margin-left 0.5em  


ul#participant-nav li a:hover,
ul#participant-nav li a.active
  +box-shadow(inset 0 1px 0 #b2b2b2)
  :background-color #dbdbdb  

And here are the Sass mixins being used:


=rounded($radius: 4px)  
  :border-radius $radius  
  :-moz-border-radius $radius  
  :-webkit-border-radius $radius  
  
=box-shadow($attributes: 2px 2px 3px #888)
  :box-shadow $attributes
  :-webkit-box-shadow $attributes
  :-moz-box-shadow $attributes

As a bonus, here’s the Sass for the “Add Participant” button that’s shown:


.small-button
  :display inline-block
  +rounded(15px)
  +box-shadow(1px 1px 0 #aaa)  
  :height 24px
  :line-height 24px
  :padding 0 1.4em
  :color #333
  :font-size 11px
  :font-weight bold
  :background-color #eee
  :background-image url(/images/bg/small_button_gradient.png)
  :background-repeat repeat-x
  :border solid 1px #ccc

The background image is just a grey-to-transparent (bottom-to-top) gradient that I can use on any colored button, giving it a subtle shading. I’ll probably convert this piece to CSS3 gradients, but this technique is pretty darn simple.

Anyhow, when the button is clicked, I add a “depressed” class and show the new participant form:


.small-button.depressed
  +box-shadow(inset 0 1px 0 #b2b2b2)
  :border-bottom none
  :background-color #dbdbdb      
  :background-image none
  :-webkit-transform translateY(1px)
  :-moz-transform translateY(1px)  
Posted on June 11, 2010 · 14 notes

Refactoring Digg.com's Stylesheets using Sass

A nice writeup by Chris Eppstein showing an iterative process for converting Digg’s CSS to Sass. Concepts include creating and extending base classes, nesting selectors, and extracting mixins.

Posted on May 25, 2010 · 6 notes
Once you watch the CSS3-Man animation, a purely CSS tribute to the classic Spiderman cartoon, check out how Anthony Calzadilla pulled it off. An awesome piece of geekery.

Once you watch the CSS3-Man animation, a purely CSS tribute to the classic Spiderman cartoon, check out how Anthony Calzadilla pulled it off. An awesome piece of geekery.

Posted on May 7, 2010 · 9 notes
Janko has created the Windows 7 Start menu using just CSS3. Check out the writeup and the demo.

Janko has created the Windows 7 Start menu using just CSS3. Check out the writeup and the demo.

Posted on April 6, 2010 · 19 notes