CSS - Page 3

Learn the latest tips, techniques, and approaches for working with CSS.

How to Build a Minimalist User Profile Layout With Content Tabs
CSS / 30 Oct 2013

How to Build a Minimalist User Profile Layout With Content Tabs

Dynamic content is a big part of modern web design. Whether this is hidden in the page or pulled out of a database, you can improve space in your layout by reorganizing important content elements. This is true of many situations and it works great on user profiles. Oftentimes users will have a myriad of information presented on their page which can be easily digested through the use of tabbed navigation.

In this tutorial I want to demonstrate how we can build a minimal user profile layout design. This is mostly centered around a small set of navigation links, which dynamically change the display between bits of content. Depending on the purpose of your website, these content sections may be split to include photos, videos, followers, and other related information. To get an idea of what we’re building take a peek at my live sample demo.

5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours
CSS / 18 Oct 2013

5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours

You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?

The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.

How to Pull Off a Tilt Shift Effect With Webkit CSS Filters
CSS / 11 Oct 2013

How to Pull Off a Tilt Shift Effect With Webkit CSS Filters

Thanks to mobile image editing apps like Instagram, the faux tilt shift fad seems to be at its height. But why should we let iPhones have all the fun? Let’s bust out a tilt shift effect using pure CSS.

In this tutorial, we’ll learn all about the new CSS filters in Webkit and how to implement an image mask in CSS. We’ll then use these techniques for our final tilt shift effect. We’re going to hit on all kinds of crazy stuff so read on and we’ll have some fun.

10 Easy Image Hover Effects You Can Copy and Paste
CSS / 16 Aug 2013

10 Easy Image Hover Effects You Can Copy and Paste

Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code.

Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.

Code an Awesome Hire Me Card With Your Gravatar
CSS / 2 Aug 2013

Code an Awesome Hire Me Card With Your Gravatar

It’s been a while since we polished our HTML and CSS skills with a fun little demo, let’s end that streak with a project that’s both super attractive and super practical.

Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. Along the way we’ll learn a bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions
CSS / 3 Jul 2013

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions

Typically web developers have been using JavaScript to create dynamic page animations. Hidden menus and subnavigation are just a couple examples for how these techniques would be used on a live website. Thanks to the addition of CSS3 transitions we can now mimic these animations, with no JavaScript in sight.

In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content. It is a very flexible technique which does not require a whole lot of time to get working. Plus all the modern web browsers will support CSS3 transition effects.

Create Shaped Avatars With CSS and Webkit
CSS / 29 Jun 2013

Create Shaped Avatars With CSS and Webkit

In case you haven’t noticed, square avatars are so 2010. These days circles are all the rage. Every app worth its salt, from Path to Basecamp, is jumping on board this fad and waving goodbye to the squares who are stuck in the past.

Ever the forward thinker, I asked myself, “what’s next?” Let’s look beyond squares and circles and into the future of the avatar! Using CSS and Webkit, we can use pretty much any shape as the mask for an avatar. Let’s see how.

What the Heck Is CSS Specificity?
CSS / 21 Jun 2013

What the Heck Is CSS Specificity?

CSS specificity is a topic that many new front end coders avoid for as long as possible. It sounds complicated, there are all of these rules, you might even have to do some math! How lame is that?

Ultimately, you can only avoid it for so long. Specificity is an essential concept that you need to grasp to be an effective developer. Today I’ll walk you through the concepts of specificity in a simple and easy to understand manner. It’s easier than you think!

Building CSS3 Notification Boxes With Fade Animations
CSS / 6 Jun 2013

Building CSS3 Notification Boxes With Fade Animations

Modern web design techniques have allowed developers to quickly implement animations supported by most browsers. I think alert messages are very commonplace, because the default JavaScript alert boxes tend to be pretty intrusive and poorly designed. This leads developers down a path to figure out which solutions would work out better for a more user-friendly interface.

For this tutorial I want to explain how we can put together CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM. As a fun added feature, I have also included buttons where you may click to append a new alert box into the top of the page. Check out my sample demo to get a better idea of what we’ll be making.

How to Code an Expanding HTML5/CSS3 Search Input Field
CSS / 7 May 2013

How to Code an Expanding HTML5/CSS3 Search Input Field

A common user interface style for Apple and WordPress has been the expanding search field. Whenever a user clicks to focus, the field will expand wider, then contracts when the user de-focuses. This technique has become popular because it saves room on your page when the search isn’t being used. But it also highlights the search field when it is in use, which catches the user’s attention and lets them know the website is responding.

In this tutorial I want to demonstrate two different methods for building an expanding search field. The first is using basic CSS3 transitions which are only supported in newer web browsers. This works great for simple designs, but there is no way to check if the user has entered data strictly via CSS. In the second field we will use JavaScript to expand, and then only shrink back if the user hasn’t entered any text. It is a small yet fascinating piece of UI which can blend nicely into any website project.

How to Build a Responsive Slide-Down Navigation Menu
CSS / 1 May 2013

How to Build a Responsive Slide-Down Navigation Menu

After a long period of researching mobile responsive layouts, I’m spent quite a bit of time experimenting with various UI designs. One major hotspot on the page is often the website’s main navigation. Users want quick access to your content pages — and this will always be the case, either on a full monitor or a smaller mobile responsive screen.

For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu. The links will appear as normal on the frontend but drop into a hidden menu after resizing below 600px. Instead we see a little menu pull-down icon which will toggle open and closed on command.

Creating Content List Columns Using Entypo Font Icons
CSS / 24 Apr 2013

Creating Content List Columns Using Entypo Font Icons

There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will break away from the normal template designs for an intriguing list display.

In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach. All of the CSS is very straightforward, although you may need to do a bit of research on some of the properties. This effect is native to all standards-compliant browsers and renders perfectly on OS X or Windows.