Posts tagged css

iPhone orientation change

iPhone web development [Part 2]

0
624 days
by in CSS, Javascript, iPhone

iPhone orientation changeIn part one of my tutorial on iPhone web development, we talked about the basic stuff (Recognizing iPhones or iPods, setting up special HTML and CSS tags... ) we will now move on to the really clever bit: Orientation detection.

For many sites, we may just have the same thing both on portrait and landscape. But sometimes we will want to use that extra space to display our content differently, and here is how.

Orientation detection with CSS:

We can use some smart CSS3 selectors to ensure that some styles only apply to landscape, or to portrait modes:

/* Portrait */
@media screen and (max-width: 320px){
	h1{ font-size:20px; }
}
/* Landscape */
@media screen and (min-width: 321px){
	h1{ font-size:24px; }
}

Remember that for this to work we must use the viewport meta tag I showed you in my previous tutorial
This media query works (According to Apple's documentation) since iPhone OS 1.0, so there shouldn't be any problem with it, Firefox mobile should also support this, so by using max-device-width and min-width we should be able to develop specific CSS for every device without the need of PHP to include only certain style sheets

Orientation detection with JavaScript:

We can easily detect the device orientation by checking the innerWidth. This method will also work for other PDAs and SmartPhones:

var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};
 
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

This code will add a new attribute (orient) to the body element, which will be either portrait or landscape. All we have to do now is use CSS to filter out whatever orientation we need:
There is another method, which will work only on the iPhone though:

body[orient="landscape"]{
// CSS code here...
}
// ... or ...
body[orient="portrait"]{
// CSS code here...
}

That JavaScript also hides the toolbar by using the scrollTo() function when the orientation changes,

Next release:

On my next release in this series of iPhone web development tutorials, I will get into the really advanced JavaScript API we have for the iPhone (touch detection, gestures... etc) so stay tuned!


 


Hope you found this useful,
Alex

Fast and dirty CSS trick for IE

0
695 days
by in CSS

I actually think that we the developers need IE, it is like the bad guy in an action movie, the good guy wouldn't have a life without him, although sometimes you really wish it never existed! Haha just kidding, we all wish it didn't exist... But well, there are some times when we need something to work, we need it fast, and we just don't have time to care for the standards at that moment. For those times, we can use a simple trick like this:

Underscore to comment out lines

This is probably the simplest tip, you can use underscores preceding style definitions to set them as comments... for all good browsers out there, except of course IE. This way you can easily define specific IE rules by putting an underscore before the style.

#underscore{
	width:300px;
	_width:320px; /* This rule is only for IE */
}

This way we can easily add a different width, padding, or anything to an element in order to "get it right"

The clean way:

Now we are not going to do that with every single rule we need fixed! When we are going to fix more things, it's much better to put the fixes in a different stylesheet, and link it using a conditional statement. Basically, we want only IE6 for example to use those fixes, how is that done?

<!--[if lte IE 6]> <link media="screen" rel="stylesheet" href="something.css" /> <![endif]-->

But this doesn't validate! We need to find a solution then, and it is not as hard as one could think :)

We are going to include that, inside another conditional comment, but this time inside one that is valid! So we would write it as follows:

<!--[if IE]><![if lte IE 6]><![endif]-->
<link media="screen" rel="stylesheet" href="something.css" />
<!--[if IE]><![endif]><![endif]-->

Now it validates! We have achieved using valid conditional comments to do this! I will now explain a bit more about these and how they work:

Conditional comments at a glance

You're smart (I hope) So let's race through this, conditional comments allow you to tell the browser to use some parts of your html only if a specific version is running (Or not) Let me show you the options we have: (Please note that this is the html valid version for each of them)

  • <!--[if IE]> To select Internet Explorer
  • <!--[if IE]><![if !IE]> Only if the browser is not Internet Explorer
  • <!--[if IE 5.0]> Only if it is Internet Explorer 5.01 (There are other options as well)
  • <!--[if !IE 5.0]> To select for IE 5.5 or 6 or 7.0

We also have some keywords that will allow for more control:

  • gt = Selects greater than
  • lt = Selects less than
  • gte = Selects greater than or equal to
  • lte = Selects less than or equal to
  • ! = Selects all but what the expression says (i.e. It negates the expression)

