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.…
Tags: css
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.…
26 Useful Web Design & Development Cheatsheets
There are always ways to make the coding and design work you do faster and more efficient. With that in mind, i have put together a list of the most useful cheatsheets designer and developer can rely on.…
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.…
27 Cool CSS Gradient Button Examples
Gradient colors are cool, especially when you apply them to web button. So here are 25 Cool CSS Gradient Button Examples for inspiration to make a unique and distinctive button for your web and mobile apps.…