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 :
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
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!
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:
Display inline-block, une valeur trop peu utilisée Floatera, floatera pas… mais pourquoi ne pas utiliser la valeur inline-block de la propriété display en CSS ? Vous connaissez certainement les valeurs block ou inline, mais moins celle de inline-block et pourtant elle peut vous servir dans bien des cas. Voyons dans quelles conditions nous pouvons l'utiliser (de manière non exhaustive) dans un premier temps, puis dans un second temps quelques difficultés dans son utilisation. Cette astuce a été publiée initialement sur le blog personnel de l'auteur, creativejuiz.fr à la date du Jeudi 17 mars 2011. Utiliser display: inline-block Par défaut les éléments input ont comme valeur de display celle de inline-block. Le formulaire Quelle transition ! Je vous propose cette forme de mise en page pour formulaire. Notre code CSS va donc nous permettre d'avoir un comportement homogène. La CSS : Aperçu du formulaire Une navigation horizontale (éléments de liste) Le code HTML : Le code CSS : Remarque : la valeur inline sur le li est suffisante dans mon exemple.
CSS Animation We have another cool new CSS feature to talk about: animation specified in CSS. There is a lot of ground to cover here, so we’ll start with the basics first. The simplest kind of animation that we’ve added support for is called a transition. Normally when the value of a CSS property changes, the rendered result is instantly updated, with the element in question changing immediately from the old property value to the new property value. Transitions are specified using the following properties: transition-property – What property should animate, e.g., opacity.transition-duration – How long the transition should last.transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).transition – A shorthand for all three properties. Here is a simple example: This div will fade out when hovered over. For example: In the above style rule, opacity will animate over 2 seconds, but left will animate over 4 seconds.
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