For more information on conditional comments check out this guide by Manfred Staudinger

Stylish CSS trick for your Website

1
838 days
by in CSS

Maybe a few of you noticed this on some websites, maybe some of you even use it.
Right now this works in Safari, Opera, and Konqueror and Firefox 3.x. (I think it doesn't work in Firefox 1 or 2, correct me if I'm wrong)

What I'm talking about is the text-shadow, wisely applied to your design, it can give an great touch of elegance to your site.
Here you have an example:

Before -> After

And here you have a coded example:

Test shadow

The code

The CSS for this is very simple, we will simply apply a slight text-shadow, of 1px with no blur, to the text:

 
.elegant{
text-shadow:#FFFFFF 0 1px;
}
 

This effect works best with dark grey text over light grey background, and it is a very useful style for "2.0" designs.

Hope you enjoyed it!
Alex

CSS3 New features – Interesting info ;)

0
968 days
by in CSS, Graphic Design, Layout/Styling, Web-related

Hello fellow developers,
I'm sure all of you have heard of the "new" CSS3 stuff, it's been around for a while now, and it certainly has some very interesting new features.

First, I'll review some of the things that were the hardest to develop, yet they looked so damn well:

  • Rounded corners - We all love them, but how hard is to find a good way to do them?
  • Alpha transparency - PNGs, JavaScript tweaks... I must admit they are hard...

Plus, I'll show you how to create rounded+transparent borders!

Conclusion: The world needs new CSS features:

Solution: CSS3

Let's get going

Now before we get too exited, take into account that these new features "work" on major browsers, except obviously IE. So I would never use them for client sites... Meaning that you should only use these for personal designer portfolios, where you want to impress colleagues.

So now that this was clear, let's see how the new stuff goes:

Rounded corners:

For this you only have to select the element and use the following CSS code:

 
#example{
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
 

Demonstration:

Example Div (CSS code for it below)

CSS for the example:

 
	background-color:#FFFFFF;
	border:#CCCCCC solid 2px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding:30px;
	text-align:center;
 

For more options go to the official CSS3 specs page for rounded corners

Transparency

This one is one of my favorites, combined with rounded corners :)

The way it works is simple, you can make any background color transparent by using one of several methods, I will show you the one I consider the easiest.

You know how in normal CSS we can select colors via the RGB color code, as in:

 
color: rgb(0,0,0);
 

Well, in CSS3 we can now add a fourth parameter, that will contain the alpha information, from 0 to 1.

Demonstration:

Example div. CSS for it below

CSS for the example above:

 
	background-color:rgba(0,0,0,0.5);
	color:#000;
	padding:30px;
	margin:20px;
	border:#CCCCCC solid 2px;
	text-align:center;
 

This effect won't look as cool here, because the background is a plain color. Use it over textured backgrounds for a great effect!

Rounded+transparent borders!

These really look amazing, rounded, transparent borders! Take a look at a live example

Unluckily, we cannot use rbga() colors on borders, but there is a simple workaround, embed the div you want with another one, with a padding of the size of the border (It looks better with larger borders)

Demonstration:

Example CSS below

CSS for the example above:
DIV 1 (Outer div) - Note the bigger radius

 
margin:20px;
padding:20px;
background-color:rgba(0,0,0,0.5);
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
 

DIV 2 (Inner div)

 
padding:20px;
text-align:center;
background-color:#FFFFFF;
color:#333333;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
 

Well, I hope you found this interesting!

Show us your uses!

Have you already implemented any of these techniques? Please show us!
Comment below with the URL of the site where you used the new features of CSS3

Apply a background image to an image

0
1237 days
by in CSS

this is quite a neat trick, and it can look really good depending on your design and the image you put as background...

To get it to work all you need is to apply a padding and display:block; to the image. So the CSS would be:

 
img{
	display:block;
	padding:10px;
	background-image:url(image.gif);
}
 

Here is a very smart use of this technique, where a div contains the sky, the image is a little man running, with an animated background that simulates motion.

Read the post that explains how that was achieved if you have any doubts.

Enjoy,

Next »
Go to Top