background preloader

Web Design

Facebook Twitter

Google Web Fonts ou comment utiliser facilement des web fonts. Je vais vous présenter Google Web Fonts, ce petit service Google mis à disposition de tout le monde afin d’utiliser certaines typos très facilement sur son site web. Le fonctionnement est très simple. Vous choisissez une font parmi la liste de celles disponibles, et vous cliquez dessus. Vous pouvez voir différents exemples de la typo avec différentes tailles : Vous pouvez aussi tester la typo avec du texte que vous tapez vous-même en cliquant sur Launch in font previewer : Vous accèderez directement au code css qui correspond au style de votre texte (que vous pouvez modifier grâce à la plateforme de gauche) : Si vous voulez utiliser cette typo sur votre site il vous suffit de cliquer sur Use this font, et de suivre les instructions, c-à-d copier coller le lien de la typo dans votre head de votre site et d’utiliser dans votre css le nom de typo qui est donné : Voici un exemple sans la typo perso Voici un exemple avec la typo perso Voici un exemple avec la typo perso et d’autres caractéristiques.

Réaliser une galerie avec des miniatures aux effets CSS3.

Ressources

Programmation. Responsive web design. Bonjour à tous. Nous allons donc aborder aujourd’hui le responsive web design. Ce dernier est de plus en plus utilisé pour la création de sites internet « adaptables » à tous les terminaux mobiles ainsi qu’à nos bonnes vieilles machines. J’ai pu lire le livre d’Ethan Marcotte « responsive web design » et j’ai ainsi appris de nombreuses choses sur le design et l’intégration de sites fluides. Nous allons procéder dans l’ordre pour survoler l’ensemble des points importants. Je vous conseille toutefois de vous procurer ce bouquin pour aller plus loin. 1. Pour obtenir un responsive web design il faut avant tout non plus réfléchir en design fixe, figé avec des pixels mais en pourcentage. Cible ÷ contexte = resultat Il s’agit donc de calculer les tailles des fonts, les padding, margin, width etc en pourcentages. Exemple: Une div1 de 900px contient une autre div2 de 500px.

Rien de plus simple. 2. 3. Les media queries sont apparus avec l’arrivée des règles CSS3. Website Awards - Sites of the day. This website uses cookies to ensure you get the best experience on our website. Cookies Policy.GOT IT! Home - OK-Studios - Corporate Design & Brand Creation - Typo3 & Magento Agentur Hamburg.

Portfolio