CSS3

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

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

08 Февраль, 2012 | Рубрики: CSS3 Читать статью

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

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

23 Декабрь, 2011 | Рубрики: CSS3 Читать статью

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

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

16 Декабрь, 2011 | Рубрики: CSS3 Читать статью

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

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

07 Декабрь, 2011 | Рубрики: CSS3 Читать статью

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

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

05 Декабрь, 2011 | Рубрики: CSS3 Читать статью

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

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

30 Ноябрь, 2011 | Рубрики: CSS3 Читать статью

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

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

29 Ноябрь, 2011 | Рубрики: CSS3, JavaScript Читать статью

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

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

28 Ноябрь, 2011 | Рубрики: CSS3 Читать статью

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

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

04 Октябрь, 2011 | Рубрики: CSS3 Читать статью

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

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

23 Сентябрь, 2011 | Рубрики: CSS3 Читать статью