Tag: CSS

Web Design History: Looking Back Through 20 Years of Design Evolution

The web has transformed how we do things. The first website went online nearly three decades ago and since that time, there has been a huge transformation. It is now possible for people to share information easily and efficiently. The evolution of the web has been marked by evolution in web design. Some of the… Continue reading Web Design History: Looking Back Through 20 Years of Design Evolution

Best WordPress Contact Form Plugins

If you run a WordPress site, you need a reliable contact form so that visitors can reach you with their questions and comments. However, with so many WordPress form builders on the market, it can be difficult to find the very best contact form WordPress has to offer. To save you the time-wasting and head-scratching… Continue reading Best WordPress Contact Form Plugins

Two Ways to Create a CSS Frosted Glass Effect

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} In this tutorial I’ll show you how to create a frosted glass effect in CSS.  You’ll already have seen this glass blur effect in action in UIs (User Interfaces) such as on MacOS and iOS, even Windows nowadays, so the glass background is definitely a trending effect.… Continue reading Two Ways to Create a CSS Frosted Glass Effect

How to Maintain the Selected Option On Page Load

Imagine you’re using a <select> element to navigate between pages–ordinarily the select will return to its default option when the page reloads. Today we’ll learn how to maintain the selected option, ensuring that whatever page you’ve selected remains selected even once the new page has been served. To demonstrate it, we’ll use a demo project with… Continue reading How to Maintain the Selected Option On Page Load

Create Style Variations for WordPress Gutenberg Blocks: Part 2

In the previous post we learned all about block style variations and how they’re used in the brand new WordPress 5.0 editor to switch between predefined styles easily. We’ll take things a little further in this post by providing more examples to give you a solid base for implementing block style variations in your own… Continue reading Create Style Variations for WordPress Gutenberg Blocks: Part 2

7 Things You Must Remove From Your Website Before 2019

December 11, 2018 by Alex Fox If you’ve got these things in your website, you better remove them before 2019. Here’s our “favorite” outdated or regrettable content choices. Mouseover Navigation Menus The most obvious problems with mouseover navigation menus is that not every visitor has a mouse. How does a mobile user “mouseover” something? Obviously,… Continue reading 7 Things You Must Remove From Your Website Before 2019

How to Make a Great (Coming Soon) Website Product Launch Page

Launching a new product is an exciting business venture, one that could mean a world of difference for your business. However, as you’re prepping for the launch, it’s important to think about how you’re going to promote your product as well as make it possible for people to buy it. Here are two options: Create… Continue reading How to Make a Great (Coming Soon) Website Product Launch Page

20+ Great Product Landing Page Templates (2018 Design Examples)

When it comes to promoting your product online, a well-designed product landing page can make all the difference for a successful launch. Given the fact that landing pages incorporate a minimal design that eliminates unnecessary distractions, it’s easy to understand how visitors have higher chances of converting into customers and clients. As such, it’s essential… Continue reading 20+ Great Product Landing Page Templates (2018 Design Examples)

Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)

In this tutorial we’re going to take a bunch of ordinary thumbnail links and turn them into a responsive CSS grid gallery with a blurred hover effect. We’ll also use a great CSS trick to make sure touch screen users don’t miss out! Here’s what we’ll be creating: A Little Background Recently, Rachel McCollin wrote a… Continue reading Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)

Create Style Variations for WordPress Gutenberg Blocks: Part 1

Now is an exciting time for WordPress developers with the official release of version 5.0 just around the corner. This will mark the debut of the brand new editor, code-named Gutenberg. If you have anything to do with WordPress on a regular basis, whether as a developer or as a user, then you’ll probably understand… Continue reading Create Style Variations for WordPress Gutenberg Blocks: Part 1

CSS Variables: An Introduction, With Code Examples

CSS variables, also known as CSS custom properties, expand the script-like functionality of CSS into something that resembles a programming language. If you’re at all familiar with any type of programming language, you know that variables are the foundation of any action. Variables are set, compared, altered, and saved throughout the program as the means… Continue reading CSS Variables: An Introduction, With Code Examples

Target CSS for Specific Content With WordPress Template Tags

