Дорогие друзья, сегодня хотел бы обратить внимание на некоторые моменты работы со стилями. Все вы наверное часто сталкиваетесь с таблицами каскадных стилей или CSS. Чтобы успешно работать с CSS нужна практика и знание некоторых особенностей поведения браузеров. Из-за того, что разные браузеры отображают вашу страничку по разному, вы должны сделать так, что бы она выглядела одинаково во всех браузерах. Сегодня я и хотел бы вспомнить некоторые хитрости при работе с CSS. Наверное многие из вас уже знают о них, а кому то эта информация будет полезной. Как всегда, если у вас есть что добавить, вы можете свободно писать об этом в комментариях. читать далее про приемы и хитрости при работе с CSS
Дорогие друзья, сегодня хотел бы показать вам, как можно украсить ваши ссылки в меню или в тексте. Я говорю о трансформации ссылок. Многие могут подумать, что для достижения такого эффекта нужно использовать JavaScript. Однако все намного проще. Мы будем использовать только таблицы каскадных стилей CSS3. Правда 3 версии. Работать этот эффект будет во всех последних браузерах, поддерживающих стандарт CSS3. Старые браузеры, такие как забытый всеми IE6 будет вместо трансформации ссылок подсвечивать фон в прямоугольной области. Итак, сам эффект.
Стилизация элементов ввода является обычной задачей для веб-разработчиков. Для того, чтобы значительно улучшить внешний вид элементов ввода можно использовать, например, стилизованные под элементы ввода изображения в качестве фона. На изображениях легко добавлять цвет, градиент, углы с плавными радиусами, тени и т.д. Все это хорошо, но все же, загрузка изображений это какой-никакой трафик, и благодаря тому что CSS3 теперь значительно расширяет возможности управления стилями для элементов, мы можем заменить изображения на чистый CSS.
Дорогие друзья, сегодня хочу показать Вам интересный эффект, который можно применить в своей работе. Сам эффект описан на многих сайтах. Привожу его здесь, просто что бы напомнить, как легко можно выполнить такую анимацию. Анимацию в этом эффекте создаёт jquery. Вот как это выглядит:
В наши дни необычайно широко используются списки HTML (<ol> для упорядоченного списка, <ul> для неупорядоченного списка). Однако эти простые списки можно стилизовать, что бы улучшить восприятие или вписать их в дизайн. Ниже приведены 8 простых стилей для списков HTML, использующих только CSS. Применение CSS техник позволит создать вместо скучного списка потрясающий элемент дизайна, а иногда и добавить ему некоторой функциональности.
Если Вы позиционируете себя как вэб разработчик, то вы должны знать как важно создавать кросс браузерный, CSS и xHTML валидный код. Все эти приёмы хорошо описаны и многие скажут, что ничего нового я не открыл. Просто хотел освежить в голове и поделиться с тем, кто может быть этого ещё не знает. Повторение, как говорят, позволяет лучше запомнить. Обычно тратиться много времени на все эти хаки и фиксы для различных браузеров и их достаточно много. А здесь, я хочу привести лишь некоторые важные моменты при создании файла стилей, полезные хитрости CSS.
узнать больше хитростей css
С увеличением числа устройств, отображающих информацию, в CSS было введено такое понятие как тип носителя. Большинство разработчиков используют несколько файлов для связки CSS, предназначенных для разных типов носителей, таких как screen, print, или handheld. Эти фалы затем связывают либо через элементы ссылок с media атрибутом или через объявление @import с одним или более определением типа носителя.
Коснёмся немного основ новых свойств : text-shadow, box-shadow, и border-radius. Эти свойства CSS3 обычно используются для улучшения формата, как правило чтобы создать тень или закруглённые углы, и очень хорошо если Вы знаете их и используете.
Недавно, проводя исследования совершенно не имеющие отношения к теме, я наткнулся на прекрасные иллюстрации Rype Arts, которые отображались внутри JavaScript переключателя, явно работающего на JavaScript. По некоторой причине, так случилось что я посетил станицу с настройками, которые запрещали исполнение JavaScript и я обнаружил, что переключатель слайдов всё равно продолжал работать (хотя и с некоторыми недостатками).
Создавая новую веб страницу, зачастую разработчик начинает писать документ со стилями заново. В лучшем случае, он пытается собрать воедино какие то куски кода скопированные из разных источников. Чтобы исправить подобную ситуацию, можно воспользоваться неким шаблоном, базовым документом CSS. Именно такой базовый документ я и хочу вам предложить. Этот документ описывает основные элементы, которые вероятно будут у вас на странице. Вы можете свободно дополнять или изменять правила для них. Также можете добавлять и свои собственные. Большим плюсом такого шаблона состоит в том, что вы не забудете назначить правила для базовых элементов. К тому же для верстки вы можете использовать готовые правила. Так вам будет легче форматировать вашу страницу.
открыть базовый документ CSS
