CSS3 – Stéphane Caron – No Margin For Errors http://www.no-margin-for-errors.com Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.14 3D wall effect using only javascript + CSS3 http://www.no-margin-for-errors.com/blog/2010/07/13/3d-wall-effect-using-only-javascript-css3/ http://www.no-margin-for-errors.com/blog/2010/07/13/3d-wall-effect-using-only-javascript-css3/#comments Tue, 13 Jul 2010 13:29:14 +0000 http://www.no-margin-for-errors.com/?p=572

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I recently wanted to test if I was able to give a 3D aspect to wall as a proof of concept, so I fired up textmate, started coding and ended up with this. I only used JavaScript and CSS(3). I also need to point out that this demo only work in Safari as I used a proprietary attribute “-webkit-perspective”.

First things first

Check out the following video to have an idea how it should look in your Safari browser. Check out the project page to test it out by yourself: http://no-margin-for-errors.com/demos/3d-wall/

You can also check out this other version, featuring more objects:  http://no-margin-for-errors.com/demos/3d-wall-products/

The basics

The way I laid down the HTML is fairly simple, I have a container and inside of it, I have an unordered list. The markup looks something like the following (tweaked for readability)


<div class="wall">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

The CSS

The CSS is also quite simple. There’s one very important property that needs to be applied to the container in order to be able to have the 3D effect in Safari or else the wall would look flat as it does in the other browsers. That property is the “-webkit-perspective” property. You can read more about it on the official Apple Safari developer documentation. After that, all I need to do is to rotate the unordered list (ul) on the “y” axis depending on the direction the user is sliding. That’s done using the “-webkit-transform” property.

The JavaScript

If you take a look at the JavaScript, you’ll see that it’s fairly simple. The only really important thing you need to do is to calculate the amount of degrees you which to rotate the list depending on the velocity of the drag. All of the angles calculations are done in the “perspective” function.


function perspective(){
	clearInterval(wall_interval);

	// Set an interval for the anim.
	wall_interval = setInterval(function(){
		if(wall_direction == 0){ // User stopped dragging
			if(wall_angle > 0 || wall_angle < 0 ){ // Bring it to neutral state
 				wall_angle  = wall_angle/1.1;
 				$('ul').css('-webkit-transform','rotateY('+(wall_angle*-1)+'deg)');
 			}else{ // Once neutral, cancel the interval
 				clearInterval(wall_interval);
 			}
 		}else{
 			wall_target_angle = wall_speed * wall_max_angle / wall_max_speed; // Calculate the angle based on velocity
 			if(wall_direction > 0 && wall_angle > wall_target_angle) { // Give the angle depending on the scroll direction
				wall_angle--;
			}else if(wall_direction < 0 && wall_angle < wall_target_angle){
				wall_angle++;
			}
			$('ul').css('-webkit-transform','rotateY('+(wall_angle*-1)+'deg)'); // Apply it
		}
	},20);
}

Bottom line

The proof of concept worked! It can be done today, just not widely supported. I was also quite impressed at how fast I’ve been able to build it, the rough has been done in about 2 hours, the rest of the time was spent tweaking the animations/styling the page. I didn’t document the code (I did comment it tho), feel free to take it and re-use bits of it.

This project sparked an idea?

Feel free to buy me a beer, or a coffee, or candies, or a car!

]]>
http://www.no-margin-for-errors.com/blog/2010/07/13/3d-wall-effect-using-only-javascript-css3/feed/ 15
Mobile Web Apps: The End of App Stores? http://www.no-margin-for-errors.com/blog/2010/01/28/mobile-web-apps-the-end-of-app-stores/ http://www.no-margin-for-errors.com/blog/2010/01/28/mobile-web-apps-the-end-of-app-stores/#comments Thu, 28 Jan 2010 19:30:47 +0000 http://www.no-margin-for-errors.com/?p=374

Related Posts

No related posts. ]]>
Earlier this week Google released Google Voice as a web application. It’s a toned down version of the application that originally got submitted to the App Store but stirred controversy.

If you never heard of it before, the application got pulled down from the App Store for “unknown” reasons, Google complained to the FCC, then Apple said they were investigating the app. Someone somewhere obviously doesn’t want that app on the iPhone.

What they did this week is a straight hit in Apple’s face,. They modified their original App to be available as a web app, so unless Apple block access to the Google Voice website, there’s really nothing they can do about it and that’s a good thing.

Mobile Browsers are really powerful.

Mobile Safari is part of why Google has been able to release Voice as a web app. This browser really is quite powerful, it supports advanced HTML5, CSS3 and the JavaScript performance is impressive.

This got me thinking about the relevance of developing an App for the App Store. It’s true that the browser can’t access some core features like the camera or the gps, but some apps could actually be quite easily converted to a browser based equivalent. Just think about website specific apps that really are only RSS readers (Engadget,TUAW,CyberPresse), notes apps, even Instapaper could be converted using Safari client-side database.

Visibility

It’s true the App Store can potentially give you a lot of visibility, but the truth is that with over 140 000 apps yours can easily be far down the list. As if you publish it as a web app you can actually promote it not only for the iPhone but for many more platforms as it is browser based.

Open is epic win

Developing a web app aimed at the iPhone makes a lot of sense, you don’t have to go through the approval process when you launch or when you want to update your app. Your market could also be a lot broader as the app could be easily adapted for Android and Pre, much easier than re-coding the equivalent in their native language.

You can even add web pages to your home screen on the iPhone so it feels more like an app from the App store.

Cost $$$

Last time I checked there were not many people in my area developing for the iPhone, while there were plenty of web developer. It would be a lot easier to maintain and to find support in the event you lose one of your programmer. And as with everything, if demand is up, prices will follow so an Objective C programmer ain’t cheap.

