CSS

Facebook Twitter

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web.

JQuery

Toutes les définitions des propriétés feuilles de style css. Radioactive Buttons - Des boutons survitaminés au CSS3. Voici un tutorial CSS3 permettant de créer des boutons à l'effet très ... radioactif !

Radioactive Buttons - Des boutons survitaminés au CSS3

Cet effet, proposé par zurb.com utilise la puissance du CSS3 pour donner une impression d'animation à des boutons en quelques lignes de code ! Créez un simple élément HTML comme une balise a: 1. <a class="monBouton">Ca pulse ! </a> Ensuite, il faut déclarer l'animation CSS, pour le moment uniquement compatible navigateurs WebKit (Chrome et Safari): 1. Grâce à ce code CSS3, nous allons démarer le style du bouton à une couleur précise, puis à 50% de l'animation, nous allons lui changer sa couleur et sa zone d'ombre puis retourner à l'état d'origine. Cet effet va donner un effet de "pulse". Toutefois, il va falloir lancer cette animation sur le lien que nous avons créé précédemment, avec le code suivant: 1.a.monBouton { 2. 3. 4.

Nous déclarons le nom de l'animation, sa durée et le nombre d'itération pour jouer l'animation. Et voici le résultat (Visible uniquement sur Chrome et Safari): Site officiel. Generateur de boutons CSS3 - Design et programmation web2 - Dji. Compatibilité: Voici un générateur de boutons CSS3 Update : Mise a jour du générateur Prise en charge d'IE10 Mise a jour de la syntaxe Résultat Code à copier color:#343434; -moz-box-shadow: 0px 0px 10px #343434; -webkit-box-shadow: 0px 0px 10px #343434; -o-box-shadow: 0px 0px 10px #343434; box-shadow: 0px 0px 10px #343434; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #656565; background:#cfcfcf; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfcfcf", endColorstr="#656565"); /* Pour IE seulement et mode gradient à linear */ background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#656565)); background: -webkit-linear-gradient(#cfcfcf, #656565); background: -moz-linear-gradient(#cfcfcf, #656565); background: -o-linear-gradient(#cfcfcf, #656565); background: -ms-linear-gradient(#cfcfcf, #656565); background: linear-gradient(#cfcfcf, #656565); Faire un don pour m'aider à continuer d'améliorer le site.

Generateur de boutons CSS3 - Design et programmation web2 - Dji

CSS Syntax. Button Maker. Downloads. FitVids.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Downloads

Download Files View Demo Convert a Menu to a Dropdown We'll create a dynamic menu that converts to a dropdown when viewed on a small screen. Download Files View Demo Better Linkable Tabs Each tab will have it's own URL for linkability and we'll solve a few common problems that come up. Download Files View Demo Anything Slider jQuery-based slider with lots of features: hashtag linking to direct slides, "infinite" sliding, easing, dynamically built (any number of slides), multiple navigation systems, API, and more... Download Files View Demo Slide To Unlock Like the iPhone's homescreen, the slider must be dragged from left to right to unlock. Download Files View Demo Organic Tabs Click the tabs to swap out content below, but the area fluidly adjusts in size to the new content, rather than jerk up or down. -moz-box-shadow - MDC. Résumé La propriété CSS box-shadow accepte un ou plusieurs effets d'ombre définis sous la forme d'une liste séparée par des virgules.

-moz-box-shadow - MDC

Elle permet de projeter l'ombre de presque n'importe quel élément. Si une bordure arrondie est définie à l'aide de border-radius sur l'élément auquel s'applique l'ombre, l'ombre ainsi créée aura les mêmes bords arrondis. Le niveau sur l'axe z d'ombres multiples est le même que les ombres de texte multiples (la première ombre spécifiée est sur le dessus). Web-Petit : logiciels libres, actualité Web, développement et accessibilité. Créer une horloge animée avec CSS3 et Javascript. Liste non-exhaustive des propriétés CSS. Tout sur le CSS avec son tutorial, feuilles de style. Générer des boutons en CSS. Générer des boutons en CSS Si vous développez vos petits sites vous même, sachez qu'il existe un site qui s'appelle Button Maker et qui permet de créer des boutons de toute beauté, entièrement en CSS.

Générer des boutons en CSS

Vous spécifiez vos couleurs, votre texte et en cliquant sur le rendu, vous obtiendrez le code CSS qui va bien pour mettre ça sur votre site. Maaaa kéééé c'est beauuuuuu ! Attention quand même sous IE car là, ça coince un peu...pas de dégradé, pas de coins arrondis... [Source] Vous avez aimé cet article ?