11 CSS Learning Tools and Resources. The industry of late has been overrun with articles, tutorials, and tools focused on Sass, even here on SitePoint we’ve been publishing more Sass content than ever before. But we haven’t forgotten about our roots: CSS. For those of you still learning CSS, or wanting to go a little deeper into specific CSS subjects, I thought I’d put together a list of CSS learning resources that I’ve come across in recent months. Enjoy! 1. Unfolding the Box Model Interactive slides that explore CSS 3D Transforms. Press left or right arrow key to advance. 2. A nicely designed little game to help you learn CSS selectors. 3. A simple visualization of selectors in CSS. 4.
A frontend coding quiz and it’s not easy. 5. A 6-chapter tutorial on the basics of CSS, with more chapters to come. 6. A CodePen-like playground for learning CSS. 7. Harry Roberts has updated his CSS Guidelines. 8. 9. 10. 11. Know Any Others? Whatever level you’re at with CSS, I’m sure at least one of the resources listed here will help you. CSS Triangle. You can make them with a single div. It’s nice to have classes for each direction possibility. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle. Demo See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen.
Examples Dave Everitt writes in: For an equilateral triangle it’s worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width. CSS only menus. Latest Demonstrations A CSS ONLY click action tree menu v321-01-2017A third responsive multi-level tree menu with slide action A CSS ONLY click action tree menu v216-12-2016A second responsive multi-level tree menu with slide action A CSS ONLY click action tree menu17-11-2016A responsive multi-level tree menu with slide action A CSS ONLY click action concertina menu14-11-2016A responsive multi-level concertina menu with bounce A CSS ONLY click action slide in menu29-10-2016A responsive multi-level slide in menu A CSS ONLY click action flexbox menu13-05-2016An accordion menu using flexbox and order animation. A circular menu with bounce09-03-2016A CSS only circular menu with bounce animation using cubic-bezier animation timing A responsive swipe-momentum menu24-02-2016A responsive swipe action momentum menu suitable for all the latest browsers and OS.
A responsive multi-level menu14-05-2015A responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones. CSS3 Generator. CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS drop-shadows without images. Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. Divya Manian covered the basic principle in her article Drop Shadows with CSS3 and Matt Hamm recently shared his Pure CSS3 box-shadow page curl effect.
After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element.
The pseudo-elements need to be positioned and given explicit or implicit dimensions. The final core code is as shown below. Further enhancements. 70 Must-Have CSS3 and HTML5 Tutorials and Resources. CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg.
Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders.
Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. HTML 5 Resources. Basic Ready-to-Use CSS Styles. This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. View demo Download source Today we are going to dig a little bit more into process development.
When you’re creating a website or an application from scratch, you may need a collection of patterns helping you building thing up. That is the point of today’s tutorial. Just for you, I baked a little suite of basic CSS snippets, ready for use! Before going any further, let me explain to you how I’ve built this up. You can also build classes of classes to custom things to suit your needs. This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements. Block-level elements The Markup The Basic CSS Shadows Links.