Posts for tag: CSS3 7

Animated image captions using the css backface-visibility property

It's been a while since I published my Pure html5 / css3 animated image captions and I thought I'd revisit the subject. The following demo is a slightly different take on the last - instead of hiding the captions and revealing them on mouseover this time I'm hiding the images and showing the captions first. The resulting animated images/captions are then animated using css3 2d and 3d transforms. Normally if you flip and element using transforms, it appears as a mirror-image, however if you use the backface-visibility property (set to hidden), the resulting element is then hidden. This is the key to the following animations.

Animated image captions using the css backface-visibility property

the set-up

1 The html used is as before, a <figure> element containing an <img> and a <figcaption>, the only difference being this time I'm allowing myself to use a containing <div> that specifies the type of animation (horizontal, diagonal, vertical…).


<div class="vertical">
	<figure>
		<img src="images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
		<figcaption class="orange">Joni Mitchell</figcaption>
	</figure>
</div>

2 The containing <div> has a position of relative, and from there on the <figure>, <img> and <figcaption> elements are all set to position absolute so they are all positioned on top of each other.

elements positioned in div

3 Now, the <img> tab is flipped over using a transform. Because it has a backface-visibility of hidden it is now invisible.

the image is hidden

4 The final effect is achieved on mouseover. On mouseover, the <figure> element is flipped using a transform that is animated using a css3 transition.

the figure element is flipped

5 Once it if flipped, the <img> which is now flipped back becomes visible whilst the <figcaption> which is flipped over becomes hidden.

the image is visible and the figcaption is hidden

And here's the full demo of my Animated image captions using the css backface-visibility property

CSS3 ButtonBuilder is now available on the Mac App Store!

CSS3ButtonBuilder lets you visually create sophisticated CSS only buttons (without the use of background images) that are cross-browser. By simply adjusting sliders or numerical input you can adjust the values for various CSS3 properties and see the results in real-time in the preview window. When you are done, you can output cross-browser CSS3 markup for inclusion in your sites stylesheet. CSS3 ButtonBuilder also lets you save and re-load your designs for later use or adjustment.

CSS3 ButtonBuilder

The application features:

A live updating preview that also lets you change the button text and the background colour so that you can see how your design will work on the same background colour as your site.

live preview of your design

Sliders to adjust all numerical values (as well as numerical input for precision).

easy to use sliders

Fully featured rgba colour pickers — clicking on a colour-well opens an rgba colour picker that lets you adjust the rgb values as well as the transparency. You can also choose form pre-set colours and lock the sliders for greyscale output.

fully-featured rgba colour pickers

You can select whether your button will have a solid background colour or a CSS3 gradient. The gradients are fully customizable — you can add as many different colour-stops as you like and adjust their values as well as choosing the direction (horizontal, vertical, diagonal, radial) of the gradient.

full control over css3 gradients

You can save your designs and re-load them at anytime to re-use the code or adjust the design. Save your work simply by clicking on the ‘Save’ button and typing a name for the design. Open a saved design by clicking on ‘Load’ and selecting the design from the list. Clicking on the X icon to the left of the saved button thumbnail will delete it.

saving and loading designs

When you are happy with your button design you can easily and quickly output the CSS3 markup needed to apply the design to either an anchor <a> element or a form element <button> or <input>.

outputting css3 markup

The application preferences allows you to select which web browsers you would like to generate compatible CSS3 markup for. CSS3 ButtonBuilder generates code that supports the 5 major browsers: Chrome, Firefox, Safari, Opera and Internet Explorer*. As default the app will always output the standard WC3 properties for your design.

css3-buttonbuilder-browsers

* full browser support (particularly in the case of IE), refers to the use of the most up to date version of the browser.

Take the pain out of hand-coding cross-browser CSS3 buttons with CSS3 ButtonBuilder! Now on the Mac App Store.

Available on the Mac App Store

How to add CSS3 properties to CSSEdit

For better or for worse CSSEdit was discontinued when MacRabbit released Espresso 2. I'm sure I wasn't the only one eagerly awaiting CSSEdit version 3 with CSS3 capabilities but unfortunately it never came — or rather it came incorporated in to Espresso and was discontinued as a stand-alone app.

CSSEdit can be made to support CSS3Well, I tried Espresso but it doesn't really suit my workflow and so I continue to use CSSEdit 2.6.1. However, there is a way CSSEdit can be hacked to get some CSS3 goodness in there...

If like me you are using CSSEdit on a daily basis you've probably long since abandoned the Visual Editor (GUI) panel for most things and work solely in the Source Editor panel. Typing with auto-completion is what makes CSSEdit so fast and easy to use and it's exactly here that we can add our CSS3 properties and values.

