Maintaining CSS is difficult, especially in bigger projects working with a team. Naming conventions can help your CSS be more readable and easier to maintain. In this quick tip we’ll look at how to use the BEM (Block Element Modifier) naming methodology in WordPress.
Alignment is probably the most confusing aspect of flexbox. The flexbox layout module has a handful of alignment properties that behave differently under different circumstances, and when using them you might not necessarily understand what is happening or why. However, if you know what to pay attention to, alignment is less complicated than it first appears. This tutorial will help you understand flexbox alignment perfectly.
Do you want to learn more about CSS3 animations? Our latest short course, 6 Handy CSS3 Animation Projects, gives you a quick, practical introduction.
The recently launched Bootstrap 4 comes with a lot of changes and new features. One of the biggest changes is a revamped, Flexbox-based grid system.
Being “pixel perfect” is something which became less important for web designers once we all accepted that websites can look different across different screens and devices. But that doesn’t mean attention to detail is any less desirable. In this tutorial I’m going to introduce you to a tool (a Chrome extension) which can help you achieve pixel perfection in your web designs.
Our mobile browsers continue to get more powerful and better at showing us amazing, beautiful animations. When combined with the layout power of CSS, it’s possible to create some gorgeous work without using any images at all. The result is scalable, quick-loading, and well, impressive to see.
In this tutorial we’re going to use CSS Grid to help us create a “broken grid layout”, something which has always been difficult with more traditional CSS layout methods.
How we approach layout on the web is changing, and at the forefront of that change is CSS Grid Layout. This updated quick start guide will skip the details and nuances, instead helping you get stuck in, right now.
Welcome to another ThemeKeeper Tuts+ quick tip; in today’s video we’re going to talk about Instagram filters. If you’re an Instagram user (and probably even if you’re not) you’ll be aware that it offers you various different filters which you can apply to a photo you’re uploading. Nowadays you can achieve similar results in the browser using nothing more than CSS. Let’s take a look!
Clipping and masking is a feature of SVG that has the ability to fully or partially hide portions of an object through the use of simple or complex shapes. Over the years many developers have taken these abilities and pushed them in various directions. In this article we’ll take a look at some advanced methods along with demos that showcase clipping and masking to great effect. Let’s get started!
One of the great things about scalable vector graphics (aside from their being infinitely scalable without quality loss) is that once you know the fundamentals you can hand-code simple shapes quite easily, without needing to open a graphics application.