Bottom line

If I had to develop and app for the iPhone today, I’d strongly consider the web app avenue unless the app rely on core features that are only available in the iPhone SDK.

What’s your view?

]]>
http://www.no-margin-for-errors.com/blog/2010/01/28/mobile-web-apps-the-end-of-app-stores/feed/ 14
CSS3: rgba color values! http://www.no-margin-for-errors.com/blog/2010/01/14/css3-rgba-color-values/ http://www.no-margin-for-errors.com/blog/2010/01/14/css3-rgba-color-values/#comments Thu, 14 Jan 2010 16:11:35 +0000 http://www.no-margin-for-errors.com/?p=363

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
RGBA actually stands for (R)ed (G)reen (B)lue (A)lpha and is used to define colors in your CSS. As you must already know, colors are composed of various amounts of red, green and blue to form the final color. In CSS you can now specify the opacity of the desired color, that’s what the alpha channel is for.

What does that mean?

Up until now, the only way we had to add opacity to an element was to use the opacity CSS property. While it’s working totally fine, the opacity is also applied to all the children of that element, so this solution is not really appropriate if you just want a transparent background on a container.

Take a look at the following demo page to see how RGBA and opacity reacts differently.

Another way would be to use transparent PNGs and use them as background images to achieve the desired effect, but then again it’s not the clean way of doing this and PNG support in IE6 is far from being good.

Now you can simply add opacity to the color of your background by defining the background color like so:

#container {
  background: rgba(255,0,0,0.2);
}

The values are the following:

  1. Red color value
  2. Green color value
  3. Blue color value
  4. Alpha value, from 0 (transparent) to 1 (opaque).

Real world usage

As always with CSS3, you need to be careful on how you use it. If opacity on an element is not a major aspect of your design but a nice to have, you can consider RGBA. If your design rely on opacity to look nice, then you’ll have to look at other solutions.

What about degradation?

As you might expect, RGBA is not supported in any current version of Internet Explorer but it’s working as intended in the lastests versions of Chrome, Firefox, Safari, Opera, etc. To ensure at least everyone is able to see a solid background color, you must declare the properties as follow:

#container {
 background: rgb(255,0,0); /* For IE and older browsers */
 background: rgba(255,0,0,0.2);
 }

So when a browser sees the first value, it’ll apply it to the element, if it supports RGBA, it’ll override the first declaration with the second one. This way you’re sure everyone will at least see a solid background.

]]>
http://www.no-margin-for-errors.com/blog/2010/01/14/css3-rgba-color-values/feed/ 13
CSS3 properties: shadows! http://www.no-margin-for-errors.com/blog/2010/01/07/css3-properties-shadows/ http://www.no-margin-for-errors.com/blog/2010/01/07/css3-properties-shadows/#comments Thu, 07 Jan 2010 19:17:41 +0000 http://www.no-margin-for-errors.com/?p=302

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here’s a new series of post in which I’ll introduce you to new CSS3 properties. You might already know about them but have you tried them? Or know how to use them? Stay tuned and be ready when we can widely use them or start right now as it degrade gracefully.

In this article, I’ll cover text-shadow and box-shadow. Both are very similar and quite easy to use. To be able to view the example, you need to use a CSS3 compatible browser.

Text-shadow

This property will put a shadow under your text… Used wisely it can give the subtle touch that makes a design stand out. The CSS declaration should be as follow:

h1 {
text-shadow: #999 1px 1px 0px;
}

The four value are:

  1. Color of the shadow. Accepeted values are hex, rgb, rgba. I’ll discuss RGBA in the next article.
  2. X-Coordinate of the shadow relative to the text. A positive value will push it down, a negative value will pull it up.
  3. Y-Coordinate of the shadow relative to the text. A positive value will push it right, a negative value will pull it left.
  4. Blur of the shadow. The higher the value, the more blury the shadow. Don’t make it too high as it can make the text difficult to read. 0px or 1px is usually perfect!

Check out an example here. It should work in Firefox, Opera, Safari, WebKit, Chrome, you get it!

Box-Shadow

This property is very similar to text-shadow. It takes the same values, the only difference is that for now, you need to define it with browser specific prefix. The CSS declaration should be as follow:

#content {
  box-shadow: #000 2px 2px 15px;
  -moz-box-shadow: #000 2px 2px 15px;
  -webkit-box-shadow: #000 2px 2px 15px;
}

You see “-moz” and “-webkit”, those are the browser specific prefixes I was talking about. According to Michael Ventnor, the prefixes are not needed with text-shadow because they were part of CSS2.0 and got dropped in CSS2.1. Box-shadow needs the prefixes because it is part of CSS3.

Once CSS3 support will be final in the browsers the prefixes should be dropped. That’s also why I include a “box-shadow” without any prefix, for future support, this way you ensure your style will still be visible properly once the browsers drop the prefix.

Check out an example here. It should work in Firefox, Safari, WebKit, Chrome, you get it!

Bottom line

You can start using those properties right now, but make sure your design doesn’t rely on them as the properties are not widely supported yet. A browser that doesn’t support them won’t display any shadow, so it degrades gracefully.

It can be nice to start using this right now as it can make your life significantly easier, not having to play with PNGs to have shadows is a big plus and you can save some kilobytes on page sizes.

Just be careful if you start using this on clients website, I personally wouldn’t recommend it as clients often expect websites to be the same across all browsers. If your clients are open enough to let you play with this, then you’re in luck!

]]>
http://www.no-margin-for-errors.com/blog/2010/01/07/css3-properties-shadows/feed/ 8