Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

Web design

Web design

20 Творческих примерв текстур и узоров в веб-дизайне

  • Опубликовано в Web design
  • Автор SeRbGa
Что является самым простым и, возможно, одним из наиболее эффективных способов создания небольшой иллюзии 3D на сайте? Ясное дело это текстура или узор! Текстуры - это универсальные элементы, используемые в веб-дизайне и они позволяют дизайнерам очень широко экспериментировать со своими проектами. Текстура может принести иллюзию натурального дерева, скалы, куска облака или воды, все это претворяется в веб дизайне сайта. Не только текстуры широко применяются в дизайне, но и узоры тоже. Даже при том, что часто эти термины путают и используют…
Подробнее ...

Прелоадеры в стиле Tumblr

  • Опубликовано в Web design
  • Автор SeRbGa
Прелоадеры в стиле Tumblr - набор из CSS и SVG иконок, основанных на наборе иконок разработанных Jiri Silha (новость про Иконки настроек (PSD)). автор Pasquale Vitiello. Скачать можно тут  
Подробнее ...

Как сделать CSS3 Login Form (форма входа на сайт)

  • Опубликовано в Web design
  • Автор SeRbGa
В сегодняшнем уроке рассмотрим КАК СДЕЛАТЬ CSS3 LOGIN FORM (ФОРМА ВХОДА НА САЙТ) Форма построена на чистом CSS и будет полезна вам - если вы захотите использовать эти приемы у себя на сайте. Тем более что форма выглядит неплохо и будет привлекать к себе внимание . HTML Начнем с HTML структуры. Начнем с создания скелета пустой формы, которая включает описание, кнопку входа, ссылку и основную схему структуры CSS3.<form method="post" action="index.html" class="login"> <p> <label for="login">Email:</label> <input type="text" name="login" id="login" value="name(собака)example.com"> </p> <p>…
Подробнее ...

15 идей для эффекта Hover в CSS

  • Опубликовано в Web design
  • Автор SeRbGa
Несколько творческих идей для компактных эффектов для Hover ( наведение курсора мыши), используя современные методы CSS включая 3D переходы и псевдо элементы. Очень часто приодится сталкиватьсяс проектами в которых много тонких линий с тонкими гранями, большими пустыми областями, чистой типографикой и тонкими эффектами. В этой статье мы будем использовать некоторые творческие идеи для эффекта Hover, так сказать в минималистическом стиле. Методы, которые мы используем для эффекта Hover, включает 3D преобразования и некоторые переходы псевдоэлементов. Обратите внимание на то, что они…
Подробнее ...

15 режимов смешивания в CSS

  • Опубликовано в Web design
  • Автор SeRbGa
Одна из большинства неоценимых функций Photoshop — это режимы смешивания. Режимы смешивания берут два пикселя, расположенные друг на друге, и комбинируют их по-разному, например более темный цветной режим смешивания просто представит более темные из двух пикселей. Когда смешиваются целые изображения, то режимы смешивания могут произвести ошеломляющий эффект. Теперь таке-же можно сделать динамично с помощью CSS3. Поддержка браузерами В настоящий момент поддержка браузерами свойств фонового режима смешивания CSS постепенно улучшается. Более ранние версии браузеров бы потребовали префиксов или активация экспериментальных функций. непонятно…
Подробнее ...

Гомер Симпсон в CSS3 - невероятно круто!

  • Опубликовано в Web design
  • Автор SeRbGa
Все привет! Недавно наткнулся на невероятные приемы использования стилей CSS3. Ниже представлены некоторые персонажы семейки Simpsons - сделаны они на  чистом CSS - автор Крис Pattle. Это еще раз доказывает. что впереди еще ооочень много интересного можно будет сделать в сфере web технологий. #homer * { position: absolute; box-sizing:content-box; -moz-box-sizing:content-box; } #homer { position: relative; width: 94px; height: 133px; margin: 0 auto; } #homer .head * { border: 1px solid #110b00; } #homer .head .no-border { border: none; } #homer…
Подробнее ...

8 замечательных эффектов перехода в CSS3

  • Опубликовано в Web design
  • Автор SeRbGa
CSS3 представил бесчисленные возможности для разработчиков и самое интересное в том, что они просты в реализации. Несколько строк кода дадут Вам удивительный эффект перехода, который вызовет удивление у Ваших пользователей. К тому же эти эффекты аппаратно ускорены и не будут тормозить сайт. Вот 8 действительно простых эффектов которые добавят жизнь к Вашему сайту. Что бы посмотреть как эти эффекты будут работать сделаем отдельные странички HTML: <!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <div></div> </body> </html> Сделав так, устанавливаем…
Подробнее ...

JUTooltip - подсказки для joomla

  • Опубликовано в Web design
  • Автор SeRbGa
Всем привет! Задача - сделать всплывающие подсказки плагином для joomla. Итак, качаем плагин для подсказок JU Tooltip (для 2.5, 3.0) Настраиваем в меню управления плагинами.   Интегрируем в контент специальные теги. Пример работы: Загружаем элемент html tooltip включающую в себя любой тег HTML: наведи и посмотри подсказка жирный тег, далее еще жирный показывается из тега div который идет следом Для начала определяем класс: <a class="jutooltip">инструмент "перо"</a> Далее конструкция, внутри которой будет наша подсказка - там может быть что угодно (например…
Подробнее ...

Красивая кнопка на CSS

  • Опубликовано в Web design
  • Автор SeRbGa
Всем привет! Задача - сделать красивую кнопку на CSS Итак приступим: Обычная кнопка: Код: <input type="submit" name="Submit" class="btn-exit" value="Выйти" />   Как выглядит : Для того что-бы сделать ее красивой (допустим наложим градиент и добавим тени) - воспользуемся стилями css. Для этого назначим класс кнопке (btn-exit) и применим к нему стиль   <style type="text/css"> .btn-exit, input[type="submit"]{ background-image: linear-gradient(rgb(144, 66, 163), rgb(79, 25, 53)); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color:…
Подробнее ...
Подписаться на этот канал RSS

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

Я сам вдохновляюсь материалами, которые предлагаются вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, макетов и т.д.), и по возможности всегда сохраняется ссылка на источники, и сообщается  автор изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые здесь предоставлены, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то ему придется самостоятельно искать настоящего автора материала.