Animating SVG Gradients

CodingJoni Trythall • June 04, 2022

SVG gradients are so handy. We can fill complex shapes and create depth and character for our artwork all while having access to it in the DOM. Within SVG linear and radial gradient elements there are several attribute options available …

How to Create a CSS3 Mega Menu

CodingValeriu Timbuc • May 28, 2022

Topic: CSS3 Difficulty: Intermediate Estimated Completion Time: 1 hour In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are …

How to Create an Uptime Status Badge and Insert It into Your Website

Website DesignSam Norton • May 26, 2022

A status badge is an essential add-on widget component of a website as it provides a brief visual insight into a website’s real-time performance and operational status. Many online businesses spend most of their budget and time on online marketing …

Beautiful Examples of Sliders in Website Design

Website ExamplesNataly Birch • May 26, 2022

35 Beautiful Examples of Sliders in Web Design

Sliders in web design are one of the most controversial user interface units. Some people love them; some people hate them. The same goes to web developers: some developers cannot imagine a website without them; others never use them. The …

How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP

CodingValeriu Timbuc • May 21, 2022

Topic: jQuery / CSS3 Difficulty: Advanced Estimated Completion Time: 1 hour In this tutorial we will code an Upload Form from Impressionist UI. We will code it using the Plupload API. Plupload allows you to upload files using HTML5 Gears, …

How to Create a Responsive Image Slider in jQuery and CSS3

CodingValeriu Timbuc • May 14, 2022

Topic: jQuery (flexslider) / CSS3 Difficulty: Intermediate Estimated Completion Time: 30 mins Today we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3. …

Best Status Website Badge Examples: How to Customize the Design

Website Design, Website ExamplesNataly Birch and Andrian Valeanu • May 09, 2022

Do you know that visibility of system status is one of Jakob Nielsen’s 10 heuristics for user interface design? According to the most famous and respected web usability consultant and human-computer interaction researcher, who holds 79 patents on making the …

How to Create an Video Player in jQuery, HTML5 & CSS3

CodingValeriu Timbuc • May 08, 2022

Topic: jQuery / CSS3 Difficulty: Intermediate / Advanced Estimated Completion Time: 45 mins In this tutorial we will code an Video Player from Impressionist UI. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. …

How to Create CSS3 Pricing Tables

CodingValeriu Timbuc • May 03, 2022

In this tutorial, we’ll learn how to code and style CSS3 pricing tables from the Impressionist UI. This step-by-step guide will help you create elegant and responsive pricing tables with ease. Whether you’re a beginner or an experienced developer, you’ll …

Best Status Page Examples: Advanced Customization, Design, and Incident Reports

Website Design, Website ExamplesNataly Birch and Andrian Valeanu • April 27, 2022

Expect companies to embrace transparency in platforms to reinforce relationships with the digital crowd and improve their positions in the market this year. Information such as system metrics, incident data, maintenance calendars, and even the status of the hosting provider …