Базовые CSS-стили различных элементов

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

За основу взята статья Basic Ready-to-Use CSS Styles (много букв на английском 😉 ).

Демонстрация  Скачать исходники

Содержание



Базовая конструкция

В примерах базовая конструкция блока выглядит так:

Тени

Блок отбрасывает тень в разные стороны:

Выделение блока тенью:

Выпуклые блоки:

Градиенты

Разные типы градиентов:

Закругленные углы

Ссылки

Базовая конструкция:

Несколько примеров стилей для ссылки в тексте:

Ссылка в Metro-стиле:

Ссылка с обводкой:

Красивые кнопочки:

Ввод

Основная конструкция:

Добавляет border-radius по клику:

Повторяет iOS ввод:

С градиентом:

Вместо формы ввода просто линия:


Оставить комментарий