Архив Категории ‘HTML/CSS’

Оформление стиля подсказок с помощью CSS3

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

Генератор кнопок CSS3 c поддержкой линейного градиента

Генератор кнопок CSS3 c поддержкой линейного градиента

Здравствуйте Всем!
В свете последних изменений в стане интернет-браузеров, в частности умопомрачительной скорости выхода все новых и новых версий, появилась необходимость выпуска новой редакции Генератора кнопок CSS3. Так разработчики горячо мной любимой Opera наконец таки дошли до понимания чаяний всех страждущих и включили в новые версии своего детища полную поддержку функции линейного градиента. Долго раскачивались ребята, но на то они и "скандинавские пацаны". Главное, что теперь можно в полной мере испытать всю прелесть магии CSS3.

Чистый стиль меню с помощью CSS3

Чистый стиль меню с помощью CSS3

Всем снова здравствуйте!
В своих статьях, я не раз обращался к различным способам создания навигационных меню для сайтов. Рассматривались менюшки на любой вкус и цвет, навигация в популярном стиле "Аккордеон", горизонтальные и вертикальные, с использованием javascript и картинок, не мало внимания уделялось многоуровневым меню с jQuery. Как вы понимаете способы создания меню ограничены лишь фантазией разработчиков, а она у них воистину безгранична.
Сегодня мне хотелось бы рассказать и показать на примере еще один чистый стиль исполнения меню с использованием только волшебных свойств CSS3, без каких бы то ни было изображений и дополнительных javascript. В дизайне меню мы будем использовать закругленные углы, градиент фона и простые эффекты при наведении курсора. Все это вместе работает достаточно хорошо и стабильно, конечно только в современных браузерах, которые поддерживают CSS3, даже новые версии замшелого IE, со скрипом, но все же отображают конечный результат.

Обзор действительно полезных инструментов для разработчиков CSS

Обзор действительно полезных инструментов для разработчиков CSS

Всем доброго дня или ночи.
Независимо от размера и масштаба проекта, css-верстка всегда является процессом не только интересным и увлекательным, но и ко всему прочему, довольно таки утомительным, и занимает уйму времени. Даже если вы опытный веб-разработчик, разговаривающий на ты с таблицами каскадных стилей (CSS), в совершенстве владеющий магией CSS, то и в этом случае, вам не помешает иметь в своей обойме, набор хороших инструментов, который может существенно повысить производительность, да и просто избавить вас от рутинной работы.
В своих статьях, я рассказывал о некоторых онлайн-инструментах, отдельно и подробнейшим образом поведал в свое время, о довольно простом и совершенно бесплатном веб-генераторе CSS3, с контролем над базовыми атрибутами CSS3. Но этого мало по определению, на просторах интернета создаются и плодотворно работают множество полезнейших ресурсов, призванных облегчить "не легкий" труд веб-разработчиков всех мастей.

Модальное окно с полосой прокрутки

Здравствуйте друзья!
В последнее время у читателей блога проявился повышенный интерес к созданию и расширению функционала Модальных окон. Совсем недавно я попытался подробно рассказать, как встроить в модальное окно ротатор контента (текста), надеюсь у меня это получилось.
Сегодня один из посетителей блога заметил такую особенность, что если добавить в модальное окно слишком много текста, то оно вытягивается по длине и невозможно прокрутить вверх, чтобы посмотреть весь текст целиком, да и кнопка закрытия при этом скрывается за пределы видимости, что само собой уже ни есть хорошо. Конечно модальное окно прекрасно закрывается кликом в любом месте страницы, но как правильно заметил Роман(от его коммента и пляшем),  не все посетители сайта с этим могут справиться.... Соответственно у читателя возник вопрос, как добавить в данное модальное окно полосу прокрутки?

Ротатор контента в модальном окне

Здравствуйте всем!
Написать эту статью навел меня на мысль один комментарий к записи о создании Модального окна. В своем комменте читатель задает вопрос, а можно ли интегрировать(вставить) внутрь модального окна какой нибудь слайдер и именно не для фотографий, а для текстового контента, что то типа новостной ленты.
Меня эта идея заинтересовала и я стал искать решение, идея конечно не нова, но что нибудь стоящее мне на глаза не попалось. Тогда я решил найти простой в исполнении слайдер или ротатор и объединить с уже готовым "модальным окном". Побродив по просторам интернета, у буржуинов отыскался подходящий по всем параметрам, простенький ротатор контента. Скачав исходники, выдернув только все самое нужное, javascript и структуру блока ротатора, на удивление легко подкрутил все это к модальному окну. Для разнообразия и дабы проверить возможности всей конструкции вставил в прокручиваемый контент не большое изображение, все заработало в лучшем виде.