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
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
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 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
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
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
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
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
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
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
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
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
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
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
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