Keyframe Animation Syntax Basic Declaration & Usage For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above Multiple steps If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values: Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate. Calling keyframe animation with separate properties Animation Shorthand Just space-separate all the individual values. animation: test 1s 2s 3 alternate backwards Combine transform and animation Multiple animations You can comma-separate the values to declare multiple animations on a selector. Steps() The steps() function controls exactly how many keyframes will render in the animation timeframe. If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The math works out nicely there. Browser Support More Resources
22 Experimental WebGL Demo Examples WebGL is a web standard created to display 3D graphics in any platform that supports OpenGL. It makes use of the HTML5 Canvas element to generate graphics dynamically from script code, so there's no need to install plug-ins in the web browser. It includes some libraries that are currently in development, such as C3DL and WebGLU.
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity. The aim of this tutorial is to introduce you to several techniques that can be used to create this dimmed overlay with CSS, and determine the pros and cons of each technique as we go over them.
How To Build A CSS3 Sliding Menu It’s often best to put things away until you need them. Navigation menus are a good example. If I’m reading an article, I don’t want a large proportion of screen real estate taken with links — especially on a mobile device. In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect. View the CSS3 sliding menu demonstration… There are various solutions throughout the web, but I struggled to find one matching my requirements: It must use clean semantic HTML5 with no superfluous tags.It must not rely on JavaScript.It must not require additional graphics.It must work on mobile and tablet touch devices.It must degrade gracefully in older browsers (IE7+) or when specific CSS3 properties are not supported.It must look great! Open your favorite editor and let’s get coding… The HTML CSS: Article Styles The article is a little unusual because we want to apply a 3D effect when the menu slides into place.
CSS Positioning Review the W3C CSS standard recommendation. To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for. Although the specification applies to any device for displaying web pages, this article focuses on how it works in browsers. Many details are left out for the sake of simplicity. It's important to remember that a given browser may not support a given feature or may even implement it incorrectly. The Box Model To understand positioning in CSS you must first understand the box model. content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content margin border padding content
CSS Quick Tutorials tools & resources for web professionals These materials are copyright Western Civilisation Pty Ltd. www.westciv.com They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses. Please see our website for detailed copyright information or contact us info@westciv.com. quick tutorials If you already know what a style sheet is and how to link it to your page, and how to specify selectors, properties and units with CSS, then in some ways the rest is detail. Can't find what you want to do here? resources
How To Vertically Center Unknown Rows Of Content Inside A Fixed Container One task css doesn’t make easy is centering objects vertically within their containers. Last summer I offered 6 methods for vertical centering to address that difficulty. The methods generally require knowing in advance the heights of the parent and child elements. I´d like to ask you about vertical centering a child element with a variable height. My initial thought was Javascript would be needed to determine the total height of the child elements, but I thought why not take a look at each method and see what I could come up with. Vertical Centering with CSS Here’s a quick reminder of the methods for centering. I didn’t look at the line-height method, since it’s for centering a single line of text and Manuel’s question referred to images. There’s an assumption with all of these methods that the height of the parent is known as is the height of each child element. Please know I haven’t tested what I’m about to describe everywhere. CSS Table Methods The Simpler Solution And the css. Summary
6 Methods For Vertical Centering With CSS Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods. You can view demos of each of the methods below by clicking here. Let’s start by first talking about something that doesn’t work as many expect. Vertical-Align Horizontal centering with css is rather easy. With text-align: center in mind, most people look first to vertical-align in order to center things vertically. However valign only worked on table cells. The values for vertical-align have meaning with respect to a parent inline element. With a line of text the values are relative to the line-height.With a table cell the values are relative to the table-height-algorithm, which usually means the height of the row. All is not lost though, as we have other methods for centering block level elements and we can still use vertical-align where appropriate. html css Summary
CSS Lists & Counters Module Level 3 Abstract This draft contains the features of CSS level 3 relating to list styling. It includes and extends the functionality of CSS level 2 [CSS21]. The main extensions compared to level 2 are a pseudo-element representing the list marker, and a method for authors to define their own list-styles. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This is a public copy of the editors’ draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction This is an early-stage working draft. It also defines counters, which are special numerical objects often used to generate the default contents of markers. 2 Declaring a List Item
Pure CSS Buttons, Hover Effect & Active Pseudo-Element | Web Tutorial Plus You may remember the days when we used to lookout for custom image buttons. And for getting the hover and active states, we used to deploy JavaScript codes to change the image on hover and click. But there were issues of loading of three images for each state. Well, the days are gone with CSS3 introduction. Today, we will learn to create some cool CSS buttons with hover effect and active pseudo elements. So, before we get into the details and know how, just have a look what we will create in this tutorial. CSS Buttons Demo And as per the practice, you will find all the files available for download at the end of this tutorial. HTML Codes The HTML codes for the buttons are pretty simple and straight-forward. In all these buttons, you will find one common class i.e. Common CSS Code Let’s first have a look at the CSS code for the “common” class. For the common class, we are first defining the padding as 10px and 15px in horizontal and vertical directions. Simple Button Push Me Button Conclusion
CSS3 Filters: Altering HTML & Images With Just CSS CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. Using just CSS we can accomplish some pretty complicated effects. These should be applicable to both images and HTML elements, but obviously browsers will vary for the foreseeable future. The property used to control all of this stuff is filter. filter: filter(value); As you might expect though, browser prefixes will be required. -webkit-filter: filter(value);-moz-filter: filter(value);-o-filter: filter(value);-ms-filter: filter(value); There are quite a few filter, so to get a better idea lets take a look at them individually. filter: blur(5px) brightness(0.5); There are a few filters that I won’t outline below, but these can be easily accomplished with already existing CSS (opacity and drop shadows). Blur Ever wanted to do a gaussian blur on an image or text with just CSS? Sepia
Inner Shadows In CSS: Images, Text & Beyond Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text? Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. Shadow Syntax Before we jump into inset shadows, let’s look at the basic syntax for building the two different types of CSS shadows. Box-Shadow Box-shadows are probably the most common type of CSS shadows. As you can see, listed above in order, the order of values is horizontal offset, vertical offset, blur radius, spread radius and color. The latter two values, blur radius and spread radius are a bit more complicated. As you can see, no blur radius produces a shadow with a hard edge and a high blur radius produces a blurry edge. If you leave off either the blur or spread radius, their values will default to zero. Text Shadow Inset Box-Shadows
Animating CSS Shapes With CSS Animations & Transitions Notes About Current Browser Support for CSS Shapes: The Shapes properties are still in flux at this time. Most of this article's demos use the shape-inside property, which will be temporarily removed from Webkit and Blink. The principles of animating shapes is applicable to both CSS Shapes and CSS Clipping masks. Today we're going to be talking about animating CSS shapes with CSS animations. This is the third article in a series of articles I'm writing about CSS shapes, so in this article I'm assuming you have a basic understanding of how CSS shapes are created. There is a bug in some versions of Safari causing it to crash when the clip-path property is animated. Animatable CSS Shapes There are two ways we can create a shape with CSS shapes: using an image URI which the browser uses to extract the shape from, and using one of the available CSS shapes functions, such as polygon() and circle(), among others. Shapes defined using an image are not animatable. Accessibility in General 1.
La gestion des cookies en JavaScript Les cookies ont été inventés par Netscape afin de donner une "mémoire" aux serveurs et navigateurs Web. Le protocole HTTP, qui gère le transfert des pages Web vers le navigateur ainsi que les demandes de pages du navigateur vers le serveur, est dit state-less (sans état) : cela signifie qu'une fois la page envoyée vers le navigateur, il n'a aucun moyen d'en garder une trace. Vous pourrez donc venir deux, trois, cent fois sur la page, le serveur considérera toujours qu'il s'agit de votre première visite. Cela peut être gênant à plusieurs titres : le serveur ne peut pas se souvenir si vous êtes authentifié à une page protégée, n'est pas capable de conserver vos préférences utilisateur, etc. En résumé, il ne peut se souvenir de rien ! De plus, lorsque la personnalisation a été créée, cela est vite devenu un problème majeur. Les cookies ont été inventés pour remédier à ces problèmes. Un cookie n'est rien d'autre qu'un petit fichier texte stocké par le navigateur. Paire nom / valeur▲