background preloader

12 Awesome CSS3 Features That You Can Finally Start Using

12 Awesome CSS3 Features That You Can Finally Start Using
Martin Angelov If you are like me, when you see an impressive demo of a new CSS3 feature, you can’t wait to start using it in websites. Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. I have good news for you – with the latest browser releases, there are a few awesome features that are finally supported everywhere, and you can start using them right now! A word of caution – most of these features will not work in older versions of IE (9 and below). If these browsers are a large portion of your demographic, I am afraid that you will have to rely on fallbacks. 1. CSS animations are finally available in all major browsers, even in IE (since version 10). The second way for defining animations is a bit more complicated – it involves the description of specific moments of the animation with the @keyframe rule. Run 2. Another new and awesome CSS feature is the calc() function. 3. 4. 5. 6. 7. 8.

Related:  CSSwebpagecode

untitled Table of Contents Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Sass .scss source files are available if you use Sass as your CSS precompiler. Performance & Organization - Learn to Code Advanced HTML Having the ability to write HTML and CSS with a solid understanding is a great expertise to have. As a website’s code base and traffic grows, a new skill set comes into play, one that is extremely important to both development time and user experience. Knowing the fundamentals of website performance and organization can go a long way. The organization and architecture of a code base can greatly affect not only the speed of development, but also the speed at which pages render. Both of which can be sizeable concerns not only for developers but also users. Taking the time to design the right structure for a code base, and identify how all of the different components will work together, can speed up production and make for a better experience all around.

Grav Documentation The Grav Administration Panel plugin for Grav is a web GUI (graphical user interface) that provides a convenient way to configure Grav and easily create and modify pages. This will remain a totally optional plugin, and is not in any way required or needed to use Grav effectively. In fact, the admin provides an intentionally limited view to ensure it remains easy to use and not overwhelming.

Responsive Autorun Slideshow Date : 12th January 2015 For all the latest browsers, Android and iOS Information A basic responsive autorun slideshow for all the latest browsers and operating systems including touch screens. This has a slide in/out animation, but can be made a fade in/out animation with a simple change to the stylesheet. clear Summary The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements. When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats.

Docs - HTML5 Meet the Docs Super Menu The menu to the left gives you access to every class across the entire GreenSock API for HTML5. Take a peak inside GSAP to see the docs for all our animation tools. Looking to add some snazzy text effects? Check out the tools in the Text category. Material Design Color Palette Generator - Material Palette material palette More Material Design chevron_right Palette preview page-break There isn't an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before, page-break-after and page-break-inside. These properties help define how the document is supposed to behave when printed.

MorphSVGPlugin MorphSVGPlugin provides advanced control over tweens that morph SVG paths. The video below details what you need to know to get up and running fast with MorphSVGPlugin. It has never been easier to morph between SVG shapes. First, let's cover what this new plugin can do: Morph <path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches.Morph a <polyline> or <polygon> to a different set of pointsThere's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM.Optionally define a "shapeIndex" that controls how the points get mapped.

An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements Hola a todos! (Hello, everyone!) In my early days of web design, I had to learn things the hard way: trial and error. There was no Smashing Magazine, Can I Use, CodePen or any of the other amazing tools at our disposal today. Having someone show me the ropes of web design, especially on the CSS front, would have been incredibly helpful.