Создание скроллбара как у Gmail

Сегодня мы рассмотрим небольшой пример оформления скроллбара для браузеров на движке WebKit (Chrome, Safari).

Сразу хочу сказать, что я не сторонник изменения внешнего вида скролла, всё-таки это стандартный элемент управления и большинство пользователей привыкли к его виду. Злоупотребление возможностью его изменения может усложнить работу с сайтом.

Тем не менее, в некоторых случаях создание собственного дизайна для скроллбара полностью оправдано. Возьмем в качестве примера структуру страницы Gmail.

Видите, скроллбар находится внутри страницы, т.е. логично, что его внешний вид должен соответствовать дизайну всей страницы. Ведь во многих случаях в web интерфейсах используется нестандартное оформление кнопок, чекбоксов, ползунков и других элементов управления.

CSS: оформление скроллбара в стиле Gmail

Единственное жалко, что только для WebKit, а так хорошая вещь. 

Читать далее »

Удиви друзей при помощи impress.js

Никогда не были на сайте prezi.com? Попробуйте, при помощи него можно создавать прикольные презентации. Глядя на этот сайт у авторов impress.js появилась идея сделать такое же, но только при помощи JS+CSS3. Результат можно посмотреть тут. Довольно впечатляюще :)

Пока что данная библиотека разработана с заточкой под webkit браузеры (Chrome, Safari), но презентация также должна заработать в браузерах с поддержкой CSS3 3D transforms and transitions (Firefox, IE10).

Если браузер не соответствует требованиям, то к элементу #impress добавляется класс impress-not-supported, чтобы можно было сделать обработчик ошибки. 

Скачать можно отсюда https://github.com/bartaz/impress.js

Читать далее »

Новая спецификация HTML5

imageРанее в этом году WHATWG выпустили издание для веб-разработчиков из спецификации HTML5. Теперь, чтобы не отстать, HTML Working Group W3C опубликовали проект с более читабельной спецификацией HTML5: Edition for Web Authors
W3C версия написана более технически, чем версия WHATWG, но по крайней мере вы можете прочитать HTML5 спецификацию без заметок о соответствии критериям браузеров.

W3C опубликовала спецификацию HTML5 для веб-разработчиков 

Алилуя!

Читать далее »

18 регулярных выражений для валидации

  • Номер кредитки:
    [0-9]{13,16}
  • ICQ:
    ([1-9])+(?:-?\d){4,}
  • Набор из букв и цифр (латиница):
    ^[a-zA-Z0-9]+$
  • Набор из букв и цифр (латиница + кириллица):
    ^[а-яА-ЯёЁa-zA-Z0-9]+$
  • Домен (например abcd.com):
    ^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$
  • IPv4: (подкорректировано runcore)
    ((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)
  • IPv6:
    ((^|:)([0-9a-fA-F]{0,4})){1,8}$
  • Имя пользователя (с ограничением 2-20 символов, которыми могут быть буквы и цифры, но первый символ обязательно буква):
    ((^|:)([0-9a-fA-F]{0,4})){1,8}$
  • Пароль (Строчные и прописные латинские буквы, цифры):
    ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$
  • Пароль (Строчные и прописные латинские буквы, цифры, спецсимволы. Минимум 8 символов):
    (?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$
  • Дата в формате YYYY-MM-DD:
    [0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01]) 
    Более строгая проверка, предложенная runcore:
    (19|20)\d\d-((0[1-9]|1[012])-(0[1-9]|[12]\d)|(0[13-9]|1[012])-30|(0[13578]|1[02])-31)
  • Дата в формате DD/MM/YYYY:
    (0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d
  • Целые числа и числа с плавающей точкой (разделитель точка):
    \-?\d+(\.\d{0,})?
  • UUID:
    ^[0-9A-Fa-f]{8}\-[0-9A-Fa-f]{4}\-[0-9A-Fa-f]{4}\-[0-9A-Fa-f]{4}\-[0-9A-Fa-f]{12}$
  • Широта или долгота:
    -?\d{1,3}\.\d+ 
  • E-mail (от kvf77):
    ^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$
  • URL на латинице. Если нужно распознавать и кириллические домены, необходимо изменить все «a-z0-9» на «а-яёa-z0-9» и добавить в список доменных зон «рф» (от kvf77):
    ~^(?:(?:https?|ftp|telnet)://(?:[a-z0-9_-]{1,32}(?::[a-z0-9_-]{1,32})?@)?)?(?:(?:[a-z0-9-]{1,128}\.)+(?:ru|su|com|net|org|mil|edu|arpa|gov|biz|info|aero|inc|name|[a-z]{2})|(?!0)(?:(?!0[^.]|255)[0-9]{1,3}\.){3}(?!0|255)[0-9]{1,3})(?:/[a-z0-9.,_@%&?+=\~/-]*)?(?:#[^ '\"&]*)?$~i
  • Время в формате HH:MM:SS (от runcore):
    ^([0-1]\d|2[0-3])(:[0-5]\d){2}$
Читать далее »

Про псевдоклассы

Нашел в интернете:

  • :link — отвечает за стили непосещенной ссылки;
  • :hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;
  • :active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);
  • :visited — состояние посещенной ссылки;
  • :focus — когда вы используете какой-то объект на страницы, то на нем устанавливается фокус (в случае и текстовым поле это постановка курсора в это поле);
  • :first-child — первый дочерний элемент текущего элемента;
  • :last-child — соответственно, последний дочерний элемент чего-то;
  • :only-child — применяет стиль к элементу, если он единственный дочерний элемент;
  • :nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);
  • :nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);