CSSEdit - show package contentsFirst of all open your apps folder, locate CSSEdit and control-click on the icon. Then select 'Show Package Contents' from the contextual menu and open the 'Contents' folder. Inside the 'Contents' folder, locate and open the 'Resources' folder and then locate the file 'AutoCompletion.plist'. Rename it (or move it somewhere else), then download the following replacement .plist file:

CSS3 properties for CSSEdit: https://gist.github.com/2272849

Put the new AutoCompletion.plist file in to the 'Resources' folder and re-start CSSEdit. Now when you type you should find that you have all CSS3 properties and values available. I've also included various vendor specific properties and a few useful extras.

CSSEdit with auto-completion for all CSS3 properties and valuesNote: Many of the properties in the full CSS3 spec are not currently implemented in any browser. If you want to exclude anything, simply locate it in the .plist file and comment it out using standard html comments eg:


<!--<key>hanging-punctuation</key>
	<array>
		<string>none</string>
		<string>first</string>
		<string>last</string>
		<string>force-end</string>
		<string>allow-end</string>
		<string>inherit</string>
	</array>-->

If you are a CSSEdit user I hope you find it useful - I find it has really speeded things up for me!

Oops! Just amended a small typo - the extras section includes the 'behavior' property which I accidentally spelt the British English way ;) 12/04/2012

CSS3 tables with rounded corners and css selectors

css3 table with rounded cornersI recently had to style a table for a shopping cart with rounded corners and a drop shadow. So how is this done? It would be great if you could just slap "border-radius: x" straight on to the <table> element and it would be done but unfortunately this doesn't work. You have to get a rounded corner on to each <th> or <td> at the corners of the table.

So how do you do that? Add a class to each corner cell? I suppose you could but it would mean ugly html. CSS to the rescue! By using child selectors you can get those round corners in there without touching the html at all…

For example: to target the top left-hand cell (assuming you have a header on your table), you target th:first-child (the first <th> element); likewise to get the top right-hand cell you target th:last-child.

To get the bottom left-hand cell you need to target the first cell of the last row of the table. In this case, your selector will be: tr:last-child td:first-child

…and for the final corner: tr:last-child td:last-child

