Search Results For: develop

The Lowdown on :before and :after in CSS

CSS / 7 Aug 2019

The Lowdown on :before and :after in CSS

We previously took a look at :active, an extremely handy pseudo-class selector that can be used to create some awesome mouse-down effects. Today we’re going to take a step back and explore some other “pseudo” items, this time we’ll be looking at the pseudo-elements :before and :after.

You’re probably beginning to see these used all over the web in advanced CSS examples so you might as well jump in and learn to use them yourself.

What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two?

How are :before and :after implemented in CSS? What are some ways that developers all over the web are using these tools to perform amazing feats of modern coding?

Read on to find out.

The Lowdown on Absolute vs. Relative Positioning

CSS / 6 Aug 2019

The Lowdown on Absolute vs. Relative Positioning

When I was first learning web development, the style side of CSS seemed straightforward and fun, but performing layout feats seemed like a confusing mess. I sort of felt my way around without a solid understanding of how things like positioning and floats worked and as a result it would take hours to perform even simple tasks. If this situation sounds familiar, then this article is for you.

One of the real revelations that I had early on was when I was finally able to wrap my head around how positioning contexts worked, especially when it came to the difference between absolute and relative positioning.

Today we’re going to tackle this subject and make sure you know exactly how and when to apply a specific positioning context to a given element.

25+ Awesome Responsive Blog Designs

Inspiration / 2 Aug 2019

25+ Awesome Responsive Blog Designs

Whether you’re a blogger looking for the perfect design for your next website or a web designer looking to get inspired for your next project, the process always starts the same way—by exploring designs made by others.

We’re here to make that process easier for you. In this post, we’re featuring a roundup of some of the best and most professional blog designs you can find on the Internet. If you’re working on a new blog layout design, or simply planning on making a new blog, you can start your search for inspiration right here!

5 Really Useful Responsive Web Design Patterns

UX Design / 30 Jul 2019

5 Really Useful Responsive Web Design Patterns

Responsive web design requires a very different way of thinking about layout that is both challenging and exciting. The art of layout was already complex enough for the centuries that it was defined by fixed elements, now things are becoming exponentially more complicated as layouts become increasingly adaptive.

To help reprogram your brain to consider layouts in new ways, we’re going to take a look at some interesting responsive design patterns that are being implemented by talented designers all over the web.

How to Find or Create Your Brand Personality

Business / 24 Jul 2019

How to Find or Create Your Brand Personality

What is the personality of your brand? No, it’s not a trick question. Is your brand formal or spunky or socially conscious?

Identifying and defining the identity and personality of your brand is crucial.

Even if you don’t define it, some sort of personality (even of the multiple variety) will come through. So it’s best to think about it now. The last thing you want is anyone else getting any say in how exactly your brand is defined.

Who do you want your brand to be?

Mobile First Design: Why It’s Great and Why It Sucks

Mobile / 23 Jul 2019

Mobile First Design: Why It’s Great and Why It Sucks

Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. Even with the rise of responsive design, many of us begin with the “full size” site and work our way down.

There’s a growing trend in the industry though to flip this workflow on its head and actually begin with mobile considerations and then work up to a larger desktop version.

Why would you ever approach a project this way? What are some of the pros and cons of this strategy? Read on to find out!

Inner Shadows in CSS: Images, Text and Beyond

CSS / 10 Jul 2019

Inner Shadows in CSS: Images, Text and Beyond

Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text?

Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.

19 Best Photoshop Tutorials for Designing Posters + Flyers

Inspiration / 15 May 2019

19 Best Photoshop Tutorials for Designing Posters + Flyers

What makes a great poster design? It’s often a mix of creativity and design elements that have a certain panache.

Poster and flyer design can be a lot of fun because you can often stretch your design muscles and try things you wouldn’t for other projects. It’s an opportunity to do something attention-grabbing and unique!

With that idea in mind, here are twenty different poster/flyer tutorials that you can try out. Plus, you’ll get a chance to try out some new design techniques along the way!

Choosing a Resume + Cover Letter Font? 10 Tips & Examples

CV & Resume Templates / 4 Mar 2019

Choosing a Resume + Cover Letter Font? 10 Tips & Examples

What is the best font for your resume? It’s not a loaded question. Too often people over think typography choices for resumes or cover letters because they think the type has to look “designed.” The reality is that it just needs to be highly readable.

So where do you start? Today, we’ve got ten great options to help you choose a readable, well-designed typeface to help your resume or cover letter stand out.

All these fonts stand out from the crowd, while also keeping your resume clear, classy, and readable!

What Are Dark Patterns? (And Why You Shouldn’t Use Them)

UX Design / 28 Jan 2019

What Are Dark Patterns? (And Why You Shouldn’t Use Them)

Dark patterns are website interfaces that cause users to interact with a website in a way that isn’t what they intended. They cause users to click through to a page, or even add an extra item to a shopping cart, without intending to.

From sneaky clicks to straight-up poor website practices, dark patterns are in more places than you might expect. Today, we’ll look at what dark patterns are, how to identify them and why you shouldn’t use this technique in your website or app projects.

If you think a dark pattern is a cute background image, you need to keep reading.

20+ Creative Project Ideas to Get You Out of a Design Rut

Inspiration / 26 Dec 2018

20+ Creative Project Ideas to Get You Out of a Design Rut

It happens to everyone at some point – creative block. You know you’re in a design rut when nothing seems to work as you expect. Designs aren’t coming together. You’re frustrated and un-energized.

While these stages are completely normal, it’s important to have a few tools at hand to break out of a design rut. Here, we’ve gathered a list of creative project ideas to re-engage your brain and get you thinking more creatively again.

Minimalist Graphic Design: 10 Examples & Tips

Minimalist Graphic Design / 24 Oct 2018

Minimalist Graphic Design: 10 Examples & Tips

Minimalist design is simple. But it is not boring. Just because a minimal style design often lacks some of the embellishments or color palettes or crazy typefaces in other projects, doesn’t mean it isn’t great to look at. In fact, designs featuring minimalism can be some of the most beautiful and usable websites around.

And even though minimalism is a design style of itself, what types of elements show up in these projects and how they are used tend to change over time. You might call them minimalism trends. Here’s a look at 10 tips for creating a modern minimalist graphic design with examples.