Записи, помеченные ‘верстка’

• 

  Исчезающие со временем уведомления с CSS-анимацией

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

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

  Создаем меню со случайным поворотом пунктов с помощью jQuery и CSS3

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

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

  Создание анимации с Animate.css

  Несмотря на все трудности возникающие при создании анимации, безусловно стоит стремиться к получению навыков,  приобретению уверенности и достижению мастерства в этой области. Ден Эден – дизайнер и студент из Манчестера (Великобритания) —  создал своеобразную библиотеку анимации Animate.css. По его словам, изначально идея возникла для оптимизации собственного времени на разработку проектов, а затем приобрела большие масштабы. Теперь все желающие могут [...]

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

  Создание эффекта глянцевой фотографии при помощи CSS3

  Все чаще и чаще мы создаем эффекты, которые обычно создавались в графическом программном обеспечении, таком как Adobe Photoshop, используя только CSS. И последнее время новые эффекты становятся достижимы с помощью CSS3. В этом уроке мы рассмотрим, как воссоздать распространенный эффект глянцевого изображения, используя некоторые градиенты CSS3.

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

  Адаптивный веб-дизайн с использованием CSS3

  Революция смартфонов привнесла новые особенности в веб-разработку, пришло время преобразовать дизайн вашего веб-сайта в адаптивный дизайн вместо того, чтобы поддерживать отдельную мобильную версию. Адаптивный дизайн автоматически подстроится, основываясь на размере экрана используемого устройства. Этот урок объясняет, как использовать свойство CSS3 @media и работать с Internet Explorer, используя библиотеку JavaScript Modernizr.

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

  Создаем стильное плоское меню при помощи CSS

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

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

  Заголовки со стрелочками в стиле Adobe.com

  Этот урок опубликовал вчера Chris Coyier, и мы не могли оставить его незамеченным. Способ, описанный в нем, можно здорово применить не только в качестве заголовка раздела или статьи, но и в полосе «хлебных крошек». Мы перевели его статью, добавив некоторые замечания, высказанные читателями CSS-Tricks. Крису приглянулись вот эти стрелочки на панельках заголовков сайта Adobe: 

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

  Как заставить сайт хорошо выглядеть на любом экране

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

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