CSS – 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.12 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
Firefox to implement calc() in CSS3. http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/ http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/#comments Mon, 14 Jun 2010 19:28:18 +0000 http://www.no-margin-for-errors.com/?p=522

Related Posts

No related posts. ]]>
I’ve just read last week that Firefox would implement calc() in their new version of Firefox. It’s not out in any publicly released version yet but it is coming as they talked about it on their developers blog.

Why should you care?

Ever had an element that needed to have a percentage width with padding? Up until now, because of the way the box model works in Firefox modern browsers, you had to wrap the content in a container to which you’d apply the padding. That’s because when you define padding to an element the value is added to the width, which is the proper way of doing it.

Now the thing is that percentage width don’t mix well with fixed padding values, that where calc() comes into play.

Lets say you have a box with the following css rules:
#box {
padding: 20px;
width: 60%;
}

If that box is in a container 1000 pixels wide, the box would be 640 pixels wide total, that’s not what you want, that’s not 60% wide! You coud use calc() to achieve the desired result:
#box {
width: -moz-calc(60% - 40px);
}

You can even be wild and do basic calculations in there:
#box {
width: -moz-calc(60% - 2 * 20px);
}

Taking it further

What would be even cooler is if you could get the actual padding values as a variable in calc(). Something like:
#box {
width: -moz-calc(60% - (padding-left + padding-right));
}

This way you could even forget about updating your width value when you play with your padding.

Oh well, one day maybe, now let’s just see if other browser vendors implement something of the like. Let’s not forget this is not part of the W3C CSS3 specs.

Is it a feature you were waiting for?

]]>
http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/feed/ 12
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/ 12
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/ 10
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/ 7
CSS tip: Float an image without text wrapping under it. http://www.no-margin-for-errors.com/blog/2009/12/10/css-tip-float-an-image-without-text-wrapping-under-it/ http://www.no-margin-for-errors.com/blog/2009/12/10/css-tip-float-an-image-without-text-wrapping-under-it/#comments Thu, 10 Dec 2009 21:47:56 +0000 http://www.no-margin-for-errors.com/?p=262

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I thought I’d share this little CSS tip that can be useful to some of you.

Let’s say you have this content that contains a thumbnail, you want to float the thumbnail but don’t want the text to wrap under it like below.

thumb_bad

Instead you want the thumbnail to float and the text beside it, in it’s own column, like below.

thumb_good

Well that’s fairly easy to do, your markup should look something like this:

<div class="content">
    <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p>
</div>

Now what you actually do, is that instead of floating the thumbnail, you “position:absolute” it inside the content and add padding to the content so the text displays beside the thumbnail.

You CSS should look something like that:

.content {
	padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */
	position: relative; /* So the thumbnail is relative to this */
}

	.content img {
		left: 0;
		position: absolute;
		top: 0;
	}

This should produce the result below. What actually happen is that the thumbnail which is absolutely positioned don’t take the padding of it’s container into account. That’s why it can be positioned over the padding.
thumb_padding

Working demo

Check out my working demo to see it in a real world example.

Bottom line

So by using this technique you’re always sure your text will never wrap under your thumbnail, that’s one less thing to worry about!

]]>
http://www.no-margin-for-errors.com/blog/2009/12/10/css-tip-float-an-image-without-text-wrapping-under-it/feed/ 33
prettySociable 1.2. Small small small update. http://www.no-margin-for-errors.com/blog/2009/12/03/prettysociable-1-2-small-small-small-update/ http://www.no-margin-for-errors.com/blog/2009/12/03/prettysociable-1-2-small-small-small-update/#comments Thu, 03 Dec 2009 01:41:59 +0000 http://www.no-margin-for-errors.com/?p=257

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I’ve just released an updated version of prettySociable. It consists on a bug fix where the “drag to share” container wouldn’t be position properly in the case the shared element has a border and/or padding.

I also added a little animation to the label, just to say it’s not only a bug fix push 😉

If you never experienced the bug yourself and don’t care about the label animation, this update is not necessary.

The updated files can be found on the project page.