Псевдоклассы в CSS 

Временно.нет радует.

Читать далее »

7 полезных CSS и HTML сниппетов.

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

CSS Reset

Eric Meyer CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
Читать далее »

Немного о приоритете CSS правил

Часто при верстке бывают ситуации, когда надо знать какое именно CSS правило имеет больший приоритет нежели другое. Такое часто бывает, когда надо написать правило, которое бы перебило уже написанное. 

Итак, что нужно знать: приоритет правил определяет так называемое специфичность. Ее можно определить четырьмя цифрами. Например 0.0.1.3. Как их определить? Очень просто. 

  • Каждое название элемента имеет вес 0.0.0.1
  • Каждый класс, псевдо-класс, аттрибут имеет вес 0.0.1.0
  • Каждый id имеет вес 0.1.0.0
  • Правило, написанное непосредственно в коде элемента имеет вес 1.0.0.0

Приведем несколько примеров:

div ul ul li - 0.0.0.4 Четыре элемента

div.aside ul li - 0.0.1.3 Один класс и три элемента

a:hover - 0.0.1.1  Один элемент и один псевдо-класс

div.navlinks a:hover - 0.0.2.2  Класс, псевдо-класс и два элемента

#title em - 0.1.0.1 Идентификатор и элемент

h1#title em Идентификатор и два элемента 

Единичка в идентификаторе имеет больший вес, чем 100 в классах или элементах. Если числа на одном уровне равны, то переходим на уровень ниже и там определяем, какое из правил применить. Если все числа на всех уровнях равны, то действует то правило, которые написано позднее. 

Теперь про !important. Это слово означает, что специфичность перестает действовать на данное правило. Оно будет применено в любом случае. Более интересный момент когда два правила помечены этим ключевым словом. Тогда специфичность опять начинает иметь значение. 

В общем это все что надо знать о приоритете правил CSS. Надеюсь материал был для вас полезен. 

Читать далее »

Корректное отображение inline-block

Продолжаю читать Хабр. 

Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

Источник

Код для себя:

    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
 
  • This is awesome

    lobster
  • Читать далее »

    Про принцип цикады

    Нашел на Хабре:

    Пару недель назад мы рассматривали, как делать бесшовную заливку (тайлинг). Это суперполезная вещь, но бывает трудно соблюсти правильный баланс.

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

    Может быть, можно позаимствовать какие-то идеи у цикад, чтобы сломать этот паттерн?

    Источник

    Одна из лучших статей, что я читал на Хабре. Математика - царица наук. 

    Читать далее »
    Scroll To Top