Author: saqibkhan

Using CSS3 Gradients The CSS3 gradient feature provides a flexible solution to generate smooth transitions between two or more colors. Earlier, to achieve such effect we had to use the images. Using CSS3 gradients you can reduce the download time and saves the bandwidth usages. The elements with gradients can be scaled up or down…

Using CSS3 Backgrounds The CSS3 provides several new properties to manipulate the background of an element like background clipping, multiple backgrounds, and the option to adjust the background size. The following section will describe you all the new background features of CSS3, for other background related properties please check out the CSS background tutorial. CSS3 background-size Property The background-size property can…

Defining Colors in CSS3 In the previous section you’ve learnt how to define colors using the color keywords and RGB notations. In addition to that CSS3 adds some new functional notations for setting color values for the elements which are rgba(), hsl() and hsla(). In the following section we’ll discuss about these color model one by one. RGBA Color Values…

Using CSS3 Borders The CSS3 provides two new properties for styling the borders of an element in a more elegant way — the border-image property for adding the images to borders, and the border-radius property for making the rounded corners without using any images. The following section will describe you these new border properties of CSS3, for other border…

Why Validate Your CSS Code As a beginner, it is very common that you will make mistake in writing your CSS code. Incorrect or non-standard code may cause unexpected results in how your page displayed or functions in a web browser. The World Wide Web Consortium (W3C) has created a great tool https://jigsaw.w3.org/css-validator/ to automatically check your…

Cross Browser Opacity Opacity is now a part of the CSS3 specifications, but it was present for a long time. However, older browsers have different ways of controlling the opacity or transparency. CSS Opacity in Firefox, Safari, Chrome, Opera and IE9 Here is the most up to date syntax for CSS opacity in all current…

What is a Sprite Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates. To display a single image from the combined image, you could use the CSS background-position property, defining the exact position of the image to be displayed. Advantage of Using CSS Image…

Introduction to Media Types One of the most important features of style sheets is that, you can specify separate style sheets for different media types. This is one of the best ways to build printer friendly Web pages — Just assign a different style sheet for the “print” media type. Some CSS properties are only…

What is Pseudo-element The CSS pseudo-elements allow you to style the elements or parts of the elements without adding any IDs or classes to them. It will be really helpful in the situations when you just want to style the first letter of a paragraph to create the drop cap effect or you want to…

What is Pseudo-class The CSS pseudo-classes allow you to style the dynamic states of an element such as hover, active and focus state, as well as elements that are existing in the document tree but can’t be targeted via the use of other selectors without adding any IDs or classes to them, for example, targeting…