In this tutorial we will create a simple image gallery with lightbox effect using only CSS3. The idea is to have the gallery thumbnails that are clickable, and once a thumbnail is clicked, the respective image is displayed in large size in the lightbox style, which often refers to a pop-in window with a clickable semi-transparent layer covering the rest of the page. Upon clicking the layer, it closes the window and returns to the page.
The CSS3′s RGBa property allows to set not only the RGB color but also a level of opacity. The A stands for Alpha, which refers to the opacity level of the color.
The text-shadow is not new property in CSS3, infact it was introduced in CSS 2, however the browsers have implemented it recently. As the name refers, the text-shadow property allows to create text shadow. Following is the syntax of the text-shadow.
With the CSS3 Transform property we can transform the appearance of elements. The transform property allows to translate, rotate, scale, and skew.
Each property is explained below:
With translate property, we an move an element from its original position by x-axis from the left side and y-axis from the top side. The Syntax of translate is
translate (x, y)
This tutorial demonstrates how to create simple scalable button using some of CSS3 properties such as border-radius and linear-gradient.
In my previous post, I explained how to make linear gradients in CSS3. In this post, I will explain how to create radial gradients in CSS3 with radial-gradient property without using any image.
We can create gradients in CSS3 without using any image. The gradients are supported by Mozilla(Firefox) and Webkit(Safari, Chrome etc) based browsers. Unfortunately Internet explorer does not support gradient feature yet. In this tutorial, I will explain how we can use linear gradients in the webkit and mozilla based browsers.
We can create nice rounded corners without using any images or JavaScript with CSS3 by using the property border-radius.
The basic use of border-radius is:
border-radius: 10px;
We can use % as well, for example:
border-radius: 10%;
However, as we need to add the vendor prefixes at the moment, we can use this property as following:
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
With the box-shadow property of CSS3, we can add shadows to the different elements on web page, such as div, span or images.
Following is the syntax for box-shad
box-shadow: <horizontal> <vertical> <blur> <color> <inset>
Horizontal offset: A positive value places the shadow on the right of the box, while the negative value will place the shadow on the left of the box.
Vertical offset: A positive value places the shadow below the element, while the negative value will place the shadow above the element.
Blur(Optional): A positive value of blur increases the blur and make the box shadow softer. The negatives are not allowed for the blur. If value of blur is not specified, it uses the default value 0, which mean no blur.
Color(Optional): The color value for the shadow. We can either use RGB colors or Hexadecimal colors.
Inset(Optional): The inset property creates an inner shadow effect which means that the gradient effect will be inside of the div.
