CSS - Page 2

CSS / 26 Feb 2018

13 Best Ways to Learn CSS Grid

CSS Grid an increasingly popular method for creating complex responsive web design layouts that render more consistently across browsers. Now is the time to familiarize yourself with CSS Grid, so we’ve collected 13 of the best ways to get started learning today.

Rather than old-school methods such as tables or the box model, CSS Grid allows you to create more asymmetrical layouts and more standardized code that is cross-browser compatible. Most major website browsers already support CSS Grid and it is a W3C Candidate Recommendation, which would formalize it as a standard practice. It’s widely believed that CSS Grid will be the future of website layouts.

CSS / 19 Jul 2017

12 Fun CSS Text Shadows You Can Copy and Paste

Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.

Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.

Google Fonts / 13 Jul 2017

10 Great Google Font Combinations You Can Copy

The average man considers which flavor of Doritos will taste good with his Heineken. The sophisticated man considers which cheese will pair well with his choice of wine. The designer of course considers which two fonts will look great on the same page.

Today we’re going to use the Google Font API as a playground for mixing fonts and finding ideal pairings. You’ll be able to skim through and instantly grab out selections that you think are appropriate for your projects.

The best part? You need only to copy and paste our code to implement these fonts on your site. It’s completely free and there are no downloads required.

CSS / 28 Jun 2017

5 Ways to Learn Web Design: Which Is Right for You?

The web design education industry has exploded from a small niche to a powerful, continually expanding force. Countless people all over the planet are interested in learning about how to build and design websites, and tons of companies are cropping up promising the ultimate solution.

The good news for you is that increased competition in this field is a great thing for customers. You have more options than ever for learning just about anything you want to know concerning web technologies. The big question though is, with so many options available, which is the right one for you? We’ll go over a number of different strategies being used to teach web development and discuss how you can figure out the most appropriate for your unique learning style. We’ll also include some resources to get you started on each available path.

CSS / 28 Mar 2016

Everything You Need to Know About HD Design

If you haven’t already taken note, the web is going high def. From images to backgrounds to user interface elements, high definition is the new normal.

It started with some of the retina and high-resolution screens, but access to faster connections has also emphasized this phenomenon, providing greater access to HD websites from any device. Are you thinking about and designing in high definition? Here are a few things to consider.

CSS / 1 Oct 2015

7 Tips to Speed Up Your Website Today

Everyone loves a cool little loading animation, right? But if that divot lasts more than a second or two, it only brings attention to the fact that the website is loading slowly. And that’s a website killer.

Users expect websites to load quickly and efficiently. It’s your job to ensure that the design is not only visually pleasing but also 100 percent functional. If your site is dragging somewhat, you can stop worrying right now because we have seven tips to help you speed up your website with small tweaks to the design. (Make sure to visit each of the websites showcased in the post; they look great and load lightning fast.)

CSS / 15 Nov 2013

Build a Super Easy CSS Slider With Thumbnails

Today’s project is another exploration of the types of practical applications that you can achieve with a little ingenuity and some fairly basic CSS. You’ll be blown away by how much you can achieve with just a few lines of code.

The final result with be a great way to display a strip of small image thumbnails that the user can hover to see larger images. Let’s dive in and see how it works.

CSS / 8 Nov 2013

Build a Freaking Awesome Pure CSS Accordion

Who has two thumbs and loves to push the bounds of CSS? This guy. Let’s jump into a project that does just that. It’s pretty experimental and won’t pass the semantic police, but it’ll teach you a heck of a lot about advanced CSS tactics and will be tons of fun.

What we’re going to build is a pure CSS horizontal accordion slider. You’ll be able to insert as many slides as you want, each with unique content and each accessible via a click event, all without a lick of JavaScript. Impossible you say? Never!

CSS / 1 Nov 2013

How and Why to Build Your Own Design Calculators

Design is a complex beast, web design doubly so. There’s a lot more than visual harmony and balance to consider, it’s often the case that you have to dig in and perform some real life mathematics (gasp!).

Oddly enough, I love thinking about this stuff, so much so that I actually build my own calculators rather than use the tools available from other developers. Today I’ll show you how and why to build your own design calculators so that you can master the numbers behind your designs.

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.

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.

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.