CSS Examples with Source Code

Pure CSS Cool Loading Animations and Spinners

Pure CSS Cool Loading Animations and Spinners

The page loading animation which build with Pure CSS are commonly used in web designing and today we have ready a few cool spinners which made with pure CSS only. The spinners can be some GIF, SVG or…

Read More »

Pure CSS Slideshow Autoplay without Javascript

Pure CSS Slideshow Autoplay without Javascript

After getting a lot of feedback, Today I have the plan to share you pure CSS slideshow autoplay without Javascript. It comes with dot navigation support. Furthermore, it also supports the title and description text over each slider…

Read More »

Simple Pure CSS Sticky Header On Scroll Fixed Header

Simple Pure CSS Sticky Header on Scroll

It’s time to create simple but pure CSS sticky header on scroll that will stay fixed at the top the page. When user on scroll down the page, the fixed header comes along with the mouse scroller. Header…

Read More »

12+ Pure CSS Ribbon Shapes without Images

Animated Pure CSS Ribbon Shape

Are you looking for some cool ribbon shapes which build with pure CSS? Why not have a look at a great list of ribbons which are easy to implement and work well on kind of desktop or mobile…

Read More »

CSS Notification Message Alert Boxes with Popup Animation

CSS Notification Message Alert Boxes with Popup Animation

Notification messages can be used to inform the user something special like an error, success, and warning, etc. Today, we will build CSS Notification Message that works with the button when clicked. We will create four different types…

Read More »

How to Make Typing Text Effect Animation Using CSS

Make Typing Text Effect Animation using CSS

This tutorial is about to create a CSS typing animation text effect by using HTML and CSS3 animation. Not only this but we will also create jquery & multiple lines typewriter effect using CSS. This tutorial is about…

Read More »

Smooth CSS Fade in On Page Load Animation

Smooth CSS Fade in on Page Load Animation

A day ago, We created the CSS3 fade-in animation but today we are going to make similar transition effects on Page Load. It works after page load. We will apply the CSS animation on div elements in the…

Read More »

Create Fullscreen HTML5 Responsive Video Background

Fullscreen HTML5 Responsive Video Background

Are you look for a solution to add a responsive but fullscreen HTML5 video as background? And want to make it work with most of the major browser including mobiles? In this tutorial, You will learn how you…

Read More »

How to Overlay Text on HTML5 Video

How to Overlay Text on HTML5 Video

It’s easy to overlay text over the images but what about adding text over the HTML5 video element? Yep! it’s easy and quite possible with few lines of CSS. I am going to use the same method which…

Read More »

Expanding Search Bar with jQuery & CSS Transitions

Expanding Search Bar with jQuery & CSS Transitions

The expanding search bar is a new way in the latest web design trends. Initially, the search bar is hidden from view and can expand when clicking on the magnifying glass button. It has a fluid width and…

Read More »

How to Add HTML5 Video Overlay Play Button

HTML5 Video Overlay Play Button

It is isn’t quite hard to add the Overlay Play button over HTML5 video. All we need to use the CSS and bit of Javascript. In our previous article, we have explained the method of adding CSS text…

Read More »

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

The CSS flip animation is great fun to show more information on the same DIV element by just flipping it on hover. The beauty of CSS3 is that It allows you to create unlimited effects without touching Javascript….

Read More »

How to Make Metro Style Windows 8 CSS3 Menu

Metro Style Windows 8 CSS3 Menu

This tutorial about creating metro style windows 8 CSS3 menu. We will teach you how you can style the menus just like window eight by using HTML5 and CSS3. It’s easy to build with the help of DIV…

Read More »

Pure CSS Radial Progress Bar with Plain HTML / CSS

This is another post to create a radial progress bar by using plain HTML/CSS. But before we go ahead, Did you try out a pure CSS percentage circle which build with animation. Few months backs I was working…

Read More »

Fullscreen Video Parallax Background Using CSS3

Video Parallax Background

Did you try an image parallax scrolling? What do you think about adding video parallax background by using CSS3 and HTML5 only? You might be thinking is it possible? Yep, that’s entirely possible and in this tutorial, you…

Read More »

Pure CSS Percentage Circle with Animation

CSS Percentage Circle

We have already posted a pure CSS radial progress bar, and here we will show you another way of making percentage circle with animation. Our previous tutorial was built with gradient colors. Today I am going to demonstrate…

Read More »

Pure CSS Image Slider with Caption & Next/Prev Arrows

Pure CSS Image Slider without Javascript

Looking for a responsive pure CSS image slider which comes with endless possibilities? In this tutorial, We are going to create one with the ability to add caption text with each slide. It also comes with creative arrow…

Read More »