background preloader

Creative Juiz, Plugins jQuery

Creative Juiz, Plugins jQuery
Related:  WebDesignRapide

Design Week Portland 5 Cool CSS Hover Effects You Can Copy and Paste Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! Bring Your Boring Site to Life Hover effects can make your site feel much more dynamic and alive. The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. Bump Up Live Demo: Click Here to Launch This works best when you have a series of horizontal items. This one is super easy to implement and there are in fact several ways to go about it. The transition here is completely optional as the effect still works quite well without it. Bump Up CSS Stack & Grow Live Demo: Click Here to Launch For this one I wanted a sort of lava lamp effect so that as you move your mouse down the list, each image slowly expands and then goes back to its original size. To accomplish this, I inserted a stack of images that were 400px wide by 133px tall.

Ombres avancées avec CSS3 et box-shadow - CSS / CSS3 CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Pseudo-éléments :after et :before Imaginez que dans un site vous souhaitiez ajouter derrière un lien la langue du site en référence (qui, pour rappel, se précise grâce à l’attribut hreflang sur un élément <a>) vous pouvez le faire en passant par du CSS : La base de travail Pour résumer simplement notre démarche nous avons des divisions : Ombre simple Bogues

display: inline-block et les espaces indésirables La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux. L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. Le cas «white-space» Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police. Dans la grande majorité des cas, cette situation n’est guère gênante. Démonstration Variante : commentaires HTML

CSS Tutorial Simon Collison | Colly | The Celebrated Miscellany Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript - CSS / CSS3 Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS. Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme au «mouseout». Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol différent de l’effet de transition au moment où la souris quitte l’élément. Les propriétés CSS 3 demandent un préfixe pour les navigateurs (-moz-, -webkit-, etc.) que je n’ai pas précisé ici. Rappel sur transition en CSS 3 Pour créer une transition en CSS 3, vous aurez besoin de plusieurs informations, dont : l’effet recherché (et sa correspondance en propriété CSS), la durée et éventuellement le scénario. Je ne vais pas refaire un article complet sur les détails de ces propriétés, il y en a un très bien fait sur Alsacréations.com par Antoine Cailliau.

Blog | CSS3 Looped Animations Recently I was working on the Filmic.eu teaser site. My idea was to create simple transitions purely based on the CSS3 features so the site worked and looked nice without any single line of JS code. One of the challenges I faced was how to create a CSS animation that loops through multiple text elements using fade in and out transitions. Looking at the CSS3 Animations Module specs there are properties useful for creating a CSS animation loop: The animation-iteration-count property can be set to infinite so the animation repeats forever. The animation-direction property when set to alternate allows to play animation cycle iterations that are even counts in a reverse direction. In my case I wanted to animate 3 list elements, showing and hiding one after another. The CSS animation-delay property comes to help. My solution for this problem was to play around with the animation @keyframes rule to emulate the "delay" behaviour by keeping the property value unchanged over some period of time.

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.

Related:  DEVjavascript