Search
Falling Stars CSS Animation
falling stars css animation See the Pen Falling Stars by Prasenjit Nayak (@StarKnightt) on CodePen.
A CSS and HTML Only Carousel Slider
Why is it that sliders and carousels need a bunch of javascript and other css files to get them working? I have seen so many complex sliders with a lot of javascript and libraries that may not even b..
Social Header Links easy Drop in Code with Font Awesome Icons
Drop in this code in the header of your site to quickly add some social links in your header. Social Icons in Header This version uses foundation for the grid system. But you can swap this grid..
Bootstrap 4.2 Kitchen Sink
Here is the full (almost full) collection of bootstrap elements in this kitchen sink code for bootstrap. Thanks to ycohio for this useful reference.
Make your site look like windows 7
How can i make my website look like Windows 7? You can just add the Windows 7 CSS Framework to your site, and it will look like windows 7. Well almost like it, you will also have to add some custom c..
Change your cursor into an Emoji Cursor or Image Cursor
You can use the following property to change the cursor on an element. The property we will be changing is cursor Preview of the Cursor States About the Cursor CSS Property The curso..
Why to use a CSS Reset?
What is a CSS Reset? A CSS reset is a statements usually at the top of your style sheet, to reset all the browser defaults so that you can start with a fresh style sheet. Why do i need a CSS R..
Front-End Checklist
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production. If you want to check your project for the best practi..
Font Awesome Icons
I have been using this awesome font library for so long now that i almos overlooked it as being such a stable web developer resource for an amazing set of icons and easy to add to your project. Wha..
A fresh new and super tiny CSS Reset
A nice and small CSS reset script using newer selector tags than some of the older reset scripts. Features This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘..
simple.css a nice simple and stylish framework replacement
What is simple.css? Simple CSS is a framework that you can just drop into your site, and it styles the actual html elements, so no class names are required for this out of the box, just add the scrip..
zoomist.js: Library for easy Image Zoom & Pan
What is zoomist.js? zoomist is a javascript library that adds some nice zoom controls to your selected image. Rather than popping out the image in a modal or some other kind of overlay it adds contro..
Rounded Card Design with Shadow Palette
What is it? a nice rounded card design with a hero image on top, description text, hero title, more links and a shared by text area. Preview a preview of Rounded Card Design with Shadow Palet..
WCAG Responsive Accessible Menu Dropdown Library
What is WCAG Responsive Accessible Menu? Here we have a javascript library with css and html that produces a responsive and mobile compatible dropdown navigation system. When the screen size goes int..
Micro Modal a tiny animated light accessible modal script
What is Micro Modal? Micro Modal is a Tiny, dependency-free javascript library for creating accessible modal dialogs The aim of this library is to make modal dialogs accessible and easy to include i..
The New CSS Reset
What is The New CSS Reset? I remeber the time when i used to use something like this to reset the browser CSS to nothing and then start building my styles. CSS *,html,body { margin:0; padding:0; bo..
How to Center or Centre everything in a Container
Traditionally it has been quite tricky the vertically and horizontally center an item in a container or div element. This has been made quite a bit more straight forward with the grid layout and the ..
Easy Cookie Consent Modal Popup Window
A lightweight & gdpr compliant cookie consent plugin written in plain javascript. An "all-in-one" solution which also allows you to write your cookie policy inside it without t..
Responsive Mobile Bootstrap 4 Animated Rounded Navbar
What is it? An Animated Bootstrap based navigation with font awesome icons What can i use this for? This navigation works on mobile and desktop browsers for a nice twist to your navigation needs.&n..
A Collection of Button Hover Over Effects
What is it? A Large collection of buttons with hover over animations and styles. What can i use this for? You can use these to make the buttons on your website or web project more animated Concl..
Amazing Stripe Website Gradient Animation
What is it? An animated background using javascript html and css to achieve. What can i use this for? You could use is on the background in your website, or maybe on a hero type image. ..
Punica pure CSS Framework
Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support. What is Punica? Pu..
Neumorphic UI Element Examples
Here is a very slick example of Neumorphic ui elements, with some active examples. Credits Codepen, Maria M. Muñoz
Glassmorphism Creative Cloud App Redesign
A full ui for Creative Cloud redesigned in html css and javascript, amazing work by Aysenur Turk. It even has responsive views, dark and light mode, and the tabs are functional.
Animated Tab Bar
A very stylish and animated tab bar navigation with reveal text once the icon is clicked. Demo of Menu Items being Activated Credits Designed by: Hoang NguyenAuthor: abxlfazlOriginal image:..
Text Morphing Animation SVG
Here is a nice text animation that could be used for a title, or home animated element. From the Author This pen cleverly utilizes SVG filters to create a "Morphing Text" effect. Essentially..
Contact Form with Wide Hero Image using Responsive Block CSS and HTML
About this Content Block This is a piece i did a little while ago, but i will re-create it for this post Basically what we are creating here today is a wide and padded section of a home page with ..
adding a favicon to css bundle
I noticed as soon as i set this site up that it was missing a favicon. What is a favicon? Its this little icon up the top of the browser tab. see how there is a little globe icon on there, ..
Random Quote
