Photo stacks using CSS transforms and box-shadow

CSS

Add

This has probably been solved a few different ways elsewhere on the Internet, but thought I’d share a simple photo stack effect I put together using CSS3 transform: rotate(); to rotate each element and box-shadow to create the effect of them being sat on top of one another.

Here’s a working demo. The CSS is pretty self-explanatory really.

Browser support

A quick list of browser support:

  • Firefox 3.6+
  • IE9+
  • Chrome 4+
  • Safari 4+
  • Opera 10+

Older browsers will simply default to the image with a 6px white border. However, if you really want support for older versions of IE then you might consider taking a look at Microsoft’s BasicImage Filter:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Firefox 7 and text-overflow: ellipsis

CSS

Add

Another version of Firefox has been released and with it another nice new CSS3 property: text-overflow: ellipsis;. This will allow you to display an ellipsis (…) if any text overflows its containing element, making something which used to have to be done with JavaScript or on the server-side now much easier. You will, however, need to include some extra CSS properties to force the any text-overflow to take place:

p {
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Support across other browsers is also very good with support from IE6+, Opera 11 (9-10 using the -o- prefix), Chrome and Safari.

Disable default appearance of input elements in WebKit and iOS

CSS

Add

If you’ve tried out any of HTML5′s new input types you’ll probably have noticed that WebKit adds its own default styling to search input fields. This can be a bit of a pain if you’re trying to achieve a particular layout, so you can remove them using the following CSS:

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

Similarly, if you’re browsing the web on an iOS device you’ll notice that it also applies its own appearance to input and textarea elements: rounded corners, grey gradient in the background, etc. This is an even simpler fix, however:

input, textarea {
	-webkit-appearance: none;
}

More on appearance can be found at the W3C editor’s draft.

Mac OS X 10.7 Lion and PHP

Mac

Add

There are a one or two points to note about your PHP configuration before (or after) you upgrade from Snow Leopard to Lion.

Firstly, PHP has been upgraded from 5.2 to 5.3.

I also discovered that my php.ini in /etc/ had been moved to php.ini.default-5.2-previous. This can easily be reverted, however:

sudo cp php.ini-5.2-previous php.ini

One other thing to note, though, is that any extensions you may have had installed under /usr/lib/php/extensions/no-debug-non-zts-20090626/ will have been removed. If you do have any, they will need to be rebuilt.

« Older Entries