As per community demand, our aim today is going to be to cover the most prominent and the most modern CSS3 tutorials that have been published by the leading front-end developers and designers, all of the tutorials here are based on the latest standards, to help you become a better web designer by learning how to use particular CSS3 functions and features in the most rewarding way possible. At the end of the post, we will also mention a couple of CSS3 learning resources that you can use to shape and form your skills into better understanding and usability. Like any programming language, to better understand something — it’s best that we allow ourselves to do some repetitive coding, either through a dynamic online platform, or within our own personal code editors.
Editing Images in CSS
Using images in web design makes total sense, but the story gets more technical than that. While it’s fun to use photos of your own liking in your web designs, sometimes we have to take into account things like — is the image file size appropriate for our project, can we add filters through CSS rather than through external apps like Photoshop, and what can we really do with CSS anyway to help our photos look better. Una Kravets takes us on a 15 minute long journey where she gives a talk about CSS image editing and how we can transform CSS to act more like a standalone image editing software platform, rather than just a way to manipulate design aspects.
Using Modern CSS to Build a Responsive Image Grid
Continuing with the topic of images, here we have George Martsoukos presenting us with a simple lightweight tutorial on how to use modern CSS3 functions to build responsive image grids. Image grids (or sometimes called galleries) are all about displaying visual content within the context of a grid. These kind of grids become useful to those who are sharing their photography, or using an image grid as a way to expand their portfolio items. In this tutorial, George talks us through the process of ensuring that the grids we create are going to be equally responsive to desktop, and mobile applications.
Learn CSS Layout
Web designs is everything about layouts. We create a layout and then use other available elements and functions to style it, to build upon it. And it’s a known fact that much of web design layouts are totally dependent on CSS. Learning CSS allows us to learn more about website layouts and how they work, but if you don’t have the knowledge already — Mikito Takada has written an online book that’s split into 5 different chapters on how to create layouts with CSS3, and do it the right way. He talks about positioning, and also aligning different box elements to begin creating the grid elements, he goes more in-depth about positioning and the available features right now, while dedicated the last two chapters to Flexbox (a known CSS function), and also a writeup on the best CSS styling tips and tricks that he has learned about on his own journey of being a web designer.
CSS Refresher Notes
Notes and style guides are the driving force for many of the webs designers, and it’s quite essential that we remember to put aside our own favorite note resources for easier future reference, and as far as CSS3 goes — the CSS Refresh Notes is amongst the favorites on the GitHub community; hundreds of stars, and plenty of community input on how to expand this resource to be the best there is. CSS Refresh Notes focuses on the most crucial aspects of CSS3 development and lets designers to quickly tap into reference notes for the most common, and not so common CSS3 features. Whether it is positioning or selectors you need help with, perhaps media queries for responsive design, or how to best use SVG within your CSS3 design patterns — these notes will come in handy even if you don’t feel that way straight away.
Variables: The Backbone Of CSS Architecture
Designing A Product Page Layout with Flexbox
Flexbox is a new CSS3 layout mode aimed at helping designers to best optimize their designs for mobile devices, and devices that require different screen sizes. The new function is stil quite new and alien to many, but use of Flexbox is becoming increasingly popular in fields like eCommerce. This CSS3 tutorial comes from the team over at Shopify, where they are doing a report on how they managed to create one of their newest Shopify Templates with the help of Flexbox, what the process took and what the end result looked like. Knowing Shopify’s reputation in the eCommerce market, and having indulged in the tutorial ourselves, this might be one of the most handy guides to helping you understand more about Flexbox, and how you can begin using it in your own web designs.
Everything I know about responsive web typography with CSS
When people think of responsive web design, much of the time they are thinking about turning a standard website into something that will work well with mobile devices. It’s not a false understanding, but there’s certainly more to it. Zell Liew has written a brilliant writeup on how to work with responsive web typography, and what it entails to establish a solid foundation for your typography patterns on all device types. Needless to say that the tutorials comment section has also become of immense help, thanks to additional input from fellow community web designers who all have had different experiences with optimizing typography for mobile, and even desktop.
Simplest CSS Slideshow
CSS Modules — Solving the challenges of CSS at scale
Content Display Patterns
Content is everything. Even those sites who lack the appropriate website presentation skills, and still are able to maintain high content quality, are usually the ones people will refer to the most. Good examples for this are sites like Reddit, and Hacker News — highly content populated sites, with no real enforcements within the design of the websites. Content display patterns are not about display patterns, but how the overall content element design works together to provide a browsing experience that fully integrates between the content display, and the actual content. This tutorial from Dan Mall is one of the most concise guides on content display patterns, and his experience report speaks for himself — having worked with redesign projects for sites like TechCrunch, and even we have to admit that the new TechCrunch design is pretty sleek!
Animating Clipped Elements In SVG
SVG and CSS3 animations are amongst the most trending topics in web development right now. This is thanks to the fact that we are beginning to move away from the need to use heavy imagery and animation files to display our content, and instead designers are learning how to mimic those exact animations using native languages to the browser. Dennis Gaebel Jr is giving us a rundown of using CSS clipping to achieve stunning animation effects, on top of using stunning vector visuals.
Expressive has been a coined term in the developer community for quite some tem. Expressive is a term loosely borrowed from the concept of expressiveness in programming languages. A programming language is generally considered expressive if it allows you to naturally express your thoughts in code that is easy to understand. Generally, ‘expressive’ is not anything new, and developers have talked about this for years before, but every time a new feature is released in the wild, it takes some times for developers and especially designers to adapt to their expressive workflow, so sometimes projects can get all messy and caught up in too many functions trying to work all at once. Expressive is the lightweight approach to writing code that works well, looks good, and is easy to maintain. Use this as a style guide, and don’t forget to express your gratitude to the author; John Polacek.
Animation in Responsive Design
As learned throughout the article already, animations and responsive are two very hot topics for designers, and combining the two together is becoming increasingly more interesting to those who wish to truly test the limits of modern web development abilities. Val Head published a very insightful article about using CSS3 animations within responsive web designs, and how to best present these animations where they don’t lose their value. The article is populated with several showcase demos from other successful websites who have established their animations on both desktop and mobile devices.
Why I’m Excited About Native CSS Variables
CSS Custom Properties are also known as Variables, helping CSS3 devs to fasten up the CSS3 developing process by enabling dynamic functionality. Preprocessors have been doing this for a while now, and many have already adaptd to the idea of using a preprocessor permanently, but inevitably all these features (available in the standard) will find their way into modern browsers, because nothing is better than developing in native environment, not having to worry about maintenance and reliability of external software. A Google Engineer, Philip Walton has taken his valuable time to put together a very insightful piece of work about the new CSS feature, and why the community should embrace such change, and not worry about silly things like syntax appearance.
Twitter’s Heart Animation in Full CSS
Twitter has been ALL over the news, and for many good reasons. One of those reasons ended up being because Twitter decided to switch up the ‘Favorite’ button with a ‘Love’ icon. A very bold move as told by others, but ultimately a necessary move to establish a more community oriented feel around the site, and less specific to certain industries, like technology. The announcement was made on one of Twitter’s official accounts, through an animated GIF image that showcased a cool ‘heart splash’ animation accompanied by text, as these things do — a designer by the name of Nicolas Escoffier was interested in seeing whether he would be capable of hacking together a similar animation using just pure CSS3, and guess what — he succeeded, and the community couldn’t be more happy!
Seriously, use icon fonts
SVG is making the web a better place, even though developers to this day have to take into account the fact that many are still browsing the web from outdated versions of mobile operating systems, and such insight requires of the developer to work extra hard to make things work. Although icon fonts are still being learned by others, this feature is becoming very popular in the modern developer markets where devs want to create experiences that are seamless and pleasant to work with.
Building and shipping functional CSS
Cole Peters brings out the big guns and tells us a story about his success with using CSS3 functions to make better development choices at TrialReach — company he works for. His story is based on the idea of taking our existing stylesheets and re-working them to better reflect new design standards, and available functions in the browser. After some closer work with functions, he was able to split one of his stylesheets to nearly a half size than before, indicating the possibility for saving bandwidth, and increasing site speed ultimately.
Really Responsive Tables using CSS3 Flexbox
Optimize CSS Delivery
The last CSS3 tutorial is going to be all about speed, and how to better code our stylesheets to at least guarantee some speed increase beyond the ordinary. Optimize CSS Delivery is a technical style guide that shows how to write native CSS code without compromising any resources. Writing CSS should be fun, which is what this tutorial is about.
Learning Resources for Modern CSS3
Without a proper foundation, learning from tutorials can sometimes feel quite daunting. It makes sense, a tutorial can only cover so much for a particular subject before it runs out of steam, tutorials are for those who have built something before, and wish to extend upon those projects with new features, interesting concepts, and other possibilities inspired by the community. And to help you better understand the CSS3 tutorials we talked about in the post, we are going to list some really great and free resources for learning CSS3 (modern, too) online.
The complete CSS3 tutorial
Again, we emphasize the need to showcase tutorial resources that help you to learn everything if not the majority of what CSS has to offer. This resource is a complete CSS3 tutorial that talks in steps for different CSS3 features, and their uses in real world. Selectors, advanced selectors, box models, texts and fonts, and other features are discussed in-depth, with a ton of examples for you to begin playing around with. Anyone beginning CSS development will be quickly able to realize their progress from just a few simple projects.
W3Schools is the home of beginner front-end development. This resource has helped millions upon millions of developers to better understand certain parts of HTML and CSS, but more than that — it offers free learning content that you won’t find anywhere else. W3Schools is the perfect CSS learning place for those who are truly inexperienced with the web, and wish to get up to speed rather quickly.
HTML & CSS
You can’t go about learning CSS3 or HTML5 from ground up and not give Codecademy a try, even the testiomonials section is full of reviews of how people were able to find great and well paid jobs after finishing their learning with Codecademy. Whereas many of the tutorial sites teach the direct syntax through code samples, Codecademy on the other hand ‘forces’ you to play around with code through direct and interactive tasks as assigned by the people who are behind each learning course. Such platforms have become very popular, and are now available for nearly every programming language out there. A very effective way to learn, without question.
Learn CSS Layout
Layout is the foundation of CSS3, we already learned that in this post earlier, but now it is time to really take this concept for a ride and tap into a futuristic example of how CSS3 layout properties work and what we can do with them, assign yourself a few days to complete this tutorial, but remember that coming out of it — you will be at a solid intermediate level of understanding layout properties and their use in web design.
CSS – Learning the Web