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). 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 There is much to learn about CSS animations, and I suggest that you start from this Mozilla Developer Network (MDN) article. 2. Another new and awesome CSS feature is the calc() function. 3. Related:  codeCSSwebpage

Introduction | 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. This plugin is currently in development as is to be considered a beta release. Features Support We have tested internally, but we hope to use this public beta phase to identify, isolate, and fix issues related to the plugin to ensure it is as solid and reliable as possible. For live chatting, please use the dedicated Gitter Chat Room for the admin plugin for discussions directly related to the admin plugin. For bugs, features, improvements, please ensure you create issues in the admin plugin GitHub repository. Installation First ensure you are running the latest Grav or later. $ bin/gpm selfupgrade -f

12 Fun CSS Text Shadows You Can Copy and Paste Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Basic Shadow The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! Syntax The syntax for creating a simple text-shadow is shown below. text-shadow: horizontal-offset vertical-offset blur color; Putting this into action, here’s an example with a shadow that has been moved down two pixels and right four pixels with a three pixel blur and a color of black at 30% opacity. text-shadow: 2px 4px 3px rgba(0,0,0,0.3); Here’s the result of this code, a nice simple shadow that is quite appealing all by itself. Why rgba? Quick and Dirty Letterpress Hard Shadow

Ufunk.net - Gadgets japonais et Arts insolites Guide to Responsive-Friendly CSS Columns By Katy DeCorah On July 25, 2014 With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. #Where to declare columns You can declare columns on any block level element. In the image below, the left side depicts CSS column rules being applied to the second paragraph to transform just that content into columns. #How to declare columns There are three different ways to declare columns: Declare column-count.Declare column-width.Declare both (recommended). Let's explore the different ways to declare columns. #1. Use column-count to declare the number of columns. Live Demo See the Pen [2] CSS Columns, count-count by Katy DeCorah (@katydecorah) on CodePen. The number of columns remains consistent even as the browser width changes as demonstrated in the gif below. #2. Use column-width to declare the width of the columns. #3. #Customizing columns #column-gap

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. Our most popular tools Get the technical details on GreenSock's most popular tools TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP). TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), updateTo(), and more. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. Flash API Docs Our Flash API docs have been preserved in the charming and classic ASDoc format.

CodePen Embed - Complex Text Shadow Examples CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS Zen Garden: The Beauty of CSS Design 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. How does it work? MorphSVGPlugin does a ton of heavy lifting so that you don't have to. Selector string An SVG element shapeIndex

Expert’s Weigh In: What’s Your Favorite CSS Trick? : Adobe Dreamweaver Team Blog If you’ve been looking for some shortcuts to save some time or ease some of the frustrations that sometimes come with writing CSS, then we’ve got a treat for you! Instead of handing out candy for Halloween, we asked a handful of experts to share their favorite CSS tricks with us. No magic potions here, just some sweet little treats. Nicole Dominguez, Senior Product Designer & Front End Developer at Sawhorse Media My favorite CSS “trick” would have to be these 3 lines of CSS: I’ve been using this snippet for years! (Github link) Daniel Box, Designer at KNI Responsive images in CSS are pretty easy: just set the width: 100% and height: auto and you’re good to go. (Github link) Ashley Nealy, Founder & Chief Creative Officer, Mindly Maven, LLC It’s hard to choose just one CSS trick, but my my favorite has to be: It’s the perfect little trick for hiding any pesky element that you don’t need at the moment without having to recreate the entire page. Brian Ferdinand, Senior Developer at Gravitate

Related: