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 / 12 Mar 2014

Drop Caps and Paragraph Text Effects Using CSS3

Websites have become a medium of sharing information with the entire world. This has transitioned to include media like photos and videos. But text on a webpage is still the predominant choice for web publishing. This would imply that how you structure paragraphs, sentences, and text on the page can greatly impact if a visitor chooses to stick around and read what you have to say.

In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.

CSS / 12 Feb 2014

Building HTML5 and CSS3 Anchor Link Tooltips

There are many tutorials online discussing the idea of CSS-based tooltips. Yet many examples require HTML elements along with the anchor link. Visitors can get a basic tooltip message by using the default title attribute. I’d like to follow this method and update the process just a little bit.

In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects. This technique doesn’t require any extra HTML unless you attach the tooltips onto a different element (like a text field). Let’s get started!

CSS / 5 Feb 2014

Coding a Responsive Mini vCard Webpage

The use of online portfolios has become a popular choice by many digital artists. The goal would be showcasing yourself and your skills to anyone curious, maybe hiring companies or potential clients. Another simpler way to accomplish this task is to create your own digital vCard page. It’s usually a single page containing a brief resume, your work experience, and some interesting tidbits about yourself.

In this tutorial I want to demonstrate how to build a simple tabbed webpage layout in the style of a simplistic portfolio. We can incorporate jQuery fade effects to switch between the tabs, sticking to a formal responsive design. Take a peek at my live sample demo to see what the final product looks like.

CSS / 22 Jan 2014

Customize Your Own MailChimp E-Mail Newsletter Signup Form

If you’ve ever signed up for an email subscription you should know about MailChimp. It’s a company which helps webmasters and marketers deliver newsletters and other similar campaigns. They provide some HTML templates to use for signup forms and confirmation pages, but these are so generic that most subscribers are bored of this same interface.

I’d like to demonstrate how to customize the MailChimp signup form into something more unique. Everything is based off the original MailChimp HTML/CSS code and the form submission will use Ajax. It sounds complicated but the whole process is simpler than you might expect. Take a look at my sample demo to get an idea of the full tutorial.

CSS / 2 Jan 2014

Animating Personal Skill Bars With CSS3 Keyframes

This design technique is commonly found on personal portfolios or design studio websites. Skill bars represent a level of knowledge related to certain tasks – web design, illustration, branding, character design, you name it! Adding some fancy animations to these skill bars will provide a quicker connection to the viewer.

In this tutorial I want to demonstrate how you can build CSS3 skill bars using keyframe animation. This is also completely possible to run using JavaScript, which would hold up stronger in older legacy web browsers. However CSS3 keyframes are growing in popularity with much wider support these days. Take a peek at my live demo to see the final product.

CSS / 16 Dec 2013

How to Design Animated Sliding Page Elements With CSS

There’s a recurring trend of using animated page elements in web design at the moment — as you scroll down the page, items will naturally animate into view. These animations only happen one time, and they only begin once the element is within the browser viewport.

I’ve explored this concept a bit using jQuery, along with CSS3 transitions. In a nutshell, this script checks for special classes on the page and uses jQuery to append a new class for transition effects. Those elements which have already animated are then removed from the event handler. And once there are no more elements to animate, the event handler is completely removed until you refresh the page. Take a look at my demo example to see exactly what we’re creating, and follow along!