25 Pure CSS Parallax Scrolling Examples

The parallax effect is created when the user is scrolling through a website and multiple backgrounds or images are moving at different speeds. It creates a sense of depth and overall it’s a fun experience. Pure CSS parallax is also easier to implement than Javascript, and is often more performant. When building single-page sites, generally you rely on javascript plugins to create effects for images and animations. So here is collection of cool CodePens featuring Parallax animation effects in pure CSS for inspiration to use in an upcoming project or learning a new trick in the quest to do more with front end.

25 Awesome CSS Star Rating Examples

Star rating can be found everywhere. It is a standard rating scale that’s being used by popular marketplace sites. Star rating is a valuable metric that tells others what most of the people think about a certain product, an app or a movie in general. A star rating comprises of stars with the amount usually at a maximum of five. You let your users rate an item using stars. One star means poor; five is excellent. By selecting more than one star, all previous stars should be filled.

15 Awesome CodePen Demos for CSS Pagination

Pagination is still the most popular way to load new items on a website. Pagination is when the content of a website is divided over multiple pages that are linked together through some navigational system. If you scroll to the bottom of a page and see the row of numbers – that row of numbers is a site’s or app’s pagination. This UI pattern can use number indicators, or “older” or “next” links. With pagination implemented in this manner, any visitors to the website will be able to browse through more content, since the user will be able to visualize their location compared to the other pages.

27 Amazing CSS Skeuomorphic Designs

Most of us remember a time before flat design, when user interfaces did not consist of minimalist icons and bright colours, but objects designed to look very much like their physical counterparts. This mimicry was a design trend known as skeuomorphism. Skeuomorphic design means making visuals and images look like a realistic imitation of real life objects, by using shadows, gradients, bevels and 3D-effects. Every trend sooner or later is changed by a new one and skeuomorphic design was substituted by a flat design, which is focused on simplicity and which in a way solved the problem of loading times and responsiveness.

22 CSS Pricing Table Examples

Pricing tables are an essential tool when it comes to communicating the value and the benefits that you have to offer. They help your website visitors compare different packages quickly so that they can easily see which one is the best for them. The problem is, pricing tables are a challenge for the designer because of the critical role they play in the sign-up process. They have to convey a large amount of data and must do so in an easy-to-understand form. They must also clearly differentiate between the features of various pricing plans and guide the user to pick the most appropriate plan.

25 Examples Of Awesome 3D CSS Typography

CSS is a veritable playground for type designers. It allows you to push the boundaries of typography, and explore new creative possibilities. In this post i want to share some amazing examples of 3D Typography created entirely with the magic of CSS animation, transform, transition and text-shadow.