Browsing Tag

css3

Sort by

CSS Refreshers: Borders
basix

CSS Refreshers: Borders

on Apr 6th 2012 with 81 comments

Sure, we’re all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there’s quite a few things in this article that you never knew about!

Not only can CSS3 be used to create rounded corners, but plain-ole’ CSS can also be wrestled into displaying custom shapes. That’s right; in the past, before these techniques were discovered, we might have resorted to using absolutely positioned background images to display circles or arrows. Thankfully – as we gleefully take one more step away from Photoshop – this is no longer the case.

(Continue)

Nettuts+ Quiz #10: Basic CSS3 Techniques

Nettuts+ Quiz #10: Basic CSS3 Techniques

on Feb 18th 2012 with 40 comments

In 2012, we plan to take our quizzes to a whole new level with ones aimed at all languages and catering to all competencies and tastes. This month, we’re covering some basic concepts and techniques in CSS3.

The prime focus today is on the easier, more accessible portions of CSS3. If you’re a hardcore CSS3 fan, don’t worry — transitions, animations, gradients and media queries are on the way!

(Continue)


This entry is part 10 of 11 in the The Official Nettuts+ Quizzes Session
From Idea to Market: How We Built Gradient

From Idea to Market: How We Built Gradient

on Dec 21st 2011 with 59 comments

Retracing the steps you’ve taken is a helpful way to understand how well you’ve executed your vision – whatever that might be. What could you have done better? What should have been avoided? Today, I’ll share what we’ve learned (and are still learning) while crafting Gradient. It’s an experience that has changed everything for us.

(Continue)

An Update on Nettuts+ Prefixr

An Update on Nettuts+ Prefixr

on Nov 9th 2011 with 38 comments

Many of you might be aware that we recently launched a helpful web service, called Nettuts+ Prefixr. Thankfully, the tool has come a long way since the initial launch, as I’ve squashed countless bugs, and added some neat new features. I’d like to give you a quick rundown on the current state of the tool, as well as how to use it.

(Continue)

How to Create a Beautiful Icon with CSS3

How to Create a Beautiful Icon with CSS3

on Sep 20th 2011 with 88 comments

Today, I’d like to show you a neat trick. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

(Continue)

The 30 CSS Selectors you Must Memorize

The 30 CSS Selectors you Must Memorize

on Jun 9th 2011 with 387 comments

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in November, 2010.

So you learned the base id, class, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

(Continue)


This entry is part 2 of 16 in the CSS3 Mastery Session
Quick Tip: Never Type a Vendor Prefix Again

Quick Tip: Never Type a Vendor Prefix Again

on Jan 17th 2011 with 88 comments

You know the drill quite well. Want to give some section of your website rounded corners with CSS3? Then you’ll require nothing short of three vendor prefixes: webkit, moz, and the W3C recommended form. Isn’t that a huge waste of time — not to mention screen space? What if, instead, we could use a class file? Well, we can! I’ll show you how today.

(Continue)

Let’s Create Paper with CSS
videos

Let’s Create Paper with CSS

on Jan 13th 2011 with 65 comments

If we’re smart with our shadows, gradients, and borders, we can relatively easily create nice looking notepad paper with just CSS3. I’ll show you exactly how in this week’s video tutorial.

(Continue)

Build a Kickbutt CSS-Only 3D Slideshow

Build a Kickbutt CSS-Only 3D Slideshow

on Jan 11th 2011 with 86 comments

In this tutorial, I’m going to show you how to create a 3D slideshow using only HTML and CSS. No JavaScript required! Fire up Safari and let’s get started!

(Continue)

Quick Tip: Don’t Always Jump Back to Photoshop
basixvideos

Quick Tip: Don’t Always Jump Back to Photoshop

on Jan 7th 2011 with 42 comments

In today’s video quick tip, we’ll use the lesser known inset parameter when creating CSS3 box shadows to properly style the hover and active states of a button.

(Continue)

Page 1 of 512345