Архив рубрики ‘css’

• 

  20 CSS-уроков для адаптивного веб-дизайна

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

  Далее... 8 Комментариев »
• 

  Создание CSS3 исчезающих окон уведомления

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

  Далее... 4 Комментариев »
• 

  Галерея с css3-переходами

  В этом уроке мы будем создавать галерею, в которой с помощью CSS3- переходов реализуется эффект диагонального угасания фотографий. Мы будем сканировать на сервере папку с фотографиями  и отображать их в полный размер экрана в виде сетки. Добавить новую фотографию можно просто скопировав два файла в папку галереи (предварительно отредактировав размеры изображения и превьюшки, для которой желательный [...]

  Далее... 7 Комментариев »
• 

  Hover-эффекты в виде подписей

  Сегодня мы рассмотрим, как создавать простые, но стильный эффекты, которые появятся при наведении на изображения в виде подписей. Идея заключается в том, что мы будем использовать сетку с изображениями, при наведении на которые появится подпись названия и автора, а также кнопка ссылки. Для некоторых эффектов будем использовать 3d-трансформации. Наша цель — использовать тонкие эффекты, которые при этом [...]

  Далее... 7 Комментариев »
• 

  Adobe исследует будущее адаптивных макетов

  National Geographic начали сотрудничество с  Adobe и предоставили контент, с которым компания Adobe произвела некоторые эксперименты и ввела инновации по созданию цифрового макета. Проект назван «Лесной великан» ( "Forest Giant"), с помощью этого макета компания Adobe продемонстрировала, какой контент смогут видеть перед собой посетители сайтов в ближайшем будущем.

  Далее... 2 Комментариев »
• 

  jQuery плагины для работы с типографикой

  В первые дни развития всемирной паутины на веб страницах практически не было изображений. Эта тенденция возвращается. С появлением адаптивного дизайна все большую популярность набирает плоский дизайн и, соответственно, типографика, которая ложится его в основу. Опытные разработчики считают, что в ближайшем будущем все будет крутиться вокруг текста. Почему?  Потому что настройка изображений под различные разрешения экрана, будь это [...]

  Далее... Нет комментариев »
• 

  Создание коммерческих веб-элементов средствами css3

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

  Далее... 1 Комментарий »
• 

  Создаем адаптивный css-таймлайн c 3d эффектом

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

  Далее... 4 Комментариев »
• 

  Простой эффект YouTube-меню

   Сегодня мы будем создавать маленькое меню с эффектом, который вы видели в левой части меню на YouTube. Меню состоит из маленькой иконки меню, ярлыка и списка пунктов меню, который появляется при нажатии либо на ярлыку, либо на иконке. Как только пользователь кликнул для открытия меню, ярлык будет перемещаться вверх, а иконку сдвигается вправо. Элементы списка меню будут появляться [...]

  Далее... 1 Комментарий »