Горизонтальное меню CSS3 мутный текст
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, CSS3, Мутный текст Дата: 7-09-2012, 18:43
Эффект мутного текста на CSS3 в горизонтальной навигации
Иногда пользователи задают вопросы - как реализовать мутный текст без применения картинок и скриптов.
Да очень просто, с помощью CSS3 свойств: тень text-shadow и полупрозрачного цвета rgba.
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Иногда пользователи задают вопросы - как реализовать мутный текст без применения картинок и скриптов.
Да очень просто, с помощью CSS3 свойств: тень text-shadow и полупрозрачного цвета rgba.
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Текст с тенью css3 text-shadow примеры
CSS3 text-shadow 40 примеров текста с тенью
Как только современные браузеры начали боле менее корректно поддерживать свойство text-shadow тень текста на css3 - сразу же интерес к этому свойству вырос многократно. Достигаемый эффект действительно очень стильный, разнообразие теней ограничивается лишь фантазией веб мастера.
Пришло время и мне выложить свою "коллекцию" теней.
CSS3 свойство text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно текста и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter(определяет стиль первого символа в тексте элемента, к которому добавляется) и :first-line(задает стиль первой строки форматированного текста).
Opera 9.5 поддерживает не более шести теней. Позже, это ограничение было снято. Обратите внимание, что опера окрашивает тени в неправильном порядке. Это было исправлено в Opera 10.5. Opera поддерживает максимум 6-9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5-10 использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются. В версии 4.0 работает уже множество теней.
Браузер Internet Explorer ни в одной версии не понимает свойство text-shadow. Взамен используется свойство filter: Shadow(параметры). К примеру, следующая конструкция {filter: Shadow(Color=#666666, Direction=45, Strength=4);} задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).
Как только современные браузеры начали боле менее корректно поддерживать свойство text-shadow тень текста на css3 - сразу же интерес к этому свойству вырос многократно. Достигаемый эффект действительно очень стильный, разнообразие теней ограничивается лишь фантазией веб мастера.
Пришло время и мне выложить свою "коллекцию" теней.
CSS3 свойство text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно текста и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter(определяет стиль первого символа в тексте элемента, к которому добавляется) и :first-line(задает стиль первой строки форматированного текста).
Opera 9.5 поддерживает не более шести теней. Позже, это ограничение было снято. Обратите внимание, что опера окрашивает тени в неправильном порядке. Это было исправлено в Opera 10.5. Opera поддерживает максимум 6-9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5-10 использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются. В версии 4.0 работает уже множество теней.
Браузер Internet Explorer ни в одной версии не понимает свойство text-shadow. Взамен используется свойство filter: Shadow(параметры). К примеру, следующая конструкция {filter: Shadow(Color=#666666, Direction=45, Strength=4);} задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).
CSS3 горизонтальное выпадающее меню в стиле web 2.0
Стильная CSS3 горизонтальная выпадающая навигация в стиле web 2.0
Представляю вашему вниманию замечательный пример реализации горизонтального выпадающего меню чисто на css.
Эффект плавного выпадания меню реализован при помощи css3 свойств transition и opacity, градиентная заливка ссылок категорий реализована css3 свойством gradient, тень текста свойством text-shadow никаких картинок нет, всё только на css.
Представляю вашему вниманию замечательный пример реализации горизонтального выпадающего меню чисто на css.
Эффект плавного выпадания меню реализован при помощи css3 свойств transition и opacity, градиентная заливка ссылок категорий реализована css3 свойством gradient, тень текста свойством text-shadow никаких картинок нет, всё только на css.
CSS3 увеличение картинки при наведении
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, CSS3, увеличение картинки Дата: 3-06-2011, 16:46
CSS3 увеличение картинки при наведении горизонтальная css3 навигация из иконок
Всегда и по сей день было и есть стильно модно и эффектно использовать на сайте плавное увеличение картинки при наведении.
Раньше это можно было реализовать только с помощью яваскрипта, но теперь это можно сделать очень легко и просто с помощью CSS3 и свойства transition(CSS Transition позволяет назначать изменения свойств CSS плавно и в течение некоторого времени, такая css3 анимация). Подробнее можно посмотреть тут Обзор основных CSS3 свойств
Рассмотрим два примера горизонтальной навигации из иконок которые будут плавно увеличиваться при наведении курсора мыши.
В первом примере блок с иконками навигации не растягивается - увеличивающаяся иконка располагается поверх блока.
Второй пример - простое увеличение картинки с растягиванием блока с иконками.
Всегда и по сей день было и есть стильно модно и эффектно использовать на сайте плавное увеличение картинки при наведении.
Раньше это можно было реализовать только с помощью яваскрипта, но теперь это можно сделать очень легко и просто с помощью CSS3 и свойства transition(CSS Transition позволяет назначать изменения свойств CSS плавно и в течение некоторого времени, такая css3 анимация). Подробнее можно посмотреть тут Обзор основных CSS3 свойств
Рассмотрим два примера горизонтальной навигации из иконок которые будут плавно увеличиваться при наведении курсора мыши.
В первом примере блок с иконками навигации не растягивается - увеличивающаяся иконка располагается поверх блока.
Второй пример - простое увеличение картинки с растягиванием блока с иконками.
Как правильно регистрировать сайт или история MegaWeb.su
Как правильно регистрировать сайт, как не потерять свой домен!
Меня всегда интересовала тема интернета, создания сайтов и мне хотелось сделать свой сайт самостоятельно, но в нашем городе были такие скорости интернета, что о своём сайте можно было только мечтать. И вот два года назад я решился всё-таки сделать свой сайт самостоятельно. Начал плотно изучать всю эту "кухню" - занялся изучением HTML и CSS, изучать хостинги, движки и т.д. Самое сложное для меня было это выбрать движок для моего будущего сайта. Поверхностно изучив самые популярные бесплатные движки я пришёл к выводу, что это не моё, мне они не подходят, ни один бесплатный движок мне не понравился. Так же изучив поверхностно самые популярные платные движки я нашёл для себя идеальный вариант, золотую середину, идеальное для меня сочетание цены, качества и функционала это DLE - гибкий движок-конструктор. Нельзя сказать что это самый лучший движок на свете, есть и там свои косяки, но в умелых руках это очень хороший движок для любого сайта или блога, чего угодно.
Меня всегда интересовала тема интернета, создания сайтов и мне хотелось сделать свой сайт самостоятельно, но в нашем городе были такие скорости интернета, что о своём сайте можно было только мечтать. И вот два года назад я решился всё-таки сделать свой сайт самостоятельно. Начал плотно изучать всю эту "кухню" - занялся изучением HTML и CSS, изучать хостинги, движки и т.д. Самое сложное для меня было это выбрать движок для моего будущего сайта. Поверхностно изучив самые популярные бесплатные движки я пришёл к выводу, что это не моё, мне они не подходят, ни один бесплатный движок мне не понравился. Так же изучив поверхностно самые популярные платные движки я нашёл для себя идеальный вариант, золотую середину, идеальное для меня сочетание цены, качества и функционала это DLE - гибкий движок-конструктор. Нельзя сказать что это самый лучший движок на свете, есть и там свои косяки, но в умелых руках это очень хороший движок для любого сайта или блога, чего угодно.
Стильные табы вкладки на CSS и jQuery v1.6.1
Как сделать табы вкладки на CSS и jQuery v1.6.1
Представляю вашему вниманию удобные Вкладки Табы с использованием CSS и jQuery.
Библиотеку jQuery подключаем с Хостинга javascript-библиотек от Яндекса.
Сервис Хостинг javascript-библиотек предоставляет разработчикам сайтов доступ к сети распространения контента (CDN) Яндекса и позволяет загружать с серверов Яндекса различные javascript-фреймворки и библиотеки с открытым исходным кодом.
Представляю вашему вниманию удобные Вкладки Табы с использованием CSS и jQuery.
Библиотеку jQuery подключаем с Хостинга javascript-библиотек от Яндекса.
Сервис Хостинг javascript-библиотек предоставляет разработчикам сайтов доступ к сети распространения контента (CDN) Яндекса и позволяет загружать с серверов Яндекса различные javascript-фреймворки и библиотеки с открытым исходным кодом.
Слайдер описание картинки при наведении на CSS3
Стильный слайдер полупрозрачное описание картинки при наведении на CSS3
Очень красивый эффект плавного появления полупрозрачного и непрозрачного описания картинки при наведении. Привожу шесть примеров появления такого описания.
Реализация не простая новичку не обьяснить,а опытный и так поймёт.
Очень красивый эффект плавного появления полупрозрачного и непрозрачного описания картинки при наведении. Привожу шесть примеров появления такого описания.
Реализация не простая новичку не обьяснить,а опытный и так поймёт.