CSS3 Mastery

16 Posts

Find yourself persistently putting off learning new technologies, like CSS3? Then now's your chance to catch up! In this session, we'll teach you the ins and outs of everything you need to build modern and stylish web applications with CSS3.

Posts in this series
  • HTML & CSS
    10 CSS3 Properties you Need to be Familiar WithCss3
    We've already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it's encouraged! The key is to first determine whether or not you're okay with a slightly different presentation from browser to browser. Are you okay with, say, IE displaying 90 degree corners, rather than slick rounded ones? That's up to you to decide. However, always remember that websites needn't look identical in every browser. At the conclusion of this article, we'll work on a fun final project.Read More…
  • Web Development
    The 30 CSS Selectors you Must MemorizeSelectors
    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. Read More…
  • HTML & CSS
    Getting to Work with CSS3 Power ToolsPreview
    CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.Read More…
  • HTML & CSS
    Quick Tip: Mimic Equal Columns with CSS3 GradientsCss3 gradient to create columns
    What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you've ever tried applying the background to each container itself, you'll no doubt have realized that your layout quickly becomes fragmented as soon as, say, the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images. The irony in this is that we're using CSS3 gradients to create an effect that doesn't contain a gradient! Read on to learn more. Read More…
  • HTML & CSS
    Quick Tip: A Crash-Course in CSS Media QueriesCrash course in css media queries
    In the past, in order to create layouts based upon the width of the user's browser, we had to use JavaScript -- perhaps combined with a server-side language. Fortunately, the process is now becoming far simpler, thanks to CSS media queries. Read More…
  • HTML & CSS
    Quick Tip: The Multi-Column CSS3 Module200x200
    For over six years, CSS3 columns have been available to us; yet, strangely, they're rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that - again - no support in Internet Explorer. But that's okay! The world will not end if IE users see one longer paragraph. I'll show you how to use this helpful module in today's video quick tip. Read More…
  • HTML & CSS
    Design a Prettier Web Form with CSS 3Code
    Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial!Read More…
  • HTML & CSS
    Subtle CSS3 Typography that you’d Swear was Made in PhotoshopCode
    Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!Read More…
  • HTML & CSS
    Quick Tip: Detect CSS3 Support in Browsers with JavaScriptDetect css support with js
    Isn't it fun that we get to play with the latest CSS techniques, like shadows and transitions? There's only one problem: how do we compensate, or more importantly, detect the browsers that do not support them? Well, there's a few solutions. In this tutorial and screencast, though, we'll create a JavaScript function that will accept a CSS property name as its parameter, and will return a boolean, indicating whether or not the browser supports the passed property. Read More…
  • HTML & CSS
    CSS Fundamentals: CSS3 TransitionsCode
    As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.Read More…
  • HTML & CSS
    Quick Tip: Ever Thought About Using @Font-face for Icons?200x200
    The evolution of Internet technologies never ceases to amaze. Seemingly daily, new concepts and techniques are being thought up by creative and talented people. With modern browsers being adopted at a greater rate, systems like CSS3 are becoming more and more viable for use on projects of all sizes. Clearly, this can be seen by looking at new services sprouting on-line like TypeKit. Conceptually, if we deconstruct a font down to it's basic elements, we can make use of this technology for things other than type, icons.Read More…
  • HTML & CSS
    The Intricacy of Simplicity: CSS3 200x200
    Ever wondered how a particular effect was achieved in a web design, and, after zooming in several clicks, you found that the author added several subtle shadows, borders, gradients, etc? In the past, this was achieved simply by slicing out an image, and setting it as a background of some element. Luckily, with CSS3, we can be afforded much more flexibility. Now, while the code for such a simple effect might be a bit tedious, it's well worth it, and that's what we'll review in today's written and video quick tip! Read More…
  • HTML & CSS
    The State of CSS3 in Email Templates200x200
    On the heels of some of our recent findings regarding the state of CSS in email, I reckoned it was high time to shake things up a bit. So here goes - CSS3 in email lives. Ok, so I'm sorry if I made you drop your toast, there. I know you're thinking, "But... It's still largely experimental... In the browser, to boot!" Yes, CSS3 support is even more fickle amongst a swag of email clients that can't even get CSS2 right. But that doesn't mean that it's too soon to touch any of it. In this article, I'll go through two properties you can use in your email templates, alongside some practical examples. So, brush off your toast and let's get down to business.Read More…
  • HTML & CSS
    Getting Clever with CSS3 ShadowsCode
    As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways.Read More…
  • HTML & CSS
    Build Awesome Practical CSS3 Buttons200x200
    Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010. What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I'll show you how in today's video tutorial. Read More…
  • Web Development
    How to Build a Kick-Butt CSS3 Mega Drop-Down MenuScreenshot
    Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we'll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.Read More…