Дорогие друзья, сегодня хотел бы показать вам, как можно украсить ваши ссылки в меню или в тексте. Я говорю о трансформации ссылок. Многие могут подумать, что для достижения такого эффекта нужно использовать JavaScript. Однако все намного проще. Мы будем использовать только таблицы каскадных стилей CSS3. Правда 3 версии. Работать этот эффект будет во всех последних браузерах, поддерживающих стандарт CSS3. Старые браузеры, такие как забытый всеми IE6 будет вместо трансформации ссылок подсвечивать фон в прямоугольной области. Итак, сам эффект.
Стилизация элементов ввода является обычной задачей для веб-разработчиков. Для того, чтобы значительно улучшить внешний вид элементов ввода можно использовать, например, стилизованные под элементы ввода изображения в качестве фона. На изображениях легко добавлять цвет, градиент, углы с плавными радиусами, тени и т.д. Все это хорошо, но все же, загрузка изображений это какой-никакой трафик, и благодаря тому что CSS3 теперь значительно расширяет возможности управления стилями для элементов, мы можем заменить изображения на чистый CSS.
Дорогие друзья, сегодня поговорим о том, какие приёмы нужно использовать в своей работе над кодом, чтобы он был легко читаемым и выглядел более профессиональным. Я также как и большинство разработчиков не работаю над проектом в одиночку, а работаю в команде. Мне приходиться много работать над кодом HTML, CSS и JQUERY, и я стараюсь сделать весь этот код более профессиональным. Я понимаю, что в команде мой код кроме меня могут использовать и другие разработчики, а также те, кто будет в дальнейшем поддерживать проект или развивать его. Мне и самому приходиться нередко просматривать чужой код, и иногда этот код бывает очень трудно понять. Когда разработчик не стремиться писать свой код правильно, он усложняет жизнь не только себе но и другим. Через некоторое время разобраться в коде бывает сложно даже ему самому. Конечно это не значит, что сам код не является эффективным или ошибочным. Нет. Но для того, чтобы понять как он функционирует нужно порой затрачивать много времени. Все мы так или иначе испытываем катастрофическую нехватку времени, но это не должно служить причиной написания плохого кода.
Я уверен, что клиент должен получать сайт не только хорошо сделанный визуально, но и с хорошо читаемым и правильным кодом. В дальнейшем это облегчит жизнь другим разработчикам. Итак, посмотрим, что же можно сделать для этого.
Дорогие друзья, сегодня хочу показать Вам интересный эффект, который можно применить в своей работе. Сам эффект описан на многих сайтах. Привожу его здесь, просто что бы напомнить, как легко можно выполнить такую анимацию. Анимацию в этом эффекте создаёт 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
