Effet de remplissage

Parfois vous voulez juste créer quelque chose spécial. Peut-être pour l'une de vos pages où vous voulez arriver à quelque chose d'unique pour soutenir votre marque. Icons Filling Effect peuvent vous aider à concevoir une page Web cool avec juste quelques icônes.

C'est un effet accrocheur remplissage pour vos icônes, qui peut être utilisé pour faire une simple page dynamique.

6.8.14 - 0

Tutoriels pour créer des effets 3D en CSS3 et JavaScript

Il semble que la 3D est en train de devenir la nouvelle 2D à la conception numérique. Ce modèle s'est déplacé du grand écran sur les petits écrans pour le web. Avec un nombre croissant de bibliothèques CSS3 et JavaScript pour l'animation, il est devenu plus facile de rendre les objets à droite dans le navigateur.

Ces tutoriels devraient fournir une excellente introduction à l'animation CSS3 et JavaScript. Si vous ne l'avez jamais codé votre propre page personnalisée animations alors cela va prendre un peu de pratique. Mais avec le temps l'ensemble du processus deviendra comme une seconde nature.

1. http://24ways.org/2010/intro-to-css-3d-transforms/
2. http://desandro.github.io/3dtransforms/docs/perspective.html
3. http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
4. http://tympanus.net/codrops/2013/01/08/3d-book-showcase/
5. http://tympanus.net/codrops/2014/03/27/3d-grid-effect/

1.6.14 - 0

Ressources pour créer des sites Web de style Windows 8 Metro UI

Windows 8 est arrivé et l'apparence familière de Windows OS a complètement changé avec le nouveau interface Metro UI.

Il s'agit d'un grand déménagement par Microsoft, cette nouvelle interface sera utilisée dans toutes leurs produits; bureau, tablette, mobile et leur site web.

Personnellement, j'ai bien aimé l'interface utilisateur Metro car elle s'inscrit dans de nombreux aspects de la conception web moderne comme la simplicité...

Si vous aimez l'interface utilisateur de métro et de planification pour créer votre prochain site Web avec des inspirations de cela, voici toutes les ressources pour créer Windows 8 Metro UI:

Template:

• Metro UI CSS

Metro UI CSS est un framework assez complet pour la création de site Metro-UI.

Il contient un système de grille, les styles de typographie, des tables, des formulaires, des boutons et des images...

Aussi des composants intégrés JavaScript pour les menus, sidebar, accordéon, barres de progression, les avis et plus encore...

• BootMetro

BootMetro est comme un thème pour Twitter Bootstrap qui apporte toutes les fonctionnalités de Bootstrap mais avec un design de métro.

• Metro-bootstrap

Semblable à BootMetro ci-dessus, le metro-bootstrap est encore un thème pour Twitter Bootstrap.

Il possède toutes les beautés de Bootstrap et comprend également les styles aussi bien.

• Metro UI Template

Il s'agit d'un framework pour créer des sites utilisant le style Windows 8 Metro UI.

• Droptiles – Metro-Style Web Dashboard

Il affiche des informations en tuiles où chaque carreau est une mini application elle-même l'extraction de données provenant de sources externes. Le projet est construit avec ASP.NET.

• PHP Image Gallery In Metro UI

Une galerie d'images PHP qui peut générer automatiquement des images et peut afficher des images dans un album.

JQuery Plugins:

• Metro JS
• jQuery Metro UI Plugin
• jQuery Mobile Metro Theme
• Metro UI Theme Builder For jQuery UI
• TileJS

Metro UI Icons:

• Modern UI Icons
• Metro UI Dock Icon Set
• Metro Icons

12.11.13 - 0

Bootstrap Web Design

Bootstrap Web Design

Vous connaissez forcément Twitter. Le projet Bootstrap web design a été publié en août 2011 pour répondre à des besoins internes de développement de Twitter. Il a été mis à disposition du public sous licence Apache. La version 2.1 est sortie en août 2012.

