1. Приветствую гостей и пользователей нашего форума! Первый раз вы у нас или же давно участвуете в жизни ресурса, хочу напомнить несколько моментов.

    1) Пользуемся поиском по форуму! Зачастую информация может находиться не по разделу!

    2) Раздел ИНФО-продуктов относительно новый, но имеем уже более 3000 высококлассных материалов (пользуемся сортировкой по прификсам).

    3) И самое важное, КАК КАЧАТЬ БЕЗ ОГРАНИЧЕНИЙ, вся информация находится по этой ссылке КУПИТЬ VIP

    4) Временная акция, получи +5 постов за вступление в нашу группу "Вконтакте" Более подробно ТУТ

    5) Веди активную жизнь на форуме и получай рубли на личный счёт!

    Скрыть объявление
  2. На нашем форуме Null-Prog действует серьёзное правило касательно размещения материалов!

    ДЛЯ РЕЛИЗЁРОВ: категорически запрещается выкладка материалов на файлообменники типа Deposit, letitbit и другие, требующие просмотров рекламы, обрезающие скорость и тд. Нарушителям, первые 2 раза предупреждения, далее БАН. Тему по этому поводу можно посмотреть ТУТ

    Скрыть объявление
  3. В тестовом режиме на нашем форуме открыт онлайн конструктор сайтов. Вы можете попробовать создать свой сайт у НАС, интуитивно понятный интерфейс, переведёт на 95%, быстрый экспорт проекта, от вас только перетаскивать элементы и вставить в них необходимый текст!

    Все вопросы ТУТ

    Скрыть объявление

  4. Скрыть объявление
  5. Уважаемые форумчане, открывается новый раздел форума, посвящённый ремонту и эксплуатации автомобилей. Просмотреть его можно ТУТ

    Так как раздел новый, информация будет пополнять каждый день. Если есть какие либо замечания по этому разделу, отписываемся в соответствующий раздел форума, либо в личку.

    Напоминаю, сообщения в разделе АВТО не учитываются, общение не ограничено.

    Скрыть объявление
  6. Объявляется набор Модераторов на различные раздел форума, свои заявки можно оставлять в ЭТОМ разделе, перед оставлением заявки рекомендуется ознакомиться с ПРАВИЛАМИ для модераторов.

База разборов скриптов