Finally, the zebra striping on the table is done using the :nth-child selector: tr:nth-child(even) will select only the even numbered rows (note: in the following example I have used tr:nth-child(even) td as I am using gradients (the gradients need to be on the <td> element else they stick out of the rounded corner in Firefox).

Here's a live example of my CSS3 tables with rounded corners on dabblet.com

The html markup for the table was generated using my own Create Table plugin for Coda.

Six fantastic CSS3 animated image captions

Following on from my previous CSS3 demos, here is a demo of pure CSS3 animated image captions - the kind of thing that usually involves a lot of javascript and all too often bloated markup.

6 examples of animated image captions using only html5 and css3

In the following demo, all the examples are created using only CSS3 and the following semantic HTML5 markup for describing an image with a caption:


<figure>
	<img src="sample-image.png" width="200" height="200" alt="sample image description" />
	<figcaption>sample caption</figcaption>
</figure>

You can see the full demo here: CSS3 animated image captions →

Cross Browser Pure CSS3 Button Demo

I've been doing a lot of experimenting recently with CSS3 gradients, box shadows, transitions etc… The result is this set of buttons created entirely from CSS (no images used at all).

They have been tested using Safari 5, Firefox 5, Chrome 12 and Opera 11.5 on the Mac. Sorry if you're using any form of Internet Explorer, but as it doesn't have support for some of the CSS3 properties involved I haven't bothered even trying to see how they render.

You can see the full demo here →

1 My first creation is a transparent button using subtle gradients and box shadows. Basically it's a pure CSS3 emulation of some buttons that appear on the Apple site. The original buttons use .png graphics to create the effect.

Transparent CSS3 Button

a.transparent:link, a.transparent:visited {
	color: #fff;
	padding: 20px 40px;
	border-style: none;
	background-color: rgba(0,0,0,0);
	font: 14px/1 "Lucida Grande", Lucida, Verdana, sans-serif;
	text-shadow: #000 0 2px 2px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
}

a.transparent:hover {
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

a.transparent:active {
	background: rgba(0,0,0,.3);
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
}

2 In a previous post I showed how to create a 3D text effect using CSS text shadows. The lettering appears to stand up from a flat surface. I started with this effect, and added a glow to the hover state and made the text shift down for the active state.

CSS3 3D Text Buttons

a.text:link, a.text:visited {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 60px/60px 'ChunkFiveRegular';
	display: inline-block;
}

a.text:hover {
	text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

a.text:active {
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
	margin-top: 4px;
	line-height: 56px;
	color: #dcdcdc;
}

3 The next set of buttons is an exact copy of the .png buttons that I designed when I coded this blog, except that obviously this time no images whatsoever are envolved. The buttons are created entirely with CSS3.

CSS3 Blog Pager Buttons

a.pager1:link, a.pager1:visited {
	font: 14px/26px MisoRegular;
	letter-spacing: 1px;
	text-shadow: #1C9328 0 -1px 0;
	color: #fff;
	background-color: #444;
	display: inline-block;
	margin-right: 1px;
	padding-right: 15px;
	padding-left: 15px;
	-moz-border-radius: 13px 0 0 13px;
	-webkit-border-radius: 13px 0 0 13px;
	border-radius: 13px 0 0 13px;
	background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
	background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
	
	-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager2:link, a.pager2:visited {
	font: 14px/26px MisoRegular;
	letter-spacing: 1px;
	text-shadow: #1C9328 0 -1px 0;
	color: #fff;
	background-color: #444;
	display: inline-block;
	padding-right: 15px;
	padding-left: 15px;
	-moz-border-radius: 0 13px 13px 0;
	-webkit-border-radius: 0 13px 13px 0;
	border-radius: 0 13px 13px 0;
	background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
	background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
	
	-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager1:hover, a.pager2:hover {
	line-height: 22px;
	padding-right: 13px;
	padding-left: 13px;
	border: 2px solid #9433FF;
	background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
	background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	text-shadow: #37197e 0 -1px 0;
}

a.pager1:active, a.pager2:active {
	line-height: 26px;
	padding-right: 15px;
	padding-left: 15px;
	border-style: none;
	background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
	background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
	background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
	background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
}

4 And finally - well, who can resist a big red button!

CSS3 Big Red Button!

a.round:link, a.round:visited {
	width: 140px;
	color: #fff;
	font: 28px/30px LeagueGothicRegular;
	text-transform: uppercase;
	text-shadow: #6f0909 0 -1px 1px;
	border: 1px solid #6F0909;
	display: inline-block;
	padding-top: 40px;
	padding-bottom: 40px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	border-radius: 70px;
	-moz-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	-webkit-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	background: -moz-linear-gradient(top, rgba(180,9,9,1) 0%, rgba(111,9,9,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,9,9,1)), color-stop(100%,rgba(111,9,9,1)));
	background: -webkit-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	background: -o-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	background: linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-ms-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	transform: rotate(-12deg);
}

a.round:hover {
	-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	-moz-transform: rotate(0deg);
	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transform: rotate(0deg);
	-o-transition: -o-transform 0.3s ease-out;
}

a.round:active {
	-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	background: -moz-linear-gradient(top, rgba(111,9,9,1) 0%, rgba(180,9,9,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(111,9,9,1)), color-stop(100%,rgba(180,9,9,1)));
	background: -webkit-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	background: -o-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	background: linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

You can see a working demo of all the buttons here: Cross browser pure CSS3 buttons →

If you liked this article and the demo, you may be interested in my other CSS demos:

CSS3 Isometric Text Demo

CSS3 Isometric Text Demo

Just recently I have been playing around with the multiple text-shadow capabilities of CSS3. Now, building on top of that I have produced a method for creating 3D isometric text, by using multiple text-shadows and 2D transforms.

In this demo the 3D text is created from multiple offset shadows that increase in darkness with no blur applied. The text is then made isometric by applying a 2D transform to skew the text in the Y axis to an angle of -26.6°. (OK, true isometric art is set at -30°, however pixel-based isometric art is set at -26.6° as this produces the smoothest lines).


-webkit-transform: skewY(-26.6deg);
-moz-transform: skewY(-26.6deg);
-o-transform: skewY(-26.6deg);

The shadow under the text is produced by a second line of text that is skewed twice — once in the Y axis to -26.6°, and then again in the X axis to 63°. To get it looking blurred, the colour of this text is set to transparent: rgba(0,0,0,0) and its text-shadow is set to transparent black with a 4px blur: text-shadow: 0 0 4px rgba(0,0,0,0.3);.


color: rgba(0,0,0,0);
-webkit-transform: skew(63deg,-26.6deg);
-moz-transform: skew(63deg,-26.6deg);
-o-transform: skew(63deg,-26.6deg);
text-shadow: 0 0 4px rgba(0,0,0,0.3);

This shadow text is created using Javascript, so that the titles don't appear twice to search engines.

This demo works only for Firefox, Safari, Chrome & Opera. You can see it here: CSS3 Isometric Text Demo

HOME