A Pure CSS off-canvas Menu with 2 Demos

CSS menu off-canvas

The off-canvas menu using pure CSS The off-canvas menu is the one that slides and overlaps the main content with the navigation links. Generally, you may need to use JavaScript to create this type of menu. In this post, an off-canvas menu is shared with pure CSS. This menu type can particularly be useful for … Read more

CSS Based Tooltips Over Social Icons: SVG Based

CSS tooltips

Creating CSS-based tooltips In today’s world websites, showing social icons for sharing content is common. How about adding some effects by way of tooltips as the visitors hover over any icon of social networks like Facebook, Twitter, LinkedIn, etc? In this post, I am going to share such tooltip effects by using pure CSS. A … Read more

A CSS menu with tabs slider: live demo

CSS menu

The CSS tabs menu In this tutorial, a CSS menu is created which is tabbed style and slides as you click a menu item. The content of different tabs is contained in the same web page, so it can be used for the single-page web site. The navigation can be done by using mouse click … Read more

CSS Transform Property for Creating Water Wave Loader with Live Demo

CSS transform

CSS transform property for creating a loader In this tutorial, the transform property of CSS is used along with other properties for creating a loader for the web pages. You may use this for loading a complete web page or certain section or feature in a website. The transform CSS property can be used for … Read more

Categories CSS

Animating Images with CSS: 2 Demonstrations Using the ‘animation’ Property

CSS animation

The animation property of CSS 3 The CSS 3 animation property is used to create animations for different web elements including images. For that, you may use the shorthand animation property or specify different animation-related properties separately. The shorthand of animation property can be used as follows:  -webkit-animation: aniname 0.9s ease-in-out 0.3s 4 reverse forwards … Read more

Create Floating Labels with CSS Float and other Properties

CSS floating form

Floating labels for input fields by using CSS In this tutorial, floating labels for the form input fields are created by using CSS float and other properties. The text field labels float upwards as any textbox gets focused by pressing the mouse click or tab key from the keyboard. Have a look at the code … Read more

CSS Gradient Background with Animation: 2 Demos

CSS gradient background

Generating the gradient background in CSS The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images. You may use the gradient property for different reasons; one of the purposes is to use it as background for the whole web page or different elements. In … Read more

A mobile friendly (responsive) CSS and JS menu using media queries

CSS menu button

The CSS menu with JavaScript With the fact that mobile searches have crossed the desktop searches, this becomes necessary that your website is mobile friendly. The Google search engine also adds mobile factor as the ranking factor along with the tag in organic search results as: “This website is mobile friendly” (Update: This is showing … Read more

A Pure CSS background image as slideshow solution with 2 examples

CSS background image

Using CSS background images as slide show with Ken Burns effect In this tutorial, the Ken Burns effect, which is basically used with still images for panning and zooming, is created with pure CSS. The CSS background-image property is used for specifying the images acting as the slideshow. While different CSS 3 properties like transform, z-index … Read more

Categories CSS

Bootstrap text shadow effects with pure CSS: 2 demos

Bootstrap CSS text shadow

Text effects as using Bootstrap with custom CSS In this tutorial, I am going to use pure CSS with Bootstrap framework for creating text effects that you may use for headings or some other purpose. Normally, as using the text-shadow CSS property, you will specify the horizontal and vertical shadows along with blur and color … Read more

A CSS pre-loader used with Bootstrap – 2 demos

Bootstrap pre loader

The preloader by using CSS You may use this preloader as the content of the website is loading behind the scene. For example, images are heavy and you want all images to be loaded for the carousel or other sections of the web page or your website has a heavy app that takes some time for … Read more

Categories CSS

A pure CSS based accordion

CSS accordion blockquot

What is CSS accordion? The accordion is the way to present information that generally contains a title and its body contains the content. Normally, it fits the screen size of the users. In the jQuery section, I showed how you can use the jQuery’s accordion plug-in with examples. It uses JavaScript underway and makes the … Read more

How to Create and Style HTML Checkbox with pure CSS and a plug-in

HTML checkbox bootstrap

The checkbox tag In HTML, you can create a checkbox by using the <input> tag and specify the type = checkbox, as shown in the syntax below: <input type=”checkbox” name=”checkboxName” value=”Value_of_checkbox”> In this tutorial, I will show you how you can create checkboxes in HTML forms. I will also explain how you may style checkboxes … Read more

Beautify HTML Buttons with CSS and Bootstrap

CSS button hover

How to create HTML buttons? In web pages, the buttons are generally used in forms to submit data. The HTML buttons are also used as separate elements e.g. for navigation (next, previous), etc. in websites. The button can be created by using two ways in HTML: By using the button tag This is how you … Read more

Ten Examples to Set Images by CSS background-image Property

CSS background repeat

Purpose of CSS background image property The background-image property of CSS is used to set the background image of the HTML elements like div, paragraphs, headings, table headings, body, etc. You can set images with different extensions like PNG, JPG, GIF, SVG, etc. You may use one or more images to set the background of … Read more

Categories CSS