Архив метки: верстка

Оптимальное размещение блоков/изображений на странице

Коллега подсказал чудесный плагин для jQuery, автоматически укладывающий изображения или произвольные блоки плиткой. По словам разработчика, masonry — обратная сторона плавающих блоков в css. В то время как плавающие блоки выравниваются сначала по горизонтали, а затем по вертикали, этот плагин выравнивает элементы вертикально, затем горизонтально, учитывая сетку. При это минимизируются вертикальные зазоры между блоками, создается эффект кирпичной стены.

Также можно настроить симпатичную анимацию при изменении ширины окна.

Читать далее 

Шрифты, веб и Google — RMCreative

Google обрадовал сразу несколькими проектами:

Google Font API — API для удобного кроссбраузерного подключения нестандартных шрифтов. Использовать очень просто:

<html>
  <head>
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
     <style>
     body {
        font-family: Tangerine, serif;
        font-size: 48px;
     }
     </style>
  </head>
  <body>
     <h1>Making the Web Beautiful!</h1>
  </body>
</html>

За кулисами происходит определение браузера и подсовывание ему нужного формата CSS и шрифта.

Google Font Directory — набор довольно качественных свободных шрифтов, которые можно использовать при помощи Font API как в открытых, так и в коммерческих проектах.

WebFont Loader — JavaScript библиотека, которая позволяет выйти за рамки стандартного Font API: использовать шрифты typekit и свои шрифты. Также есть некоторое количество полезных callback-ов.Использовать все эти чудесные возможности можно прямо сейчас.

via Шрифты, веб и Google — RMCreative.

Extend Grid — делаем жизнь верстальщика немного проще / Web-разработка / Хабрахабр

Grid! Grid! Grid! Идем в ногу со временем

Extend Grid — делаем жизнь верстальщика немного проще / Web-разработка / Хабрахабр.

11 классических CSS-техник, которые упростит CSS3

11 Classic CSS Techniques Made Simple with CSS3 — Nettuts+.

Хорошая статья о «классических» (на самом деле, в основном,  с использованием jQuery) техниках и их заменах в светлом будущем, на CSS3.