CSS Typography: Examples and Tools
In the previous part of this series, we discussed some techniques and best practices for CSS typography. Let’s now delve into the subject further by looking into some case studies, tools, as well as a showcase of excellent CSS typography on the web. This is the third part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography. Case Studies on CSS Typography Tutorials and theories can be great, but nothing says proof like a case study. Southern Savers Case Study: Typography Serif Fonts vs. Fixing Web Fonts, A Case Study Ten Great Free Fonts Cross-Browser: A Case Study in @Font-Face CSS Typography Tools Below is a collection of typography-related tools, with most being geared toward helping you work with CSS typography. Typographic Grid This premade CSS grid by Chris Coyier is composed to a vertical rhythm. Baseline Baseline is a typographic framework that adheres to a baseline grid. Typograph TypeTester
CSS Modal
Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment Modal experiment updated for Firefox 10 which has better transform, transition and animation performance. In this experiment, clicking an ‘open’ link pops up a dialogue with a smooth hardware accelerated bounce (where supported). Of course, using images and JS will only make the modal better, and something like hitting ESC to close will never be reproduced in CSS. How to The :target pseudo-selector changes the style of a targeted element. The modal is two parts, one part container, one part content. The content is positioned roughly in the middle and is prettified with a sprinkling of text shadow, border radius, box shadow and gradient. There are two animations, one named “bounce” (scale to slightly larger than normal, then fall back) and another, “minimise”, which act on the content part. Caveats
Script Junkie | Making Sites Shine with @font-face
Like many of my web designer brethren, I’m a bit of a typographic geek. And like many web designers, I’ve been frustrated (to say the least) about the historical state of web typography. At first, we were limited to a common, but very small set of “web safe” fonts. Anything beyond those fonts, we had to rely on images. Images for text not only meant we had to create and maintain dozens (if not hundreds) of images, but it introduced accessibility issues. Over time, some clever image replacement techniques evolved to address those accessibility challenges, but we still had the overhead of image creation on top of HTML/CSS development. Hello! During the same time people were struggling with font alternatives, the CSS 2 specification introduced @font-face as a way to link to actual font files via CSS: And then utilize those specified fonts in style declarations: And everyone rejoiced, right? Browser Support Today First, Get a Font Who’s the Host? Self-Hosting FontSquirrel Hosted Picking a Method
Ajax - MDC Doc Center
Quel est le problème ? Une page web se compose d'un fichier HTML et généralement d'autres fichiers, comme les feuilles de style, les scripts, les images, etc. Pour charger une page web, le navigateur envoie une ou plusieurs requêtes HTTP au serveur afin de récupérer les fichiers nécessaires à l'affichage de la page. Le serveur répond ensuite en envoyant les fichiers demandés. Si vous visitez une autre page, le navigateur demande les nouveaux fichiers correspondants et le serveur répond en les envoyant. Ce modèle fonctionne parfaitement pour de nombreux sites. Avec le modèle classique, il faudrait récupérer puis charger l'intégralité de la page, alors que nous avons seulement besoin d'en mettre à jour une partie. C'est pourquoi de nombreux sites web utilisent plutôt des API JavaScript afin de demander les données au serveur pour mettre à jour le contenu de la page sans passer par un rechargement complet. Pour cela, on utilise principalement l'API Fetch. L'API Fetch Le magasin de conserves
In your @font-face
10 Mind-Blowing Experimental CSS3 Techniques and Demos-Speckyboy Design Magazine
As CSS3 gathers momentum, more and more new techniques and ideas are being published every other day. Each seems to explore exciting never seen before avenues, and ALL push CSSes boundaries ever further away. It really is an exciting time for web design. The post should have been called “The Top 10 Kick-Ass Experimental CSS3 Techniques That Simply Blew My Mind Away! Anyway, here are our favorite CSS3 experimental techniques, And please, please do try this at home, we will really look forward to seeing your results. Our Solar System – An experiment with CSS3 This is a recreation of our solar system using the CSS3 features border-radius, transform and animation. Our Solar System »View the Demo » Star Wars HTML and CSS: A NEW HOPE A couple of years ago, would you have thought that the Star Wars Episode IV opening crawl could be built by using only CSS and HTML? Star Wars HTML and CSS: A NEW HOPE »View the Demo » Pure CSS3 Animated AT-AT Walker from Star Wars Pure CSS3 Spiderman Cartoon
How to Use Web Fonts and the @font-face CSS Method
The days of web safe fonts are about to end thanks to all the great attempts of designers, developers and industry leaders around the world. The good thing in digital production industry is the community of people who are always pushing the boundaries to their limits. Then when it becomes a new standard or convention its pushed forward again by the same community even further. Technologies like Cufon, sIFR, FLIR and @font-face are some good examples of this. We will investigate the use of @font-face CSS method, which is stronger, simpler and more flexible. Although its more commonly known as a CSS3 property @font-face was actually first proposed for CSS2 and was implemented in Internet Explorer 4 using the propriety format called Embedded Open Type (EOT)! I still think with good use of typography this small list of web safe fonts are enough to create basic typographic impact, but having more options and variations also excite me in another way. What is @font-face Formats How to make it work