Qu'est ce que Bootstrap?

Bootstrap web design est un framework open source pour la création d'interfaces web. Bootstrap web design permet à tous les niveaux de développeurs Web et les concepteurs de l'utiliser. Bootstrap utilise JavaScript, CSS et HTML et inclut le support de CSS3 et HTML5. Vous pouvez verrouiller Bootstrap sur votre application pour fournir des fonctionnalités avancées, ou vous pouvez l'utiliser pour construire des applications à partir de zéro.

Obtenir Bootstrap

Bootstrap web design est disponible en téléchargement gratuit via GitHub en deux saveurs:
 - Version compilée
 - Code source complet
La version compilée est la plus rapide. Elle contient trois sous-répertoires: css, js et img. Le "css" contient des feuilles de style, "js" contient les fichiers JavaScript et images utilisés par Bootstrap web design sont stockés dans le répertoire "img". Avec le téléchargement, vous êtes prêt à mettre Bootstrap web design en mouvement.

Utilisation de Bootstrap

La documentation fournit de grandes instructions pour l'utilisation de Bootstrap web design. Une bonne partie de celui-ci décrit les bases du bootstrap permettant une page web. Le code suivant fournit un exemple de ces bases. 

Les principaux points sont les deux fichiers JavaScript référencés au bas de la page doctype HTML5, la feuille de style bootstrap.min.css...

<!DOCTYPE html>

<html>

<head>

  <title>Titre</title>

  <!-- Bootstrap -->

  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>

  <script src="http://code.jquery.com/jquery.js"></script>

  <script src="js/bootstrap.min.js"></script>

</body>

</html>

Bootstrap Web Design

7.9.13 - 1

CSS3 Exemple

CSS3 est l’évolution de CSS2, avec beaucoup de nouveautés, arrondir vos images dans CSS, faire des ombres sur les div, des ombres sur du texte, des polices de caractères plus fun, des colonnes, des bordures d’images, Media Query, etc…

Nous allons voir quelques exemples assez surprenant de réalisation faites avec CSS3.

• Effet d’ombre sur un texte:

• Une horloge:

•  Tab Menu:

• Slick Menu:

•  Mettre un objet en mouvement:

8.7.13 - 0

Nouveauté CSS3

Beaucoup des nouveautés sont ajoutées pour CSS3. Nous allons essayer de mettre en valeur certaine nouveauté CSS3 sur cette page:

Bordures

• border-image
• border-radius
• box-shadow

Backgrounds

• background-origin 
• background-clip
• background-size
• multiple backgrounds : L'affichage de plusieurs images en arrière-plan

Couleur

• HSL colors: Ainsi que l'utilisation hexadécimal et couleurs RGB, CSS3 pourrait également voir l'introduction du TSL (Teinte, Saturation, Luminosité) valeurs.
• HSLA colors
• opacity
• RGBA colors

Effet du texte

• text-shadow
• text-overflow
• word-wrap

Interface utilisateur

• box-sizing
• resize
• outline
• nav-top, nav-right, nav-bottom, nav-left

Sélecteurs

• attribut selectors

Modèle de la boîte de base

• overflow-x
• overflow-y

Autres

• CSS3 Transitions
• media queries
• multi-column layout
• Web fonts
• speech

6.7.13 - 1

Créer votre présentation avec slid.es

Slid.es est un service web très puissant permettant de créer des présentations et slides dynamiques avec des effets grâce à une interface WYSIWYG.
Ce service vous permet de créer différents slides, de les animer en quelques seconds:

•  Le service vous propose un ensemble de thèmes et de styles.
•  Vous aurez la possibilité de changer la police, les couleurs, les titres, etc.

Une fois terminé, vous enregistrez votre présentation, lui ajoutez titre, description et lien unique pour pouvoir ensuite l'utiliser.

 

Et vous pourrez l'exporter au format web pour l'intégrer dans votre site.

Voici un simple démo.

Site officiel.

11.6.13 - 0