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 - Gadgets japonais et Arts insolites CSS coding standards and best practices for beginners CSS coding standards and best practices for beginners – Plan, plan and plan Well it is said that programming is 90% planning. Once you have a good plan, execution is pretty simple. Take a deep breatheReview all the designs/screens, try to find similar patterns.Ask questions, how many browsers and devices we are targeting.How many elements are dynamically generated, consider accessibility and scalability.Once you have all the answers, Write your markup first and make sure your page is accessible and makes sense without css.Do the magic with css. CSS coding standards and best practices for beginners – Clear you concepts Know the difference between inline and block level elements.Understand the box model, avoid adding padding and borders to element which is given a width if you are targeting ie7 users.Be sure when to use float and positions.Know the difference between ID and class CSS coding standards and best practices for beginners – Formatting

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. Build Web Layouts Easily with Susy I've been coming around to the idea of using Susy (a Sass add-on for grids) lately. I like the idea of grids-on-demand, rather than a strict framework (no matter how simple). We even added support to CodePen. Susy provides you with the tools to build your own grid layouts that match the needs of your website. Why would you pick Susy over the million other frameworks out there on the internet? Susy is one of the best things that happened to me in terms of my front-end development workflow over the past few months. Still not convinced? As they say, there's no substitute for experience, so I'm going to walk you through the Susy experience of creating a layout. We'll start off simple, and progress on to more fancy layouts once you've gotten to know Susy a bit better. Before we start, there are some things you must know about our friend, Susy. Creating a Very Simple Layout CSS-Tricks has a pretty straightforward layout, so let's use that for our first example. Simple, yes. This compiles into:

CSS Zen Garden: The Beauty of CSS Design