Вертикальное меню с помощью CSS3

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

CSS3 кнопки. 4 варианта анимированных кнопок

Сегодня на блоге RusDigi перевод очень интересного мануала по кнопкам на CSS. Материал взят с сайта codrops и представляет из себя результат экспериментов с кнопками...
Сегодня на блоге RusDigi перевод очень интересного мануала по кнопкам на CSS. Материал взят с сайта codrops и представляет из себя результат экспериментов с кнопками и CSS стилями. В первую очередь интересны эффекты анимации применяемые в этих кнопках. Те кнопки, создание которых мы сегодня разберем можно использовать в коммерческих проектах. Они достаточно нестандартны и хорошо выглядят и поэтому будут привлекать внимание посетителей. Иконки, используемые в примерах взяты с сайта http://www.webiconset.com/, а используемый шрифт от студии Just Be Nice. (далее…)

CSS для начинающих: CSS кнопки — 4 интересных примера

Сегодня не будет сложных свойств CSS, о которых в последнее время я писал. Сегодня мы вернемся к самому простому. Мы создадим 4 кнопки с разными...
Сегодня не будет сложных свойств CSS, о которых в последнее время я писал. Сегодня мы вернемся к самому простому. Мы создадим 4 кнопки с разными уникальными эффектами при наведении. Суть сегодняшней статьи - показать основные приемы работы с CSS. И эта статья будет скорее полезна новичкам нежели профессионалам. Каждый может использовать эти кнопки в своих проектах, но не ленитесь экспериментировать и создавать новые эффекты. (далее…)

Эффекты при наведении для изображений с использованием CSS3

Новые свойства CSS3 позволяют делать очень много всего интересного. Сегодня мы рассмотрим несколько примеров, в котором создадим 10 разных эффектов при наведении курсора мыши на...
Новые свойства CSS3 позволяют делать очень много всего интересного. Сегодня мы рассмотрим несколько примеров, в котором создадим 10 разных эффектов при наведении курсора мыши на изображение. Мы будем показывать поверх изображения описание. Следует учесть, что данный эффект будет работать только в современных браузерах, которые поддерживают нововведения CSS3. (далее…)

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

В этом небольшом мануале рассмотрим как быстро и легко сменить цвет выделения текста в современных браузерах с помощью CSS3. Под выделение текста мы подразумеваем выделение...
В этом небольшом мануале рассмотрим как быстро и легко сменить цвет выделения текста в современных браузерах с помощью CSS3. Под выделение текста мы подразумеваем выделение текста с помощью курсора мыши на текущей странице в браузере. Разные браузеры по разному выделяют текст. К примеру, в Google Chrome, которым я пользуюсь, при выделении текст становиться белым, а фон голубым. Давайте посмотрим, как изменить эти цвета. (далее…)

3D аккордеон на CSS3

Меню с использование аккордеона стали очень популярны с появлением Web 2.0. Основная задача таких меню повысить юзабилити сайтов, на которых они применяются. Это особенно важно...
Меню с использование аккордеона стали очень популярны с появлением Web 2.0. Основная задача таких меню повысить юзабилити сайтов, на которых они применяются. Это особенно важно когда осуществляется создание корпоративного сайта. Суть аккордеона в том, что вы получаете доступ сразу к большому количеству информации, но при этом сильно экономится пространство на сайте. Готовых вариантов масса. Вот к примеру один, который я приводил в обучающей статье по jQuery. (далее…)

Создание слайд меню с использованием псевдо-селекторов и CSS3

Сегодня мы будем разбираться с псевдо-селекторами, а заодно создадим довольно интересное слайд меню. Для начала мы создадим меню используя техники CSS3. Потом мы реализуем то...
Сегодня мы будем разбираться с псевдо-селекторами, а заодно создадим довольно интересное слайд меню. Для начала мы создадим меню используя техники CSS3. Потом мы реализуем то же самое без использования псевдо-селекторов, дабы пример был кроссбраузерным. И в самом конце мы заменим все новые штучки из CSS3 на старый добрый jQuery. (далее…)

12 эффектов с использованием text-shadow

С типографикой на сайте можно экспериментировать бесконечное количество раз. Одним из инструментов, который помогает это делать является свойство CSS3 text-shadow. На первый взгляд свойство text-shadow...
С типографикой на сайте можно экспериментировать бесконечное количество раз. Одним из инструментов, который помогает это делать является свойство CSS3 text-shadow. На первый взгляд свойство text-shadow достаточно простое, но при должном внимании и сообразительности можно добиться потрясающих эффектов. Сегодня я хочу вам показать несколько таких примеров, которые вы легко сможете использовать в своих проектах. (далее…)

Текст и CSS3: примеры эффектов с использованием text-shadow

Типографика - это то, с чем любят играться многие дизайнеры и веб-разработчики. С появлением свойства text-shadow в CSS3 с его помощью стали заменять эффект наложения...
Типографика - это то, с чем любят играться многие дизайнеры и веб-разработчики. С появлением свойства text-shadow в CSS3 с его помощью стали заменять эффект наложения тени в Photoshop. При чем тень в Photoshop использовалась по большей части для выделения определенного текста из общей массы. Свойство text-shadow позволяет нам делать более интересные вещи с текстом, а именно создавать определенные эффекты. Часть таких эффектов с текстом в CSS3 мы разбирали в предыдущих статьях: 7 простых эффектов для текста с использованием CSS3, Текст в CSS3 и 3D текст с помощью CSS. Сегодня мы добавим к этой коллекции еще несколько готовых эффектов, которые вы...

Создаем красивую иконку с помощью CSS3

В этой статье расскажу вам об интересном трюке. Мы создадим иконку для документа с помощью чистого CSS3. Так же плюсом данного метода будет являться то,...
В этой статье расскажу вам об интересном трюке. Мы создадим иконку для документа с помощью чистого CSS3. Так же плюсом данного метода будет являться то, что мы будем использовать всего один HTML элемент. Вот порядок наших действий: мы создадим прямоугольник, закруглим углы, используем псевдо-элементы для создания загнутого уголка, создадим видимость текста с помощью градиента на CSS3. (далее…)