background preloader

Create Your Own @font-face Kits

https://www.fontsquirrel.com/tools/webfont-generator

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é.

5 sources d’inspiration pour la création d'un site web Trouver un nom pour son site Si vous comptez (par exemple) lancer un site web qui parle de musique, vous vous doutez bien que les noms de domaine music.com et music.net sont déjà pris depuis longtemps. Une idée serait de trouver un nom assez original pour son site, avec le nom de domaine qui va avec. Et justement, il y a des applications sur le web qui vous aident à trouver des noms de site dont les noms de domaine correspondant sont encore disponibles.

Les codes de la Typographie #1 - Structure et vocabulaire de la lettre - typographie Pour ce mois d'avril, nous allons réaliser un dossier complet sur la Typographie. Essentiel dans la réalisation d'un logo ou d'un slogan elle peut véhiculer des messages puissants et différents selon ses formes. Dans ce premier numéro nous allons compre Définitions : Caractère : Désigne une lettre. Des ressources pour générer automatiquement la documentation de vos prochains projets Aujourd'hui, le BlogDuWebdesign vous propose de découvrir ou redécouvrir une pratique qui fera le bonheur de vos collaborateurs futurs : la génération de documentations pour vos projets. Pourquoi documenter ses projets Quand je parle de documenter ses projets, je pense que la plupart d'entre vous pensent à des projets publiques ou open source. Si effectivement la documentation est nécessaire dans ce genre de projet pour permettre à la communauté de comprendre le fonctionnement de votre programme/ressource sans passer par le code source, elle peut être tout aussi nécessaire pour des projets en interne, même si vous êtes le seul développeur présent.

Meta viewport "width=device-width" sur iPad Bonjour, Voici ma situation : je viens créer une page dont la largeur par défaut est de 1060px, mais qui doit passer à une largeur de 100% sur les écrans de téléphone. Pour cela, j'ai ajouté à ma page la meta viewport suivante : Voici mon code html simplifié : 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.

Comment tester la compatibilité de votre site sous Internet Explorer même si vous n'êtes pas sous Windows ? - Korben Comment tester la compatibilité de votre site sous Internet Explorer même si vous n’êtes pas sous Windows ? Si vous êtes développeur web et que vous avez besoin de faire des tests de compatibilité sur la dernière version d'Internet Explorer disponible sur la dernière version de Windows, à savoir la Technical Preview de Windows 10, voici un service proposé par Microsoft qui va bien vous rendre service. RemoteIE utilise le client RemoteApp qui donne accès aux machines virtuelles Azure, sauf que là, pas besoin de configurer votre propre machine... Non, non, Microsoft met à votre disposition un Internet Explorer distant sur lequel vous pouvez vous connecter gratuitement, que vous soyez sous Windows, sous Mac, sous iOS ou Android...

Lisibilité des sites web, font-size : 100% – 16px Dans ce nouvel article je vais présenter les solutions mises en place par les webdesigners pour améliorer la lisibilité de leur contenu textuel. Je ferai une analyse des « bonnes » pratiques typographiques pour optimiser la lisibilité du contenu et présenterai une sélection de sites web affichant leur contenu textuel à la taille par défaut de 100% soit 16px. Trop gros ? Pas esthétique ? Hum… pas si sur que ça… Cet article est disponible en Français et en Anglais : 20 Actions Photoshop super pratiques et gratuites pour graphistes et UI designers Faciliter votre workflow peut vous faire gagner un temps considérable et surtout très précieux ! Voici 20 actions Photoshop gratuites, puissantes et indispensables. Adobe Photoshop a justement mis en place certains outils essentiels pour œuvrer dans ce sens-là, dont les fameuses actions. Ces scripts automatisés font tout le travail pour vous (une partie du moins) en un temps record (comptez quelques secondes). Ces actions très utiles surtout dans vos tâches répétitives, vous permettront d’optimiser indubitablement votre flux de travail. De l’export de fichiers, à l’ajout de filtres/textures/ombres en passant par le redimensionnement, ces actions seront parfaites pour vous designers surbookés !

Balises HTML DE BASE Pour comprendre le fonctionnement du langage CSS, il est nécessaire d'avoir quelques notions en HTML. Le HTML est un langage simple, fait de balises (du genre <tag>) qui ont toutes une fonction et un sens. C'est ce qu'on appelle la sémantique. Respecter la sémantique, c'est améliorer l'accessibilité... et aussi le référencement. Cela dit, on ne perdra jamais de vue que l'humain passe avant les robots ! On fait un site pour des utilisateurs, pas pour le plaisir de se retrouver en tête de requêtes sur google. 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.

GitW00t - Un script pour enregistrer une Div en Gif animé Si vous avez votre propre site et que vous souhaitez proposer à vos visiteurs une fonction d'enregistrement d'une partie de vos pages, j'ai ce qu'il vous faut. Ça s'appelle GitW00t! et c'est un script qui permet d'enregistrer la div de votre choix sur une page web, pour ensuite en faire un GIF animé. Idéal pour enregistrer les interactions de vos visiteurs avec un jeu, un formulaire, ou n'importe quelle fonctionnalité dans le but de produire des rapports de bugs, ou des replays de parties, ou des démos d'utilisation...etc.

Générateur complet pour propriété CSS @font-face : compatibilité cross-browser, option de traçage des polices, sélection de sous-ensembles (par langue ou type de charactères) afin de ne garder que les charactères utilent et donc diminuer le temps de chargement et donc le temps nécessaire avant l'affichage de la police... Avec cet outil il est vraiment possible d'utiliser @font-face by objectifmars Apr 23

Related:  webdesign...cssnickleusfontsgraphisme webDESIGN TOOLS/RESOURCESDESIGNFontsfoundryTypographieCSSacmquiberon