Вертикальное и горизонтальное центрирование div

Наверняка все сталкивались отцентрировать блок

Горизонтальное выравнивание:
*все делает margin:0 auto;

.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

Этот способ работает для всех блочных элементов, для строчных необходимо добавить еще одно свойсво: display:block;

Изменить кнопку загрузки файла

Все просто, никакого JS, просто меняем стили (ну не совсем просто, если вы оказались на этой странице). Если все сделать правильно, кнопка загрузки файлов больше не будет такой ущербной. По примеру можно сделать ее и в своем стиле.

HTML

<div class="container upload">    <span class="btn">Добавить файл</span>    <input type="file"/></div>    ​

..и немного стилей:
CSS

.container {
width:300px;
margin:50px auto 0;
height:80px;
}
.upload {
position:relative;
}
.upload > input[type=file] {
display:block;
width:100%;
height:100%;
opacity:0;
}
.upload > .btn {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#efefef;
color:#555;
border:solid 1px #ddd;
border-radius:4px;
text-align:center;
font-size:2em;
line-height: 80px;
z-index:0;
}
.upload:hover > .btn {
background:#f7f7f7;
color:#333;
}
.upload:active > .btn {
background:#efefef;
color:#333;
margin-top:1px;
} ​

Вот и все! до невозможности просто)
Посмотреть как это выглядит можно здесь 

Приложение для iOS на HTML+CSS+JS с помощью PhoneGap

Всем доброго времени суток.

Сегодня мы будем создавать мобильное приложение для iOS в обход Objective C, но при этом у нас будет доступ к API и всем прелестям PhoneGap.

Скажу сразу, что для разработки нам понадобится Mac OS X. Если покупать Mac не очень хочется, то можно использовать виртуальную машину, которой я уделю отдельное внимание.

Далее я расскажу как установить и настроить инструменты и среду для разработки приложений для iOS с помощью PhoneGap.

Сброс CSS-стилей

Клавиша F5 и Refresh в браузере - это, наверное, самые затертые кнопки у всякого верстальщика. Жаль что в браузере этого не видно :)

Большая часть работы верстальщика заключается во внесении изменений в стили и проверки их отображения в браузерах. С опытом приходит понимание принципов работы HTML+CSS и количество рефрешей уменьшается. А совсем опытные видят матрицу и браузеров вообще не открывают.

Сегодня у нас обзор методов ручного и автоматического обновления CSS без полной перезагрузки страницы.

Приложение для Android на HTML+CSS+JS с помощью PhoneGap

Всем доброго времени суток.

Многим из нас хотелось бы написать приложение для мобильного устройства, но учить Java или Objective C хочется далеко не всем. Теперь этот вопрос решается намного проще. PhoneGap — именно так называется библиотека для превращения веб-сайта в самое настоящее приложение для мобильного устройства, будь то iOS устройство, Android, Symbian, BlackBerry OS, Palm OS или Windows Mobile. Приложение на PhoneGap может использовать функции телефона, к примеру звонить или получать снимки с камеры.

В этой статье я расскажу как настроить среду для разработки и сделать простейшее приложение с использованием PhoneGap.

Использование Gravatar в форме авторизации

Граватар —  глобально распознаваемый аватар. сервис, позволяющий интернет-пользователям хранить свой аватар на специальном сервере. Пользователь регистрируется на центральном сервере и сохраняет там свой аватар и адрес электронной почты. Когда он оставляет комментарий на сайте или блоге, поддерживающим Gravatar, и указывает свой адрес электронной почты, на стороне сайта вычисляется md5 хэш от почтового адреса и отправляется на сервер Gravatar, в ответ возвращается аватар пользователя. Таким образом система Gravatar позволяет использовать аватары без регистрации на сайте или блоге.

Я разработал простое и интересно окно авторизации с помощью граватара. Инджой!

Самые простые техники адаптивной верстки

Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.

1. Видео

Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:

<div class="video"> 

<iframe src="http://player.vimeo.com/video/6929537"frameborder="0"></iframe>

</div>

.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

2. Максимальная и минимальная ширина

Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div'а — 800 пикселей при возможности, но не более 90% ширины:

.container { width: 800px; max-width: 90%; }

Так же можно масштабировать изображение:

img { max-width: 100%; height: auto; }

Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:

@media \0screen { img { width: auto; /* for ie 8 */ } }

Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:

3. Относительные значения

Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Ниже представлены примеры.

Относительный margin

Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Как видно из скриншота, второй способ гораздо читабельнее:

Относительный размер шрифта

При использовании относительных значений (em или %) шрифта наследуются также относительные значения межстрочного пространства и отступов:

Относительный padding

На скриншоте ниже хорошо видно преимущества относительных значений padding перед абсолютными:

4. Трюк с overflow:hidden

Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow:hidden, что бывает очень полезно в адаптивной разметке.

5. Перенос слов

При помощи CSS можно переносить непереносимые текстовые конструкции:

.break-word { word-wrap: break-word; }