CSS has two very important properties on determining the position of an element in webpage: display and position. display is used to determine how elements are grouped and displayed on the page. While position is used to determine the exact position of an element on a page. And this post would explain position property in detail.position is used to determine the exact position of an element on a page. It has five possible values.staticrelativeabsolutefixedstickysticky is supported starting from 2017 in browsers and it would be explained more later.staticstatic is the default value of the posit...

calc function is a function introduced in CSS3, it can be used to calculate length values. There are a few good features which make it suitable for aligning an element vertically.One good part is that the operands can have different units like percentage, px, rem etc. This makes it very flexible when calculating the length value. One example:.rect{ margin-top:20px; height:50px; background:green; width:calc(100%-20px);}Here the left operand uses percentage while the right one uses px, they can work perfectly without any conflict.The result of calc is dynamic but not pre -calculated....

jQuery is now the most famous JavaScript library. There are around 57.3% websites in the world using jQuery, i.e, 6 out of 10 websites are using jQuery. If we only consider those websites which use libraries, then the percentage is even higher which is 91.7%.Although jQuery is very popular, its size is still a headache to many websites maintainers. The uncompressed jQuery 2.0 has a size of 235KB, the size is 81KB after optimization.The jQuery 1.8.3 which supports IE 6/7/8 has a uncompressed size of 261KB, the size is 91KB after optimization.It takes around 1 second to load this file, it may ta...

With the popularity of Retina screen, the requirement of the images in the webpages is higher. How to make sure the image still clear while enlarging twice on retina screen? This brings much trouble to web developers, the good news is CSS3 and HTML5 is trying to change this, we can use response image.What is responsive image?It means user agent loads different images according to different resolutions of output devices, it will not waste bandwidth as well. In addition, it can load respective images when the resolution of the device changes.CSS responsive imageiOS developers should be familiar ...

About a year and a half ago, I wrote about CSS3′s word-wrap property. The angle of the article was the fact that it was a feature that was new in CSS3 that didn’t exist in CSS2.1 and it worked in just about every browser, including old IE.Well, now that’s all changed, which I discovered while researching additions to my CSS3 Click Chart. The word-wrap property has been removed from the CSS3 spec and other related properties have been added.Text-WrapThe text-wrap property “specifies the mode for text wrapping”. Well, that description doesn’t tell us a whol...

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.View demoHere’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:Remember the previous CSS3 dropdown menu? That menu is awesome, and thanks to you is the most popular tutorial around here (at this time).Perhaps the best title for this article would have been: CSS3 dropdown menu – Revisited...

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable.There are two main techniques that are extolled:Size with pxSize with emLet's review these two approaches before I reveal the magical third.Sizing with pxIn the early days of the web, we used pixels to size our text. It's reliable and consistent. Unfortunately, users of Internet Explorer—even in IE9—do not have ...

With the rise of both very large screens and mobile devices, web developers have to be able to create websites that display correctly and look good whatever the device is. Sure, you can use good old techniques like fluid layouts, but I’ve got something better to show you today. This tutorial will teach you how you can create an adaptable website layout using CSS3.Getting startedView demo (Horizontally resize your browser to view it in action)Download filesCreating the default layoutThe first step of this tutorial is obviously to create a HTML page. I chose to make a simple HTML5 pa...