If you have any problem with prettySociable, a request, or just want to say thank you, check out the dedicated forums. They are quite empty right now, come on, go ahead!

]]>
http://www.no-margin-for-errors.com/blog/2009/12/03/prettysociable-1-2-small-small-small-update/feed/ 7
pointer-events, a property I wish we had now. http://www.no-margin-for-errors.com/blog/2009/12/01/pointer-events-a-property-i-wish-we-had-now/ http://www.no-margin-for-errors.com/blog/2009/12/01/pointer-events-a-property-i-wish-we-had-now/#comments Tue, 01 Dec 2009 22:10:31 +0000 http://www.no-margin-for-errors.com/?p=234

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Mozilla announced it’d support pointer-events in Firefox 3.6. While the specification has apparently been part of SVG for a while, I never really heard of it before today.

The pointer-events CSS property basically specifies if the mouse event should be sent to the current element, or the element underneath it. Might not look very useful at first, but it makes a whole lot of sense when you’re working with “complicated” designs.


Real world example

Lets say you have that fairly simple design, a content area and a sidebar. The content area has a drop shadow that goes over the sidebar area. Something that look like the following.

design_drop_shadow

The problem with the design is that in order to display the shadow over the sidebar, you have to bring it’s z-index up and since it goes a bit over the sidebar, there’s a small part of the content area that goes over the link and blocks the click. See below outlines in yellow.

design_drop_shadow_sizes

Up until now, you really didn’t have much choices. In order to enable the click on the link, you’d have to include the shadow as a background image in the sidebar. The content area wouldn’t go over the sidebar anymore, but the drop shadow would’nt be over the content as the designer intended it to be.

Well with the pointer-events, you just have to see the value to “none” in the CSS and that means any click event sent on that element will automatically go to the element underneath it, in that case, the link in the sidebar.

.content {
  pointer-events: none;
}

What now?

Unfortunately, this isn’t part of any CSS specification (yet). Mozilla decided to implement it in Firefox 3.6 and they are the only one right now. However, that’s a nice step forward and I really do hope others starts implementing it, because it’s really small, but can save quite some time in the long term.

]]>
http://www.no-margin-for-errors.com/blog/2009/12/01/pointer-events-a-property-i-wish-we-had-now/feed/ 1
New website launched! http://www.no-margin-for-errors.com/blog/2009/11/28/new-website-launched/ http://www.no-margin-for-errors.com/blog/2009/11/28/new-website-launched/#respond Sat, 28 Nov 2009 16:16:20 +0000 http://www.no-margin-for-errors.com/?p=158

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I’ve just launched my new website design. I want to say a big thank you to my friend Marie-Anne (http://turkoise.ca/) who took the shitty design I tried to make and made it pretty.

I completely change the way I display the information on the website and my plugins are now an integral part of the website instead of looking like another website.

I’ve been working on it for the past 3 weeks so that explains the lack of updates on the plugins. Don’t worry I’ll get working on them as soon as I feel like my website is solid enough.

I finally made prettySociable the official sharing tool on the website. Just hover the post thumbnail and you’ll be able to share it in all the main social websites. Head over prettySociable projet page if you want to use it!

Since I redid pretty much everything, you might see some bugs/glitch here and there, feel free to report them!

How do you guys like it?

]]>
http://www.no-margin-for-errors.com/blog/2009/11/28/new-website-launched/feed/ 0
Announcing prettySociable http://www.no-margin-for-errors.com/blog/2009/10/28/announcing-prettysociable/ http://www.no-margin-for-errors.com/blog/2009/10/28/announcing-prettysociable/#comments Wed, 28 Oct 2009 19:48:42 +0000 http://www.no-margin-for-errors.com/?p=23

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I’m at it again. Here’s my latest plugin, prettySociable. It’s meant to make sharing easy while being fun for the user. It was inspired by the sharing on mashable.com. Come back soon for a wordpress plugin, a friend of mine is working on it.

Head over the project page for a demo: http://no-margin-for-errors.com/projects/prettySociable/

Feel free to leave you comments here, or on the forums.

]]>
http://www.no-margin-for-errors.com/blog/2009/10/28/announcing-prettysociable/feed/ 8