WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
CSS / Animations and Effects

Ribbon Wrap - CSS3 Hover Animation

— Add-On pour WorldWideScripts.net

@fr1wwsAbonnez-vous à notre RSS pour rester à jour!

Nouveau! Suivez-nous que vous le souhaitez!


Ribbon Wrap - CSS3 Hover Animation - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Suivez Envato

Suivez-moi et de garder un œil sur les lecteur vidéo HTML5 dans ce style bientôt!

Ruban Wrap - bien plus qu'un effet de survol

Vous survolez l'élément, le ruban glisse de derrière et enroule autour. Rubans CSS arriver enfin.

Il ya des possibilités infinies avec cet outil de CSS3. Il est super facile à mettre en œuvre et a beaucoup de couleurs et de styles prédéfinis (mais la personnalisation est simple!).

Assurez-vous de consulter l'aperçu vidéo pour bien comprendre comment cette chose est fraîche!

Que puis-je utiliser?

Titres et les descriptions d'images

Illustration Harry Tennant

Ruban Wrap peut être utilisé comme un bel effet de survol pour les descriptions d'images, de photos, crédits titres d'illustration, ou tout autre chose que vous pouvez penser!

Mélangez-le avec du contenu

La première chose que retenir lorsque vous essayez cool, que l'on cool. Ce numéro un des Conseils des règles d'être cool

Ruban Wrap peut être traitée comme dans l'élément inline pour faire partie du flux habituel de contenu, ou peut être positionné de manière à couvrir le contenu quand il est plané. Utilisation du mode statique Ruban Wrap, elle peut être traitée comme un ruban plus «traditionnelle» de CSS sans aucune animation.

Bande social

Média social

Avoir une bande de médias sociaux icônes glissent sur votre élément choisi lors de son survol.

Bande d'outils

outils

Outil icônes de style peuvent être utilisés à la place. Il ya même un réglage vertical.

Caractéristiques

  • Animations CSS3 pures
  • 8 variations de couleurs - Facile à faire votre propre!
  • 5 styles supplémentaires pour aller avec des couleurs
  • 3 réglages de vitesse
  • Super simple balisage
  • Superbement stable et flexible - peut être ajouté à presque toute la conception pré-existante
  • Dégrade gracieusement dans les navigateurs qui ne supportent pas les transitions CSS3
  • Petite taille du fichier, le fichier CSS de base est seulement 13.7kb!
  • Livré avec un ensemble de 19 icônes (dans les deux variations sombres et claires), plus une icône vide
  • Tailles et les polices des polices déterminés uniquement par votre propre CSS
  • CSS fichiers divisés en "core" (13.7kb) et "couleurs" (48.5kb) ce qui facilite l'optimisation de la taille du fichier
  • Fonctionne automatiquement avec toute la largeur - parfait pour les mises en page sensibles et fluides!
  • Fantastique documentation qui comprend 6 différents fichiers d'exemple commenté complet (contenant chacune plusieurs exemples).

Support du navigateur

  • Chrome: animation complète
  • Safari: animation complète
  • Firefox: animation complète
  • Opera: animation complète
  • IE8, IE9: Non Animation, rubans apparaissent instantanément lors de son survol

Compatible avec lecteur Ruban

Cet article est compatible avec Lecteur ruban, un lecteur vidéo HTML5 qui utilise la même animation de ruban. Détails sur la façon de combiner sont incluses dans la documentation du Joueur ruban.

BigFat - Page unique filtrables portefeuille HTML5

VIDEO ILLUSTRATIC

Assurez-vous de vérifier BigFat, mon modèle HTML qui utilise des éléments similaires à Ruban Wrap. S'il vous plaît noter que ces deux éléments ne peuvent pas être combinées.

Crédits

Aperçu Crédits

  • Harry Tennant * - Les illustrations utilisées dans les exemples.

Crédits modèle

* Harry Tennant est un ami personnel de la mine et m'a donné la permission d'utiliser son travail de cette façon.


Télécharger
D'autres éléments de ce typeTous les composants de cet auteur
CommentairesFoire aux questions et réponses

Propriétés

Créé:
8 Juin 12

Dernière mise à jour:
N / A

Navigateurs compatibles:
IE8, IE9, Firefox, Safari, Opera, Chrome

Fichiers inclus:
HTML, CSS

Une version de logiciel:
CSS2, CSS3

Mots-clés

eCommerce, eCommerce, Tous les articles, animation, lé, gende, couleurs, CSS3, effet, flotter, html5, joueur, ruban, rubans, rouler, diapositive, titre, vidé, o