Today, our aim is to cover the most prominent and modern CSS3 tutorials from leading front-end developers and designers. All of the tutorials here are based on the latest standards to help you become a better web design. At the end of the post, we will also mention a couple of CSS3 learning resources for further learning. Like any programming language, to better understand something, we should allow ourselves to do some repetitive coding, either through a dynamic online platform or within our 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 liking in your web designs, sometimes there are things we have to take into account. Is the image file size appropriate for our project? Can we add filters through CSS rather than through external apps like Photoshop? What can we do with CSS to help our photos look better? Una Kravets takes us on a 15-minute journey. In it, she talks 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. He presents 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 kinds of grids become useful to those who are sharing their photography or using an image grid 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.
CSS Refresher Notes
Notes and style guides are the driving force for many of the webs designers. We must remember to put aside our 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. It also lets designers quickly tap into reference notes for most 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.
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 various devices. 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 reporting 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 indulging 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.
Simplest CSS Slideshow
CSS Modules — Solving the challenges of CSS at scale
Animating Clipped Elements In SVG
SVG and CSS3 animations are among the most trending topics in web development. 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 and using stunning vector visuals.
Expressive has been a coined term in the developer community for quite some time. It 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. Developers have talked about this for years before. Still, 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 is becoming increasingly more interesting to those who wish to test the limits of modern web development abilities truly. 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. Occupies the article with several showcase demos from other successful websites that have established their animations on desktop and mobile devices.
Why I’m Excited About Native CSS Variables
CSS Custom Properties, 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. Many have already adaptd to the idea of using a preprocessor permanently. Still, inevitably all these features (available in the standard) will find their way into modern browsers. 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 was that Twitter decided to switch up the ‘Favorite’ button with a ‘Love’ icon. It is a bold but necessary move to establish a more community-oriented feel around the site. The announcement was made on one of Twitter’s official accounts, through an animated GIF image. It showcased a cool ‘heart splash’ animation accompanied by text. Nicolas Escoffier, a designer, 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 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 the developer to work extra hard to make things work. Others are still learning icon fonts. But, this feature is becoming very popular in the modern developer markets where devs want to create seamless and pleasant experiences to work with.
Really Responsive Tables using CSS3 Flexbox
Optimize CSS Delivery
The last CSS3 tutorial will 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 will help you to learn everything about CSS. This resource is a complete CSS3 tutorial that talks about CSS3 features and their uses in real world. This tutorial fully discussed the selectors, advanced selectors, box models, texts and fonts, and other features, 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. It also 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. Many of the tutorial sites teach the direct syntax through code samples. On the other hand, Codecademy ‘forces’ you to play around with code. This is done through direct and interactive tasks assigned by the people behind each learning course. Such platforms have become very popular, and are now available for nearly every programming language. A very effective way to learn, without question.
Learn CSS Layout
We already learned in this post earlier that layout is the foundation of CSS3. But now, it is time to take this concept for a ride. Let us 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. After that, you will be at a solid intermediate level of understanding layout properties and their usage.
CSS – Learning the Web