What You’ll Be Creating Learning WordPress development isn’t just about learning to code PHP. You’ll also need some HTML and CSS skills if the sites, themes and/or plugins you create are going to work well. In this tutorial, I’ll show you an incredibly useful feature of WordPress that mixes PHP with some simple CSS. It’s… Continue reading Target CSS for Specific Content With WordPress Template Tags

Implement Autoplaying GIFs Without Using GIFs

The GIF format is just as popular as its ever been. It may even be more popular than ever before. People love sharing short, auto-playing clips on social media. and the GIF accidentally became the chosen format for that purpose. Unfortunately, the GIFs popularity doesn’t mean that the GIF is a good format. While functional,… Continue reading Implement Autoplaying GIFs Without Using GIFs

Keyboard Accessibility Tips Using HTML and CSS

Making your website accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS. A11y From the Beginning These tips are part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and… Continue reading Keyboard Accessibility Tips Using HTML and CSS

Draw with CSS: Using CSS To Draw Elements

With clever use of CSS properties, it is in fact possible to draw very complex shapes. All the shapes below were drawn with CSS alone. It might be that CSS isn’t the best way to render shapes in the browser window, but it’s very fast and included for “free” on all modern browsers. Learn how… Continue reading Draw with CSS: Using CSS To Draw Elements

How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities

In this tutorial I’ll show you how to quickly build layouts with Bootstraps 4’s responsive flexbox utilities. To gain a better understanding of these utilities, we’ll examine four different examples. Note: this tutorial assumes you’re familiar with Bootstrap 4 as well as flexbox. Take a look at these courses to get you going in the right… Continue reading How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities

Keyboard Accessibility Tips Using HTML and CSS

1. Test Your Site for Keyboard Accessibility The most important goal of keyboard accessibility is to make every interactive element, such as links and form controls, available with the Tab key. This is how keyboard-only users navigate through a web page. Testing your website for keyboard accessibility is actually pretty easy: just press the Tab key… Continue reading Keyboard Accessibility Tips Using HTML and CSS

The Future of CSS

October 1, 2018 by Spyrestudios Anyone who knows a thing or two about coding is cognizant of the fact that CSS and HTML are necessary tools to shape a website according to the specifications of clients. CSS or Cascading Style Sheets is a front-end web development practice that makes use of graphical interfaces to interact… Continue reading The Future of CSS

How to Formulate an Email Design and Development Strategy

In this tutorial I’ll explain how to focus your efforts on the email clients and webmail clients being used by your target audience. Note: this tutorial is part of a whole week’s worth of email content on Tuts+ Web Design–check out the Mastering HTML Email learning guide for more! 1. Understand the Importance of a Strategy Your target… Continue reading How to Formulate an Email Design and Development Strategy

Testing Components in React Using Jest and Enzyme

This is the second part of the series on Testing Components in React. If you have prior experience with Jest, you can skip ahead and use the GitHub code as a starting point.  In the previous article, we covered the basic principles and ideas behind test-driven development. We also set up the environment and the tools… Continue reading Testing Components in React Using Jest and Enzyme

Building Gutenberg Blocks with create-guten-block

Gutenberg is the new WordPress editor and everyone is talking about it. It has introduced an all-new way of writing content with WordPress. So not only the developers can benefit from its block-modeled layout but the end-users will also be able to create dynamic page layouts with it.  However, building custom blocks with Gutenberg can… Continue reading Building Gutenberg Blocks with create-guten-block

What is Z-Index and How Does It Work?

June 18, 2018 by Alex Fox Elements on a web page can stack for a variety of reasons. With basic CSS positioning tools, it’s possible to stack elements on top of one other with negative margins, floats, and other tools. Even without specific position, elements stack, with div stacking on backgrounds on table cells stacking… Continue reading What is Z-Index and How Does It Work?

6 Cross-Platform Development Tools Worth Checking Out

There are many development tools out there, but getting by free and good ones is not that easy. That is why we are sharing 6 Cross-Platform Development Tools Worth Checking Out. Previously, we have already covered Four Robust Builders To Build Amazing Mobile Apps. So, without any further ado let’s take a look at these… Continue reading 6 Cross-Platform Development Tools Worth Checking Out