CSS Columns for CSS Image Grid
CSS columns allow us to define columns in a container using the
column-count property. The
column-count property sets the number of columns in a container (such as <div></div>). Another important property is the
column-gap property, which sets the gap between each of the columns. Columns are excellent to organize content on your website.
Although CSS columns can be used in multiple ways, I am going to show you how to make a Polaroid Style CSS Image Grid with Captions, (Also referred to as a Masonry Image Grid). For our CSS image grid, we will be using HTML and CSS programming languages only, so it should be fairly simple for the beginner to follow along, especially if you have done any of my previous pure-CSS tutorials.
The CSS Image grid/gallery will have 3 columns and display “old-school” style Polaroid images. Here is an example of how our finished project will look:
Polaroid CSS Image grid with Captions
3D Cube Image Slider with CSS Transform
Today, I am going to show you how to create a neat CSS 3D cube slider with HTML and CSS coding languages. A spinning 3D Cube is a very cool technique to show off images as well as your coding skills. CSS has come a long way and animations are much easier to create without the need for extra languages. We will be using CSS transform and CSS animation properties to create a cube. The 3D cube, that we will design, will have pictures on each of the 6 sides, then it will spin and show all the pictures before restarting the CSS animation. Here is the HTML CSS 3D cube slider that we will be creating:
*CSS Animations may vary slightly due to browser compatibility.
What is an HTML CSS Image Slider?
A HTML CSS image slider is a creative way to show an image slideshow. An image slider is basically an object on your webpage that cycles through the various images that you provide it, only displaying one at a time. And if you couldn’t already tell, a HTML CSS image slider is technically an image slideshow that has been created using only HTML and CSS programming languages. The images in your HTML CSS image slider can be set to automatically scroll using CSS animations, or you can take advantage of CSS transitions and implement slider control buttons that will change the image only on a web visitor’s click. Once again, an image slider is a great way to present dynamic content to your website visitors.
A lot of times an HTML CSS image slider is also referred to as a “pure CSS image slider” (just the HTML part is left out). Also, the terms slideshow and slider can be used interchangeably here. 🙂
Creating an image slideshow/image slider with just HTML + CSS was not an easy task few years ago. Since the release of CSS3, transitions and animations using CSS have become very easy. A great slider can be created with just a few lines of code. It is the perfect coding project for a new web developer to get his or her hands dirty. Anyhow, let’s get started.
I will be showing you how to make the following image slider:
IrfanView is a small, efficient, yet powerful utility used to view and manage image files. It supports various image formats, which Windows may not support natively. For example, IrfanView supports gifs and ico file types. For more information about IrfanView, please visit: IrfanView Website
Lets say we have 5 tif image files that we need to convert to a single multi-page file for email or whatever other reason you may have. This process is very simple.