Записи, помеченные ‘верстка’
-
Создание галереи изображений с увеличением с использованием только CSS3
В этом уроке мы создадим галерею изображений с увеличением изображения при нажатии на него. Еще мы добавим кнопку для закрывания увеличенного изображения. И, что самое главное, мы сделаем это на чистом CSS! Лучше всего, чтобы страница с галереей не прокручивалась, так как псевдокласс :target прокрутит страницу до активного элемента, что будет раздражать, если страница может прокручиваться.
Далее... Нет комментариев » -
Создание раздвигающейся галереи изображений с использованием только CSS3
В этом уроке мы создадим раздвигающуюся галерею изображений, использую только CSS. И еще мы рассмотрим альтернативу псевдоклассу :target. Посмотрите пример, чтобы увидеть, как работает галерея изображений.
Далее... 1 Комментарий » -
Цикл уроков о переходах CSS3, часть 4: Продвинутые способы переходов
В последней части цикла уроков о переходах CSS мы рассмотрим несколько более продвинутых вариантов переходов. Вы уже наверняка читали публикации предыдущих трех частей и нашли много интересного. Если же вы их не видели, ищите ссылки в нижней части страницы.
Далее... Нет комментариев » -
Создание ярлыков с использованием CSS для добавления пометок содержимому
Ярлыки обычно используются после содержимого веб-страницы, чтобы расположить его по категориям. Создания ярлыка, который выглядит, как настоящая бирка, — это весьма интересная идея, но это может быть довольно сложно. В этом уроке мы создадим легкий в использовании ярлык с минимально возможным синтаксисом, без использования изображений, используя только CSS и HTML.
Далее... Нет комментариев » -
Создание параллакс-эффекта
Сегодня мы будем заниматься созданием параллакс эффекта. Нам предстоит поработать над эффектом, который добавляет глубину блоку за счет разных слоев. Эти слои будут перемещаться с разной скоростью относительно друг друга. Можно задать этим слоям разные настройки и таким образом менять эффект.
Далее... Нет комментариев » -
Цикл уроков о переходах CSS3. Часть 3. Временная функция Безье
Во второй части цикла уроков мы рассматривали свойство CSS3 transition-timing-function, которое отвечает за изменение скорости анимации со временем во время перехода. Значений этого свойства, таких как ease, ease-in и linear, обычно достаточно даже для очень требовательного веб-разработчика. Тем не менее вы можете создать свою собственную временную функцию, используя значение cubic-bezier. Оно выглядит и звучит сложно, но его можно [...]
Далее... 1 Комментарий » -
Создание веб-сайта, подходящего для любого экрана
Интернет становится все более мобильным. Извечная проблема размера экрана преследовала веб-дизайнеров десятилетиями. Сейчас все больше людей выходят в интернет с мобильных телефонов, и проблема только усугубилась. Что же мы можем сделать с этой ситуацией? К счастью, участники W3C (Консорциум Всемирной паутины) заметили увеличение трафика с мобильных устройств и дали нам инструменты, нужные для создания подходящих сайтов.
Далее... Нет комментариев » -
Обзор единиц измерения CSS3 и их использования
Удивительно, но сообщество веб-дизайнеров буквально игнорирует возможные способы использования единиц измерения CSS3. Доработка спецификаций новых единиц измерения CSS3 велась до последнего времени, но уже закончена, так что то, о чем рассказывается в этом уроке, вряд ли изменится.
Далее... 1 Комментарий » -
Цикл уроков о переходах CSS3. Часть 2: Основы свойств переходов
Сегодня мы публикуем второй урок из цикла уроков о переходах CSS3. На этот раз мы внимательно рассмотрим свойства. Ниже вы найдете много полезной информации, которая будет полезна в первую очередь новичкам, которые хотят углубиться в изучение CSS3. Но сначала давайте узнаем, что можно и что нельзя анимировать.
Далее... Нет комментариев »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191