Every iCloud has a silver lining

Friday, January 06, 2012

Oh yes… yes we have

Rich CSS Spotlight with Elliptical Gradients in Safari, Chrome & Firefox

Sunday, March 20, 2011

I’m working on a project that has a wonderful rendered background which gives the site a depth that I’ve just never send before. I can’t show you that right now, but it did give me some inspiration for another site. Essentially an item roughly in the centre of the page will be spot lit, so I thought it would be an interesting application of a couple of CSS3 gradients, including a neat trick to get Safari to produce an elliptical gradient ahead of the webkit changes being delivered into it.

The effect is very pleasing and has a real sense of depth and richness, you can get a sneak preview by clicking here Preview of Effect

OK, for this scene we need a dark background, and the first thing I want to do is give it classy gradient. Gray is a little too dry, so I decided to go for a rich blue. Pretty straight forward css, setting up the page to fill the browser screen, then a div we can use to contain the overall content and the spot-lit element.

.spotlight-container{
	position: relative;
	
	width: 100%;
	height: 100%;
		
	background-image: -webkit-gradient(linear,left bottom,
		left top,color-stop(0, #385A8C),color-stop(0.6, #000000));
	background-image: -moz-linear-gradient(center bottom,
		#385A8C 0%,#000000 60%); 
	overflow: hidden;
}

That’s going to give us the basic gradient, shown below.

Now we need to add a glow, that essentially represents the reflected light from the “yet to be added” spot from the blue surface (or our gradient). We can leverage the CSS3 multiple background capability to get this effect. Note the different syntax for webkit and gecko here. You’ll be pleased to know they’ve agreed on a common syntax (close to the mozilla implementation) that is already in the webkit nightly builds. No word yet on when the standardised implementation will be in both browsers. Anyhow, this extends our CSS a little, but not much, and gives us the image below. It’s beginning to fill out and deepen quite nicely.

.spotlight-container{
	position: relative;
	
	width: 100%;
	height: 100%;
		
	background-image: -webkit-gradient(radial, 50% 75%, 0, 50% 75%, 
			400, from(rgba(55,89,138,0.5)), to(rgba(55,89,138,0))),
		  -webkit-gradient(linear,left bottom,left top,
		  	color-stop(0, #385A8C),color-stop(0.6, #000000));
					  
	background-image: -moz-radial-gradient(50% 75%, circle, 
			rgba(55,89,138,0.5) 0px, rgba(55,89,138,0) 400px),
		  -moz-linear-gradient(center bottom,#385A8C 0%,#000000 60%); 
		  
	overflow: hidden;
}

Now for the spot-light itself. At the moment, Safari only provides circular radial gradients, whereas Mozilla can support elliptical ones. It’s elliptical we want though, because our “floor” is on an angle (it’s not face on to the camera, but tilted away, with the end of blue/start of black implying a horizon). Well with a little :before and transform magic we can achieve this effect.

We are going to use the :before pseudo element to create a second div and create a pretty faint “spot” light. It’s white, but very translucent. You know, classy, understated.

.spotlight-container:before{
	position: absolute;
	top: 10%;
	width: 100%;
	height: 150%;
	content: "";
	
	/* Webkit eliptical gradient*/
	background-image: -webkit-gradient(radial, 50% 35%, 100, 50% 35%, 350, 
			from(rgba(255,255,255,0.09)), to(rgba(255,255,255,0)));
	
	/* Firefox eliptical gradient*/
	background-image: -moz-radial-gradient(50% 35%, circle, 
			rgba(255,255,255,0.09) 100px, rgba(255,255,255,0) 350px);	
}

Now we need to tilt it. I did think about doing this in full 3D. It would have been fun, but less browser compatible. With this approach there are some direct IE 6+ equivalents using filters that we could include with a conditionally included IE style sheet. However, making it work in IE is always our last step. So for now we can just use the scale transform to “squish” our spot to make it elliptical. Here’s the final complete file and result.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Spot Light</title>

<style type="text/css">
html,body{
	margin: 0px;
	padding: 0px;
		
	width: 100%;
	height: 100%;
}

.spotlight-container{
	position: relative;
	
	color: white;
	
	width: 100%;
	height: 100%;
		
	background-image: -webkit-gradient(radial, 50% 75%, 0, 50% 75%, 400, 
				from(rgba(55,89,138,0.5)), to(rgba(55,89,138,0))),
			-webkit-gradient(linear,left bottom,left top,
				color-stop(0, #385A8C),color-stop(0.6, #000000));
	background-image: -moz-radial-gradient(50% 75%, circle, 
			rgba(55,89,138,0.5) 0px, rgba(55,89,138,0) 400px),
			-moz-linear-gradient(center bottom,#385A8C 0%,#000000 60%); 
	overflow: hidden;
}

.spotlight-container:before{
	position: absolute;
	top: 10%;
	width: 100%;
	height: 150%;
	content: "";
	
	/* Webkit eliptical gradient*/
	background-image: -webkit-gradient(radial, 50% 35%, 100, 50% 35%, 350, 
				from(rgba(255,255,255,0.09)), to(rgba(255,255,255,0)));
	-webkit-transform: scale(1.0,0.3);
	
	/* Firefox eliptical gradient*/
	background-image: -moz-radial-gradient(50% 35%, circle, 
			rgba(255,255,255,0.09) 100px, rgba(255,255,255,0) 350px);	
	-moz-transform: scale(1.0,0.3);
}

</style>

</head>

<body>
<div class="spotlight-container">
</div>
</body>
</html>

I appreciate it’s a pretty simple set of CSS, but what I wanted to do with this blog is demonstrate some practical applications for CSS. For those who would like to see the effect live: click here. The whole thing is in a single file, so just save the source from your browser if you want it.

Minor bug-fix update to iExpression for #eecms uploaded to App Store

Wednesday, March 16, 2011

Just wanted to let you know we’ve just pushed a minor update to the App Store containing a few small bug-fixes. There’s a very small number (less than 4) customers impacted by these, but they are pretty important if you are affected. We’ll let you know when it’s been reviewed and made available.

iChat like speech bubbles with CSS 3

Monday, March 14, 2011

We are currently working on a large site project that is going to have a chat tool with a web-based interface. We wanted to avoid the expected striped bars for each chat message and thought that iChat's speech bubbles provided a nice user experience. This style may also be used for comments on the site as well. It's important to note that it won't actually look like this, but there will be stylised speech bubbles that fit in with the site's design and they will fundamentally flow as outlined here.

The image above shows an iChat conversation between two individuals, and there a couple of things we liked about it:

• Your own messages come in from the right hand side. The analogy for comments would be the site owner's comments
• Nice presentation of the avatar (it sticks to the bottom of the message when multi-line
• The over-lapping of messages creates a nice flow to read
• Not so much the shiny bubbles, but nicely stylised ones that will fit with the site ultimately

The body of this article looks at taking a simple stream of div's and using just CSS 3 to make them look like iChat. Full source for the demo is attached in a handy zip at the bottom of the article, if you are curious about what it looks like you can interactively explore the different styles in a demonstration.

Step 0 - The basic page, no style

We need some test data, this is actually lifted from a chat we had to test, the only difference is we've modified the CSS class names from theySaid and youSaid to bubbleLeft and bubbleRight to make sense for this example.

Here's the HTML for the chat.

This gives us the rather unattractive chat below.

You can check this out the demo by clicking on 'No Style' (the default). Perhaps now is a good time to example the demo, and thank a couple of sites that contributed to it (unknowingly). Firstly there's a tool bar across the top with a set of buttons in it that when clicked on will go through the styles in this section. Two bits of liberated work here. The button style is taken and refined from http://www.zurb.com/playground/google-buttons, and excellent example of simple clean buttons. Finally, when these buttons are clicked on it switches the applicable style sheet for the page using a technique outlined by 37signals for switching style sheets in JavaScript. Thanks to both for making their work available.

Step 1 - Adding some basic styling

The first thing we always focus on is the layout. The pretty can come later. To that end we created a simple style sheet that introduces the first styling for our bubbledLeft and bubbledRight CSS classes.

Although very simple, these classes introduce the left/right flow using float. There are other ways we could have done this (especially given the clear=both used) but we wanted to try something at the end to reduce consumed vertical space, and that needs floats. We also added a basic border (and little bit of padding) to make the messages stand-out and to give us something to build from. Here's how it looks.

Step 2 - Something for InternetExplorer Sir?

Although in the rest of the steps I have not spent any time worrying about browsers that don't support the required CSS (luckily the latest versions of Safari, Chrome, FireFox and Opera do, with a small issue on the last step for FireFox 3.6 that could easily be solved with judicious use of CE Image in the template to resize the avatar image). However, we will obviously use Modernizr to pick up and respond to these issues. Whilst we could go to some efforts to make it look the same across all browsers we as a company have decided that unless specifically instructed by the client, we will degrade gracefully rather than try and look exactly the same on each browser. Our clients have been very comfortable with that, and with each site launched that has no user complaints from IE 7 users... we become more confident that this is the right approach. In fact, for sites with a strong social element we've seen the "peer pressure" to get the site in all its glory driving people to move to the latest version of their browser. This is a good thing.

Style 2 is a nod in the direction of compliant browsers, introduces an alternative colour for the left and right hand sides, and if border-radius is available (with vendor tags) uses those to suggest a direction of the speech bubble. In fact, if I were doing a very minimalist site, I'd be tempted to iterate this design a little. It's very clean.

OK, let's do something more interesting...

Step 3 - Leveraging CSS border-image

The CSS border-image property is very interesting, and perhaps a little misleading in it's title. It doesn't just apply to the border, but the background of the element as well. Other sites go into detail on the topic (such as CSS Tricks), but essentially you take an image such as the ones below...

...and determine the size of the corners in order to repeat the sections in between...

There are other options which you can read about, but we are interested in just one of the modes that will stretch the sections across the top, bottom, left and right along their borders, and fill the center with a stretch image of the middle chunk. We created two images for this purpose, baking in the different colours. Oh how I'd love to be able to apply shaders or rgb transforms in CSS. One thing that's often not made clear is that in order for border-image to work consistently you have to specify the border widths for the various sides. At least in Safari there are was some very unusual behaviour if you don't (including not always drawing the border as specified by the border-image property). The additional style for the left bubble is given below

If we apply this to our chat, we get the result shown below. But can you spot the issue? Our little arrow sticking out means that the top border is a little bigger than the bottom one. And as we've had to set the border width, we can see that the text is a little offset. Now, we could just pad out the bottom a little more, or adjust the image to have a few extra pixels. However, that doesn't feel right, in the next step we'll use another bit of CSS (CSS 2 this time) to get around the problem.

Step 4 - Using :before to create a background, with a border-image.

Firstly, we are going to upgrade our images a little and make something a little closer to our iChat goal for this exercise. This demands an even bigger offset as described above which is why the extra padding is not desirable, you end up with the border dictating the appearance, and it really shouldn't be that way around. Here are our images...

One of our big 'I get it' experiences came the first time we read this article by Nicolas Gallagher. The article not only highlights that the pseudo-elements :before and :after have been around for a while, but also has a great graphic showing how they are bounded by their parent element as a container. One of the concerns you see around these elements is that CSS should just be about styling, not content. We agree, and think that is exactly what they are about! We are going to use them to style the background for our bubbledLeft and bubbledRight cells. It's worth repeating the .bubbledLeft class as we are actually taking our old border-image out of it, and replacing it with some padding that will simply position our text perfectly within the bubble. In other words, because or bubble is now just part of the background to the element, we can just precisely position the content. Also note the addition of the position relative, it's going to create a co-ordinate system for our :before element. Remember Nicolas' article, the :before element is contained in the parent element. In the actual style sheet we just add this to both classes, but it's split out here for clarity.

OK, so now we have no border again, but we can use the :after element to give us that. We push it to the back with the z-index property then specify absolute positioning (and this will be even more important in the next stage) to fill the background to the message. Then tweaked border-image properties to work with the new images, and we should be good to go.

This gives us the not entirely unpleasant looking chat below! We are certainly getting somewhere.

However, we are still missing our avatars. If only there was some way to include those...

Step 5 - Avatar's with background-images

We could have done this a number of ways, but we wanted to show off some of the power of the pseudo-elements and the new background-image and size properties. This time we are going to use :after to add the avatars, and the background images, sized to 32x32 to draw the avatars at the bottom of the page. A little judicious application of border radius rounds them off nicely. However, we need to make some space for them so we add a margin to the main element.

Now we use the :after element to add in the avatar.

As you can see, this gives a great iChat like look. Even better we can tweak and style each element of the style (the bubble, the layout and position of the text within it, and the avatar) independently of each other. Used like this :before and :after are really all about pure styling. Note that we can now leverage the positioning to push the avatar image into the margin and position the image at the bottom of the chat message.

Now, remember we used floated the chats earlier, then just used clear: both? Well... there is just one more thing...

Step 6 - Squeezing more in on small screeens

We'd like to stress this isn't something we've tested with users, but we think it's interesting enough to experiment with. What if... the left chat only clears left, and the right chat only clears right. That means messages on the left and right could overlap at times, without loosing the over all flow. At least, that's the theory. Why risk confusing users? Well, the chat, or indeed comments, may be being viewed on a mobile device where space is at a premium. We wanted to see if we could get more in without loosing the flow. So far feedback has been good, with beta-testers not even noticing. However, time will tell! It saves around 25% of the vertical space for this short conversation, so not really to be sniffed at, and certainly worth a look.

Conclusions

One of the things we've learned is just how rich CSS decoration of the cleanest content can be. This deployment is an expression engine one, and even our experiments with comments have shown easily templates can be made to leverage what is really some quite simple CSS. Although we are sure you could abuse :before and :after it's actually very hard to do so, and anything you put in the content property ends up being just decoration. We did consider some of the pure CSS speech bubble solutions out there (Nicolas again coming up with the goods Pure CSS speech bubbles, but rendering of tested slower on net-books and the constraints it placed on the design of the bubble a little restrictive. However, we are sure it could be done, and well understand the arguments for doing so. However, with the two chat bubble images being just 4kb we think images and image-border gives us a lot of design flexibility for a low bandwidth cost.

Now all that remains is for us to give the link to the demo one more time, and a download link for a zip of all the files you need to play with this yourself.

• Demonstration Page
• Example Archive

Tweet us up with any questions or insults @rougeExciter

Well that’s a relief, iExpression builds again!

Wednesday, January 26, 2011

Seeing as 4.3 Apps are being approved onto the App Store (see the full story from MacRumors here), we decided it was high time to get some 4.3 testing done. It’s normally a pretty simple process… Get XCode installed. Run tests. Wait. Check Results. Cool.

This time… Linker errors… No build. It’s taken all day to figure out what it was (and it’s sooooo tempting to imagine it’s an XCode bug). Anyhow, nerdy short story…. Update github repo’s, rebuild, tweak, rebuild, and eventually ta-da… Just somethings were out of date.

How can something be tedious and stressful at the same time?

Posted by iExpression

Smile Software to show iExpression at MacWorld 2011

Monday, January 24, 2011

We are absolutely delighted to say that iExpression will be making an appearance this week at MacWorld 2011. Sadly we can’t be there ourselves but Smile Software, creators of the excellent (and beloved by many of our users) TextExpander Touch, are going to be showing off the integration of TextExpander Touch and iExpression on the iPad at their stand. You can track them down at Booth 246-1, from Thursday through until Saturday between 10am and 6pm.

For those of you that aren’t familiar with TextExpander Touch you can read our review here, but essentially it enables you to set up some simple text strings that when you enter them into your iPhone/iPod/iPad get expanded into a longer string. Even though we’ve added advanced editing into iExpression at release 1.4, you don’t want the tool bar to have too many buttons, and TextExpander Touch allows you to have a much broader set of strings and substitutions without over-loading the advanced editing tool-bar. In fact, for many of our users it means they don’t need to use it (although we’ve made it as small as we could, it still takes up precious space on the iPhone and iPod Touch).

Setting up substitutions using TextExpander Touch on the iPhone/iPod Touch/iPad

So, if you are over at MacWorld, please head over to the guys at Smile and take a look at their offerings (feel free to plug iExpression and ExpressionEngine while you are there!). If you are a Mac user new or old I can’t tell you how invaluable all of their products are, often replacing big, heavy, expensive tools that you may already own (or think that you should), with small light-weight versions that do just what you want, in the way you want.

Plans for releases

Monday, November 01, 2010

Just wanted to let you know where we are with releases. We’ve collected the defect reports for 1.4 and will submit a small update to deal with those (nothing serious, a couple of minor UI tweaks) and then onto 1.5.

As for 1.5 itself, as we’ve said focus is on 3rd Party plugins. The real difference between a simple dot dot release (1.4.1) and a dot release (1.5) is that we make architectural changes in a dot release. There’s some nerd work going into 1.5 but mainly we are trying to build some framework that makes it ideally possible for users to add field types themselves, but failing that, nice and easy for us to add them. While we do this we can’t commit to which ones we are going to support at 1.5 but will get the candidates up for you to see in the next few days.

iExpression 1.4 release materials now available (no it’s not in the App Store yet… Give them a cha

Tuesday, October 26, 2010

We have just finished uploading the 1.4 version of the module and user guide. You can get at them both from the links at the top of the page. Like all major releases there is quite a lot of new content to cover in the manual etc, so it’s well worth downloading and skimming through ahead of the release. We’ve also added a PDF version in addition to the ePub version.

The module is also available and can be safely used with iExpression 1.3 and beyond as the functionality is incremental. This should let you test the module on any staging server before uploading to your production site when 1.4 is reviewed.

1.4 is a real water shed for us. I was able to update all of the pages and file from my phone as rouge dropped in the files into a drop box. Thanks to McDonalds for the bandwidth!

iExpression 1.4 for #eecms submitted to App Store for review

Tuesday, October 26, 2010

Hopefully things won’t take too long as we are betting most are waiting for 4.2 to get out before uploading their next version. Anyhow, expect manual update and updated 1.4 version of the module to go up in the next couple of days.

Posted by iExpression 1.4

Out and about field testing 1.4 on 2G and 3G networks… Aiming to submit tonight

Monday, October 25, 2010

Making sure it all works when the connection ain’t all that… One feature we haven’t shown you yet in particular

Posted by iExpression 1.4