Posted on

CSS Layers Tutorial: Real CSS Encapsulation

Just around the corner, a new feature is rearing its head and it's getting frontend developers excited. That feature is CSS layers. With layers, we'll finally be able to fully encapsulate our CSS for import. That means modules, scripts, or anything else imported into your projects can have CSS that is entirely separate from your own, putting to bed the age-old problem of styles overriding each other. It will also let us be more agile with the CSS we add to our pages with custom import statements.

Let's take a deep dive into CSS layers, and how they will work when they land in a browser near you.

Posted on

CSS Transitions Generator

CSS transitions give us the ability to smoothly transition from one set of styles to another. Without them, your hover, click and transform effects can look janky and sudden. 

To illustrate a CSS transition, below are two emojis. Click on them to see the difference:

Posted on

How to Use Aspect Ratio CSS Property in Responsive Web Designs

Being web developers, we are hardly satisfied by the dimensions of our elements on the web page. What if I could increase that image width to 30px more? Or maybe 20 percent? Deciding the final width at the end now requires us to adjust the height as well! What if multiple elements were to be adjusted according to the new values like in a CSS-grid or subgrid structure? This is where the CSS aspect ratio comes into play.

The aspect ratio is extremely important given the effect a UI has on the end-user. The aspect ratio is always a measured property that needs adjustments and careful scrutiny. It had become frustrating to waste a lot of time just to adjust an element to look perfectly on multiple devices with time. With the recent trends in web development, there has been an increase in the complexities of the project. A small change in a single element’s dimensions can cause a ripple effect on the complete web page.

Posted on

How To Do Deletion Animations With CSS

In this quick tutorial, we're going to be looking at a bunch of different 'delete' styles to use on your next project. So let's take a look at some cool ways to delete things in your next project. Below are a set of delete animations that all work on similar principles. Let's take a look at them and then we'll jump into how they work. 

To start the animation, simply click the cross button on each card in the Codepen below.

Posted on

CSS Pixel Art Generator

Recently, I read an article outlining how to create CSS pixel art with box shadows. I thought it was a really cool idea - and thought it'd be interesting to make a generator to let you create exportable pixel art from the browser using this effect. In the Codepen demo below, you can draw your pixel creations, and then click "Generate CSS" to get your pixel art in CSS, which you can copy into your web pages. Works better in full screen!

How it Works

As described in the article, we use scaled-up box shadows to act as pixels on the screen. We can scale these up and down to make our pixel art bigger or smaller.

Posted on

Meta Tag Reference and Bullet Proof HTML5 Template

For every HTML page, you should have a few key elements to ensure fast loading and good SEO. The template below gives you all of those features, which you can quickly customize for your needs. 

I've also listed all useful meta tags below if you want to pull them out individually.

Posted on

iOS Crystalline Blurred Backgrounds with CSS Backdrop Filters

iOS is full of cool crystalline glass effects. This effect has long been easy to do when you have easy access to graphic shaders since these can do most of the heavy lifting in terms of calculating what is underneath the layer, and blurring it into the foreground. However, for a long time, it hasn't been possible in CSS... until now.

In more recent specifications of CSS, we have finally gotten backdrop-filter. Mostly meant for modals, it also has applications on stylized dropdowns which are common across the web.

Posted on

How CSS Subgrids Make Vertical Alignment Easy

Do you know that both the grids and alignment CSS properties are always talked about together? Why? Because of the nature of their existence and the mess that alignment creates on different screen devices. How easy and convenient would web developers’ lives become if all the devices in this world existed with the same screen size. That would be a dream! But coming back to reality, we have to deal with hundreds of devices with varying screen sizes, and the problems they create for the developers with alignment is an add-on. CSS grids and CSS subgrids were introduced to tackle the alignment problem with multiple elements existing side by side.

Grids were responsive, and instead of the “hit and try” of pixel and margin values, setting display: grid worked like a charm. As time stands witness to the issues tackled by web developers, if they do not have one, they invent one themselves. Now the developers have started to create complex web designs with one grid nested with other grids. That was a makeshift arrangement, and making it work was an endeavor in itself.

Posted on

Choose a Technology Stack for Web Application Development

For developing a web application that is robust, performance-driven, and agile, you need to pick the right technology stack. Whether you need to develop an enterprise application or a web application for your customers, it has to be quick and interactive.

If you are searching for the best technology stack for web application development, then we have you covered. In this post, we will have a look at the vital technologies that you need to have for developing your bespoke application. First, let's begin with what exactly is a technology stack?

Posted on

Free Coding Games for Learning Web Development

Introduction

You've found yourself hours into coding tutorials, and now you need a change of pace, some fresh action. This is where coding games come in. Here I list free coding games on the web that can entertain you while giving you a new perspective on web development — HTML, CSS, JavaScript, and beyond.

Flexbox Froggy & Grid Garden

Codepip is a collection of free and premium coding games for learning web development, from a minecart game called Nth Cart about the :nth-child() CSS selector to Code Crunchers about JavaScript math.

Posted on

How I Used Brotli:11 to Get Even Smaller CSS and JavaScript Files at CDN Scale

This article is about my experience using Brotli at production scale. Despite being really expensive and a truly unfeasible method for on-the-fly compression at higher compression levels, Brotli is actually very economical and saves cost on many fronts, especially when compared with gzip or lower compression levels of Brotli.

Brotli’s Beginning…

In 2015, Google published a blog post announcing Brotli and released its source code on GitHub. The pair of developers who created Brotli also created Google's Zopfli compression two years earlier. But where Zopfli leveraged existing compression techniques, Brotli was written from the ground-up and squarely focused on text compression to benefit static web assets, like HTML, CSS, JavaScript, and even web fonts.

At that time, I was working as a freelance website performance consultant. I was really excited for the 20-26% improvement Brotli promised over Zopfli. Zopfli in itself is a dense implementation of the deflate compressor compared with zlib's standard implementation, so the claim of up to 26% was quite impressive. And what's zlib? It's essentially the same as gzip.

Posted on

11 Best CSS Frameworks To Look Forward In 2020

For any front end developer, there are two major concerns. The first one is time & efficiency and the other is browser compatibility testing issues. To address both concerns, it’s important to adopt a web design methodology that helps one save time and improve efficiency besides enhancing user experience. Speaking of which, CSS proves to be a win-win for both users and web designers.

Cascading Style Sheets or simply CSS are web design tools that separate document content from document presentation. This results in a dramatic decrease in the file transfer size. Once you apply a change to the site’s CSS style sheet, it can automatically reflect on all the pages alike. CSS offers great design consistency and offers a wide array of formatting options.

Posted on

CSS Grid Layout vs CSS Frameworks: When To Use What

“CSS Grid or CSS Framework? What should I use for my next project?” It is a question often asked by web developers, specifically new ones after they are introduced to the CSS Grid layout. CSS Grid layouts allow developers to build custom complex layouts with absolute control only by using Native CSS properties without relying on any frameworks which are bound by basic 12 column grid layouts plagued with default styling rules and do not offer a lot of room for customization.

On the other hand building grid layouts with frameworks like Bootstrap feels like a breeze without the need of writing any CSS style rules or media queries to make the layout responsive.

Posted on

Call Dynamic JS and CSS in C#

Introduction

In this article, we’ll learn how to set dynamic versioning of JavaScript files in MVC. We will create a simple MVC project and call one JavaScript file from the View.

Step 1

Open Visual Studio and select “File” >> "New". Then, click on Project.