Menu Transitions | unraveled Since I started helping out over at Widgetopia, I’ve been paying much closer attention to Web menus and how they work. The aspect of menus that’s been on my mind the most is the menu transition often used in Flash UIs, such as the “choose a model” menu on the current Volkswagon homepage. What intrigues me about menu transitions is not their effects, but their experience. As an experiment of sorts, I thought a Nielsenesque miniguide to menu transitions would be fun to write. What are Menu Transitions? Menu transitions are visual (and sometimes audio) effects that connect two separate menu states. A flashy yet well produced example of menu transitions (Flash with sound) can be seen at Joshua Davis Studios. When Are Menu Transitions Appropriate? Simply put, menu transitions are appropriate when they convey an idea or meaning without gratuitous or long effects. Another example of menu transitions can be found on the Elf movie homepage.
Gérer les débordements de contenu grâce à CSS - Alsacréations Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Exemple (HTML) : Partie CSS :
CSS Specificity Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity. Download the PDF Legend: X-0-0: The number of ID selectors, represented by Sharks0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish 0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob*: The universal selector has no value +, >, ~: combinators, although they allow for more specific targeting of elements, they do not increase specificity values:not(x): The negation selector has no value, but the argument passed increases specificity CSS SpeciFISHity You can download the PDF of fishy CSS specificity here Specificity determines which CSS property declaration is applied when two or more declarations apply to the same element with competing property declarations. With CSS3 Selectors, order is even more important, as is understanding specificity: !
Snazzy Hover Effects Using CSS With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has. With very good browser support, we can do lots of cool things that we know will work in all major browsers. In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties. Here is a live demonstration of the effect we will be creating. Advanced hover states are quite simple When I first started learning CSS, the :hover pseudo-element was no more than a way to remove the underline on a text link. Since then, through experimentation, I have learnt that it is so much more powerful and it can create some really cool effects when used in conjunction with other CSS properties. The astute reader will see that this technique has great potential outside of what we discuss here, such as showing CSS tool tips when hovering over a hyperlink. <! Wrap up
Image Reflections with CSS Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images. The minds behind WebKit have their own idea behind image reflection: pure CSS. The Webkit CSS The -webkit-box-reflect property accepts a value in the following format: -webkit-box-reflect: <direction><offset><mask-box-image> A sample usage of -webkit-box-reflect looks like: An involved CSS value but well worth the work. WebKit first implemented CSS reflections in 2008 and, to my knowledge, no other browsers have implemented a similar API. Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III Newer Dijit's TabContainer Layout: Easy Tabbed Content
CSS Style Guides As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Let's round up some existing ones. But first... I love pattern libraries. The List I'll list some excerpts from each that I like below. GitHub GitHub CSS Style Guide → As a rule of thumb, don't nest further than 3 levels deep. Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. Google Google HTML/CSS Style Guide → Use ID and class names that are as short as possible but as long as necessary. E.g. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability. E.g. .demo-image not .demoimage or .demo_image Idiomatic CSS Nicolas Gallagher's Idiomatic CSS → More?
Nicer Navigation with CSS Transitions - GetHiFi Update: March 21, 2014 - We have an updated post after years of practice with these techniques. Newer versions of Apple's Safari web browser (and Google Chrome, which is also based on Webkit) support a vendor-specific implementation of the CSS3 Transition property. CSS Transitions are a very powerful effect that can eliminate the use of JavaScript for many common effects. Quick Overview There are three properties that make up the transition: -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function. Additionally, there is a shorthand property that combines the three: -webkit-transition. -webkit-transition-property: This specifies which properties of the element will be animated. -webkit-transition-duration: The amount of time from the beginning of the transition to the end. -webkit-transition-timing-function: There are a number of timing functions—mathematical models for how the transition takes place—that you can choose from. A Simple Example
CSS Triangles This post has been updated to include CSS triangles without markup via :before and :after pseudo-elements. I was recently redesigning my website and wanted to create tooltips. Making that was easy but I also wanted my tooltips to feature the a triangular pointer. The CSS The secret to these triangles is creating giant borders to the two perpendicular sides of the direction you'd like the triangle to point. CSS Triangles with :before and :after The CSS examples above uses true elements but what if you don't want to add single triangles? The border side you add the color to is the opposite side of the arrow pointer. I don't know how I didn't know about this technique sooner!
Object Oriented CSS · stubbornella/oocss Wiki Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 | Blancer.com Tutorials and projects Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the following… The effect is built up gradually and works on the latest Webkit browsers (Safari, Chrome), Firefox and Opera. Other browsers simply get some yellow squares. Step 1: The HTML and Basic Squares Let’s start with the simplest version that works across all browsers. <ul><li><a href="#"><h2>Title #1</h2><p>Text Content #1</p></a></li><li><a href="#"><h2>Title #2</h2><p>Text Content #2</p></a></li> […] </ul> Notice that each note is surrounded by a link which is always a good element to use as it automatically means that our notes become keyboard accessible. The CSS to turn this into the yellow squares is simple: We reset things the browser normally gives us like margins and paddings and the list style to get rid of the bullets of the list. This works for every browser out there – including IE6. Blancer
Word-Wrap: Force Text to Wrap Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. CSS: Word-Wrap Property (view demo) You can specify either normal or break-word value with the word-wrap property.
Animation Using CSS Transforms < CSS Tweet363 Shares Share0 Tweets37 Comments The examples on this page will work now in Firefox, Safari, Chrome, Opera and Internet Explorer 10. In older browsers you will see either no effects, or the transforms taking place without any animation. The animations presented below involve setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which causes the transformation to take place incrementally over a set time period. There are also other kinds of animation available, including @keyframes for perpetual motion, and requestAnimationFrame which gives complete control over the timing and path. Firefox and Opera now support these transforms with an almost identical syntax - just replace -webkit- with -moz- or -o- in the examples below. Internet Explorer 10 supports transitions with no prefix. To support all modern browsers, the following styles should be used for transitions: