Create Your Own @font-face Kits. Create a Thumbnail with Fading Caption Using jQuery. Introduction Hi all, today we are going to learn to create another thumbnail effect with fading and transparent caption. It's simple and obviously I have running out of ideas in jQuery tutorial because this is similar to jQuery Thumbnail with Zooming Image and Fading caption. If you have any suggestion about tutorial, please contact me Before we begin, I have already made different effect for thumbnail, you can check it out: First of all, HTML. it's easy to understand, all your caption/description of the thumbnail should put inside the caption class.
<div class="item"> <a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Title</a> <p>Description</p> </div></div> <div class="item"><a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a><div class="caption"><a href="">Title</a><p>Description</p></div></div> I have put comment on each important CSS. 3. Conclusion Like this tutorials? Les filtres CSS3 appliqués sur des images.
Dans cet article, nous allons nous intéresser à une excellente nouvelle fonctionnalité de CSS3 : les filtres. C'est une fonctionnalité qui peut être utilisée à la fois sur des éléments HTML et des images, mais qui a plus d'intérêt à être utilisée sur des images comme pour la création d'une galerie par exemple. En utilisant uniquement le CSS vous allez être capable de créer tous les effets suivants : greyscale ; blur ; saturate ; sepia ; hue rotate ; invert ; brightness ; contrast ; opacity. Pour utiliser un filtre c'est aussi simple que d'utiliser n'importe quelle autre propriété CSS. Comme la plupart des nouvelles fonctionnalités CSS3 vous avez besoin de préfixer la propriété. Actuellement les seuls navigateurs supportant cette fonctionnalité sont les navigateurs webkit à savoir Chrome et Safari.
On ne sait pas encore si Internet Explorer 10 a prévu de supporter les filtres ; Firefox 17 ne les supporte pas. Cette propriété va convertir votre image en nuances de gris (noir et blanc). CSS Blur. 2 effets CSS3 assez saisissants. Je vais aujourd’hui vous montrer comment réaliser deux effets assez intéressants en CSS3. Le premier est une sorte de fade in / fade out et le deuxième est une lueur externe avec l’attribut box-shadow À ce jour, les transitions en css ne sont pas encore au point sur la plupart des navigateurs mais le fait d’utiliser ces effets ne perturbera en aucun cas la navigation dans votre site.
Et pour les navigateurs sur lesquels elles marchent (Safari et Chrome) la navigation sera encore plus agréable. Donc pour voir les effets dans de meilleures conditions, utilisez Chrome ou Safari. Voici les démos : Le fade in / fade out : La lueur externe : À présent, comment les réaliser… Je vais commencer par le fade in / fade out. Et le code css correspondant : À présent la lueur externe : J’espère que cet article vous aura plu. Raphaël—JavaScript Library. Tutoriel Wordpress: mettre un mot de passe sur son blog - dubuzz.com.
Il peut parfois être utile de bloquer l’accès à son blog WordPress par un mot de passe. vous travaillez sur une nouvelle version de votre blog, et il est préférable de le cacher aux yeux de Google – et de tout le monde – tant qu’il n’est pas terminé à 100%vous vous servez d’un blog comme d’un logiciel de gestion de projet – ce qui est une excellente idée que j’utilise souvent – et vous devez gérer l’accès et les droits de publication de plusieurs personnes concernées par le projetvous avez un blog que vous avez envie de réserver à vos amis, vos proches, vos clients, et vous n’avez aucune envie que ses contenus puissent être vus ou indexés par Google.
Une sorte d’anti-Facebook en somme… 1-Trouver et installer le plug-in WordPress « Members ». Je présume que vous savez déjà comment installer un plug-in depuis WordPress. 2-Effectuer les réglages de base du plug-in « Members » Pour cela, allez dans « Réglages » et cliquez « Members » Les réglages de base du plug-in apparaissent. 5-Et voilà! JQuery Cycle Plugin. Check out Cycle2, the latest in the Cycle line of slideshows. The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Options control how and when the slides are transitioned. Images are used in these demos because they look cool, but slideshows are not limited to images.
Use the Effects Browser page to preview the available effects. For more about options, see the Options Reference page. Frequently Asked Questions Special thanks to Torsten Baldes, Matt Oakes, and Ben Sterling for the many ideas that got me started on writing Cycle in 2007. jQuery Slider with Image and Video LightBox Popup | jQuery Slider, WordPress Slideshow, jQuery Video Gallery. Windy – A Plugin for Swift Content Navigation. Custom Drop-Down List Styling. Circle Hover Effects with CSS Transitions. From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular.
And because the circle is such a special shape, we are going to create some special hover effects for it! Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Example 1 And now, the interesting hover action! Circle Hover Effects with CSS Transitions. Gamma Gallery: A Responsive Image Gallery Experiment. Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account. View demo Download source Creating a truly responsive image gallery can be a very tricky and difficult thing.
There are so many factors to consider like the layout and the features, and so many choices to make when it comes to delivering a good viewing experience for every device. Gamma Gallery is an attempt to create an image gallery that uses a similar responsive images approach to the proposed picture element. Focused on providing suitable image sizes for both, the fluid grid thumbnails and the full image view, the selection of images also depends on container dimensions and not solely on the window size. In some cases it might even be reasonable to load larger thumbnails for a smaller device if we, for example want to show less columns in a grid. Some things we are using in Gamma: Elastislide - A Responsive jQuery Carousel Plugin. Elastislide is a responsive image carousel that will adapt fluidly in a layout.
It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size. In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. Elastislide uses the jQuery++ for the swipe events on touch devices. The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0). The HTML Structure $('#carousel').elastislide(); Options Demos. jQuery Infinite Carousel Plugin.
The Infinite Carousel is a jQuery plugin that allows you to showcase any number of images and videos in a carousel-like fashion. Unlike some other carousels, the Infinite Carousel displays items in a continuous loop no matter how you navigate. Try out the demos below to see how versatile the Infinite Carousel is. Download Download jquery.infinitecarousel.zip (version 3.0.3 – January 24, 2013) What’s So Great About this Plugin? It’s just 11 Kb compressedDisplays image and videosCaptions and linksNew thumbnail optionsCool new circular ring timerKeyboard navigationCallback functionsNo browser lag caused by moving between tabsShortest path algorithm finds the shortest distance between images when using thumbnails to navigate.Works in all major browsersReusable on multiple containersCompletely free for commercial and non-commercial use (see license in plugin header) Demos Notes Options Instantiating $(‘#carousel’).infiniteCarousel({}); CSS Classes.
WOW Slider : jQuery Image Slider & Gallery. Agile Carousel - Javascript Slideshow - Image Carousel. Agile Carousel - Basic JavaScript Slideshow Example - Agile Development. Foundation: The Most Advanced Responsive Front-end Framework from ZURB. Create Your Own @font-face Kits. Définir largeur police en css ? Bonjour, Je reviens sur ce poste qui m'intéresse. Bon je n'ai pas trouvé de solution au problème et font-stretch ne semble toujours pas accepté par les différents navigateurs.
Je me demande comment fait l'Equipe journal. Sur leur site internet ; j'ai l'impression que le dans les menus de navigation (pas celui de tout en haut de la page, ce qu'ils appellent top-part) mais les deux suivant: celui où on trouve la liste des sports, et le sous menu qui apparaît quand on clique sur un des sport; j'ai l'impression donc que les mots ont leur caractères plus étroits qu'ils ne devraient. Je me suis dit que ça devait venir de la font-family ou de l'espace entre les mots. Du coup, j'ai tenté de récupéré leur code CSS que j'ai utilisé pour créer une page HTML, mais je n'obtiens pas le rendu "plus étroite que la normales". Voici le code que j'ai récupéré parmi du HTML du site du zeros: Ce qui donne: Storehomepagefrench. Image map. Information Map #1 Find out their names This is a CSS version of an image map that also works in IE5.5 and IE6 (IE5.01 does not hover well but the links work).
Just hover your mouse over the image to display areas that can be used as links to other pages. Hover over each highlighted area to get the name of each dwarf (and Snow White). Map #2 This is similar to the Snow White image map but using a slightly different method for highlighting each figure. Why? There have been a few sites recently that have produced image maps that either use css AND javascript or will not work in IE. Rainbow Scan the grey areas with your mouse to reveal the colours of the rainbow. Once more done with just CSS and a DEFINITION LIST. Copyright You may use this method on your personal 'non-profit' web site without seeking my permission. Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
Favikon · A favicon generator. Un favicon pour votre site. Principe et exemples de rollover en CSS (pseudo-classe :hover)- CSS Débutant. Pour tout effet de rollover (c'est à dire de changement d'aspect d'un élément au survol de la souris), la pseudo-classe CSS à utiliser est :hover. On fait tout avec ça : changements d'apparence de texte, de couleur de fond, d'apparition (ou de disparition) d'image, de zoom d'image, etc. Enfin, en théorie... Car hélas MSIE n'implémente cette propriété qu'à partir de sa version 7 pour autre chose que des liens. Ce tutoriel va donc passer en revue différentes options les plus recherchées et quelques petites choses plus "exotiques" en matière de rollover. Sommaire Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : color text-decoration background-color background-image Transformation d'apparence d'un lien Le B.A-BA du langage CSS : le lien qui change d'apparence au survol de la souris.
Code (x)html <a href="toto.html">Le Site de Toto</a> Par défaut, les liens sont en bleu soulignés et restent tels quels au passage de la souris. Code CSS Haut Couleur de fond Code CSS Note importante.