Working with CSS transformations

CSS transform allow us to transform elements in 2D or in 3D space.  With transform property you can scale, skew, translate and rotate an element. The transformations occurs at the current position in the coordinate system of the element which can be 2D or 3D. However, you can change the position of the transformed element by using transform-origin property. The syntax fortransform-origin is

2D transform-origin: x,y;  |  3D: transform-origin: x,y,z;

You will need to use vendor prefixes while using these properties since it is still in a draft mode(2012). For translating an element 20 pixels on right and 30 pixels at the bottom we will need to write the CSS styles like below.

transform:translate(20px, 30px);
-ms-transform:translate(20px, 30px); // IE
-webkit-transform:translate(20px, 30px); //Chrome, Safari
-moz-transform:translate(20px, 30px);//FF
-o-transform:translate(20px, 30px);//Opera

To skew an element by 30 degree along x-axis we will have to write the following lines-

transform:skew(30deg, 0deg);
-webkit-transform:skew(-30deg, 0deg);
-moz-transform:skew(30deg, 0deg);
-o-transform:skew(30deg, 0deg);

To scale an element twice of its current width we will have to write the following styles

transform:scale(2,1);
-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-o-transform:scale(2,1);

You can check the demo of  all the transformation properties here

Responsive navigation with jQuery

In the past posts, we see that our navigation is taking the entire viewing space. To optimize the navigation we can take help of jQuery’s hide() and show() functions. Check the Demo here with the explanation given below.

$(document).ready(function(){
if($(‘.navigationWrap’).width()<480)
{
$(‘.navigationWrap’).hide();
$(‘.menuBtn’).css(‘display’,’block’);
} else
{
$(‘.navigationWrap’).show();
}
$(window).resize(function(e) {
if($(‘.navigationWrap’).width()<480)
{
$(‘.navigationWrap’).hide();
$(‘.menuBtn’).css(‘display’,’block’);
}
else
{

$(‘.menuBtn’).hide();
$(‘.navigationWrap’).show();
}
});
$(‘.menuBtn’).click(function(e) {
$(‘.navigationWrap’).slideToggle();
});
});

On loading the document, we are checking if the size of the navigation wrapper is less than 480px i.e. if the screen size of the device in which the document is currently being viewed is less than 480px. If it is true then we are hiding the navigation and showing an anchor as a Menu button which will act as a toggle button.

I have written one more event handler function for window re-size. I have used the same logic for this block also that is used in the onReady. In the end I have applied a slideToggle function to the navigation Wrapper on click() event for the menu button. With this code we have optimized the screen for small devices.

Media Queries continued..

While learning about the Media Queries, I was having confusion between the properties height/width and the properties prefixed with device. So I feel it is really important to mention the difference before going ahead and diving deep into Media Queries. The non-prefixed properties specify the height/ width of the browser window you are currently viewing(Viewport), while the properties prefixed with device- defines the width of the device screen which can be a monitor. Another important feature I shall mention here is the Viewport meta tag which is used to avoid displaying a website in mobile browser in desktop version. The meta tag can be written in the following format.

<meta content=”viewport” content=”width=device-width,  initial-scale=1, maximum-scale=1 />

The tag asks the device to treat the width of the viewport to be equal to the device width, which means it the rendering area and viewport will be same. So you can continue using the normal width property without having confusion with the prefix. The tag also restricts the device from scaling the content.

Apart from width/ height properties we have one more important feature- Orientation. There can be two types of orientation values-Landscape and Portrait. It is not yet supported by many devices. Check the modified demo here

Using Media Queries for Responsive Web Design

You might have used the media attribute while attaching styles to target screen or sometimes to target printer by using ‘screen’ and ‘print ’ media types. Brallie, handheld, projection etc are the media types along with the above two that were supported in CSS2 and HTML4. By using these media types you can target any specific media. CSS3 introduces a new feature to make things responsive called as Media Query. It checks for the certain  attribute  like width, height and color and applies the respective stylesheet. For example-

<link rel=”stylesheet”   media=”screen and (color)”   href=”stylesheet.css” />

The above line means that the styles stylesheet would be applied to the media type of screen and the media must be color screen. Media Query is a logical expression which is either true or false.  If it is true respective stylesheet would be applied. So we can have Media Queries depending on the type of devices we are wishing to target. Consider the following example-

<link rel=”stylesheet”   media=”screen and  (min-width:320px) and (max-width:480px) href=”stylesheet.css” />

The above stylesheet is applied to the document only if the device screen size is 320px or more than that and less than 480px. Note that the use of ‘and’, It is actually working as logical AND. For logical OR we can use comma.  Like color in the first example, we have used min-device-width and max-device-width. These are the features that we use in the Media Query to test about the certain feature of the targeted device based on which the stylesheet is applied. Most of the features accepts ‘min-‘ and ’max-’ prefixes . The complete list of the features is listed below

  1. Width
  2. Height
  3. Device-width
  4. Device-height
  5. Orientation
  6. Aspect ratio
  7. Device-aspect-ratio
  8. Color
  9. Color-index
  10. Monochrome
  11. Resolution
  12. Scan
  13. Grid

I am attaching a demo to get the idea about the power of Media Query to make the things responsive. If you are checking this demo on Google’s Chrome, you can either re-size your browser window or click on the settings button at the bottom right of the developer toolbar. Select the User Agent and device metrics. If you are checking the demo on any smart phone, then let me know your feedback. I am continuing this topic in the next post to explore the above listed features.

Working with CSS3 transition properties

CSS3 includes transition properties which helps to make certain element to change its current state to a new one in a smooth manner. We see navigation bar at the top of many website. When we hover any link we see many times the background changes  in quick time. With CSS3 transition properties we can animate this change smoothly. Let’s see how can we achieve this..

CSS3 provides us four properties-

  1. transition-property
  2. transition-duration
  3. transition-delay
  4. transition-timing-function

Since these are new properties included in CSS3, browsers support this feature with their prefixes,  for chrome we need to use -webkit- prefix with each property.

Let’s start with out HTML code for navigation.

<ul id=”navigation”>
<li><a href=”javascript:void(0)”>Home</a></li>
<li><a href=”javascript:void(0)”>About</a></li>
<li><a href=”javascript:void(0)”>Contact</a></li>
</ul>

We have three menu items in our menu bar with the id ‘navigation’. Let’s add styling for these menu items to align in one line and to have smooth transition effect on hover state.

ul#navigation {
list-style:none;
}

ul#navigation li {
float:left;
}

ul#navigation li a {
background:#006600;
display:inline-block;
padding:10px 100px;
text-decoration:none;
color:#FFF;
-webkit-transition-property:background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function:ease;
}

ul#navigation li a:hover {
background:#00CC33;
}

In the CSS styles we are animating background color of the menu item by using transition-property. The second line -webkit-transition-duration:1s specifies that the transition will take one second to shift from old value to a new value. The third line -webkit-transition-timing-function:ease; specifies how the transition will change its speed over its duration.

Now we have to specify a hover style in which we have specified a different color. When we will roll over any of the menu item, the background color of that menu item will change from the default color to the color specified in the hover style in a smooth manner. Here is the final demo.