Тема в разделе "СSS", создана пользователем Sam Jack, 18 авг 2015.

  1. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Объемная анимация для сайта при помощи CSS3

    1429727477_obemnaya-animaciya-dlya-sayta-pri-pomoschi-css3.jpg
    В последнее время разработчики прибегают к весьма креативным решениям анимации реализованной не с помощью тяжелых скриптов, изображений, а при помощи обычных стилей, которые способны получить весьма увлекательную анимацию. В данном уроке мы рассмотрим одну из таких анимаций, идея состоит в том, что у нас есть треугольник, стороны которые стилизованы квадратами, которые будут вращаться, будет создаваться эффект выворотки сторон квадрата, но кроме этого у нас будет переливающаяся палитра, которая скрасит наш треугольник.
     

    Вложения:

    Метки:
  2. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Всплывающее окно при входе на сайт на CSS3

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

    Вложения:

  3. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Эффект «живого фона» для сайта с помощью CSS

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

    Скрытый текст:
    **Скрытый текст: Вы должны нажать кнопку 'Мне нравится' для возможности просмотра скрытого текста.**
     
  4. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Красивый hover-эффект для изображения на CSS

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

    Вложения:

  5. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Стильная страница 404 для сайта с помощью CSS

    Страница 404 одна из наиболее распространенных страниц-ошибок для сайта, действие пользователей часто приводит к перенаправлению их на данную страницу, но когда посетитель видит обычную страницу ошибку, зачастую его просмотр сайта заканчивается, но как сделать, чтобы при попадании на такую страницу пользователи не убегали отвал, а возвращались назад к просмотру сайта. Как показывает статистика, посетители более дружелюбны к сайтам, где оформлены страницы ошибок, чем обычная заглушка ошибки.
     

    Вложения:

  6. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Аккордеон изображений для сайта на CSS3

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

    Вложения:

  7. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Подборка креативных ховер-эффектов для сайта

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

    Вложения:

  8. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Кнопка для сайта с дополнительной информацией

    Все мы знаем, что кнопки на сайте очень важны, они задают не только общий стиль дизайна но и подчеркивают его уникальность. Каждый дизайнер стараться создать нечто уникальное, чтобы выделить стиль своего ресурса и сделать его более практичным. В данном уроке мы хотим рассмотреть кнопку с дополнительной информацией, которая поможет проинформировать пользователя о его дальнейших, возможных действиях. В примере мы будем использовать кнопку загрузки, с дополнительной информацией и возможностью выбора функций.
    1429726546_knopka-dlya-sayta-s-dopolnitelnoy-informaciey1.png
    В конце мы предлагаем выбрать какое действие совершить, сохранить в облако или загрузить. Это позволит усовершенствовать загрузку, так как облачные хранилища стали весьма популярны.
     

    Вложения:

  9. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Анимированный фон для сайта с помощью CSS3

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

    Вложения:

  10. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Создание анимированных кнопок для сайта

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

    Вложения:

  11. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Индикаторы загрузки сайта с помощью HTML5


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

    Вложения:

  12. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    3D моделирование объектов

    Сегодняшний урок является мостом между двухмерной графики в HTML5 и по-настоящему трехмерными (с помощью WebGL). Сегодня я покажу, как нарисовать трехмерные объекты с помощью полигональной сетки. Полигон сетки или неструктурированные сетки представляет собой набор вершин, ребер и граней, который определяет форму многогранных объектов в 3D компьютерной графики и твердотельного моделирования. Лица, обычно, состоят из треугольников, четырехугольников или других простых выпуклых многоугольников, так как это упрощает рендеринг.

    Для того, чтобы понять, о чем идет речь, я рекомендую прочитать основе описанных в Википедии . Чтобы продемонстрировать это, мы подготовили простые трехмерные объекты - куб и многомерной сферы (с переменным числом граней).
     

    Вложения:

  13. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Анимированная типографика для сайта

    Типографика стала играть большую роль в современном веб-дизайнеры. Создавая сайт, мы стали уделять внимание таким мелочам как шрифт и его правильное отображение, некоторые мастера предпочитают репозитории гиганта google со шрифтами, а другие собственные, подключаемые к документу, но можно пойти другим путем, и создать полную анимацию текста, для этого мы будем использовать js. В данном посте мы рассмотрим один из таких примеров. Основная идея состоит в том, что текст состоит из капель, которые можно двигать, а они будут разлетаться.

    Кроме этого для отображения полной функциональности была добавлена панель с опциями, в которой можно настроить цвет и границы капель. Автором данного удивительного творения является Francesco Trillini, его уроки можно найти на сайте codepen.
     

    Вложения:

  14. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    3D Nexus реализованный с помощью CSS3 и JS

    Данные технологии веб-дизайна позволяют создать удивительные вещи, которые ранее были доступны только благодаря flash-анимиции. С помощью трансформаций css и вспомогательных скриптов можно создать удивительные вещи, которые ограничиваются только вашей фантазией и возможностями. Гигант Google создал ряд удивительных гаджетов серии nexus, в данном примере мы рассмотрим как реализовать планшет nexus с помощью css и js. С помощью ориентации по плоскостям мы придадим эффект объемности, кроме этого будет реагировать на курсор мыши.
    Мы будем использовать подготовленные ранее изображения, нам понадобятся текстуры планшета со всех сторон. Мы их скрепим в единую коробку.
     

    Вложения:

  15. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Красивая анимация для сайта

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

    Вложения:

  16. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Анимированные иконки погоды

    В последнее время стали весьма популярны сайты с тематикой погоды, это не только красиво и радует взор, если сайт организован должным образом, но направлен на целевую аудиторию. В данном примере мы рассмотрим реализацию замечательных минималистических, анимированных иконок для сайта с помощью svg и css3. В комплекте реализовано 82 иконки с различным примером анимации. Все иконки высококачественные и будут отлично смотреться на различном разрешении экрана. Давайте посмотрим, что у нас получилось..
    Автор использовал иконки реализованные с помощью SVG, данный прием становится весьма популярным, ведь позволяет увеличить скорость загрузки не используя сторонних изображений при этом не теряя качество объекта. Автором является Noah Blon, соответственно все права на данные анимированные иконки принадлежат ему.
     

    Вложения:

  17. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Создание эффекта глубины с помощью DOM


    Продолжаем проводить различные эффекты, которые можно реализовать у себя на сайте, в данном уроке мы рассмотрим небольшой эксперимент реализован при помощи DOM-элементов, мы постараемся реализовать забавный эффект глубины цветов, кроме этого будет создаваться вращение со стороны в сторону при движении курсора мыши, при этом будет происходит изменение размеров колец, таковых у нас будет десять, все будут иметь различный диаметр и цвет. Такой вариант игры элементов можно применить на персональной страничке.
     

    Вложения:

  18. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Создаем простую панель для рисования 3D

    Сегодня мы собираемся вернуться к практическим занятиям по HTML5. Я думаю, что мы уже сделали хороший перерыв в наших уроках. В этом уроке я покажу вам, как создать панель для рисования которая вращается вокруг своей оси (на объекте холста HTML5). Каждый из ваших нарисованных фигур будет вращаться в псевдо 3D режиме. Для этого нам необходимо определить два объекта: точки и формы (каждая фигура состоит из нескольких пунктов). Основная идея - проектировать и вращать точки фигур, а также нарисовать кривую линию между этими точками.
     

    Вложения:

  19. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Интересный морфинг девайсов в веб-дизайне

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

    Начнем с того, что мы будем контролировать классы и переключение изображений при помощи javascript. Кроме этого мы добавим автоматические пролистывание слайдов с переворотом девайсов, это будет выглядеть весьма интересно.

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

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
     

    Вложения:

  20. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.725
    Интерактивная загрузка для сайта

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

    Вложения:

Поделиться этой страницей

iHax Community
Рейтинг@Mail.ru Яндекс.Метрика мониторинг сайтов
Форум программного обеспечения/
Загрузка...