How to Embed PDF Document in HTML Web Page


Generally, a hyperlink is used to link a PDF document to display in the browser. HTML anchor link is the easiest way to display a PDF file. But if you want to display PDF document on the web page, PDF file need to be embedded in HTML. The HTML embed tag is the best option to embed PDF document on the web page. Using parameters in URL, you can specify exactly what to display and how to display PDF document.

Creating 3D Rotating Image Gallery with CSS


The 3D effect makes image gallery more attractive and provides a better user interface. There are many jQuery plugins are available for creating a 3D image gallery. But the 3rd party plugin increases the web page size which affects your website load time. So, if you want to make 3D image gallery with CSS without using a plugin, our CSS 3D concepts helps to create a 3D image gallery using pure CSS on the website.

Create Top Notification Bar with HTML and CSS


Top Notification Bar or Hello Bar is the best way to direct your visitors and promote website's most important content. Use top notification bar to promote products or show important notification for maximum reach. It's very easy to create a top fixed notification bar using HTML and CSS. Here we'll provide a simple script to add a top notification bar to the website using HTML, CSS, and jQuery.

Custom Scrollbars with CSS and Webkit


Customize the scrollbars with web page UI design adds an extra value to your website. Using CSS pseudo-element, you can easily change the default scrollbar style with your custom style. WebKit allow you to styling scrollbars with your custom CSS. If scrollbar pseudo-element is defined, WebKit turns off the built-in scrollbar style and use the style provided in CSS under ::-webkit-scrollbar element.

How to Create Sticky Social Media Floating Sidebar with CSS


Social media buttons are very useful for every website and it helps the user to get updates from the website. Also, sticky social bar surely increases the social media followers of your website and helps to drive traffic to your website. In this tutorial, we'll provide a simple CSS code to add animated sticky social bar at the left/right side of your website without impacting website design.

How to Create Loader Animation with CSS


A loader is a very useful element for every web project. When we use Ajax to update parts of a web page, some time needs to get the respective content. At this situation, preloader is a perfect choice for notifying the user to wait. You can use an image as a preloader or create CSS loader. If you want to make loader animation with CSS, this tutorial will help you to create simple and lightweight loader animation.

How to Create a Toggle Switch using CSS


The toggle switch will add a neat and clean user experience to checkbox functionality. The toggle switch can be created using pure CSS, so you can use toggle switch as a filtering button in your web project. If you want to provide a better user experience on the web project, then display a toggle switch instead of a checkbox. Here we'll provide the short CSS code snippets for normal and rounded toggle switch.

How to Create Simple CSS Tooltip


Tooltips are a great way to showing details information to the user by hovering a text or image and it helps to improve the user experience of your website. Using tooltips you can display image caption, description for links, and useful information. You can easily create a tooltip with CSS without using JavaScript or jQuery. In this tutorial, we'll provide a short code snippet to create simple CSS tooltip that appears when the user moves the mouse pointer over a text.

Overlay Preloader Image over Div using CSS


In the web project, overlay image on div is a most used feature. Here we'll provide a shot CSS snippet for displaying a loader over content div. Preloader indicates that the content is loading. Not only for the list content, you can use it for every case where you want to overlay something on content.