Love is… «In Flat» — новые фантики для старой жвачки

Статьи по дизайну

Кстати, если вы каким-то образом пропустили нашу Ёлку, то зацените её сияющую ленточку здесь: Behance Или почитайте о её создании в статье: Medium Но вернёмся к фантикам. Активная подготовка к коллабу началась с просмотра тонны старых фантиков «Love is…», а также всевозможных вариаций в поиске «той самой фразы», которая вдохновит. Кто-то стал собирать фантики в…

Making Of Scary Christmas — коллаб от In Flat

Статьи по дизайну

Но ничего из этого не воплотилось бы без Кеши, который своим видео разжёг искру вдохновения, а также без Ани Панфиленко и Елены Сапроновой, которые эту искру подхватили. И взяли на себя тяготы организационных моментов. Помимо этого, Аня занималась общей сборкой макета и отрисовкой бэкграунда и звезды на верхушке. Но обо всём этом она лучше расскажет…

Hutchison Flat от Atelier SUWA

Прочие тематики

Atelier SUWA недавно отремонтировал квартиру Hutchison в Outremont, Квебек. Задачей студии было создать новое гибкое пространство в тесном плане для владельцев, которые работают из дома. SUWA создала централизованное жилое пространство, которое стало мостом между спальными комнатами (расположенными на на улице) и домашний офис (расположен на стороне сада). Центральное пространство (кухня, столовая и гостиная) структурировано длинным…

14 CSS Flat Buttons

Статьи по дизайну

            
            
                
                
            
            

Коллекция сборных свободных HTML и CSS плоских кнопок . Примеры кода.

  1. Кнопки CSS

    2.   

  2. CSS Hover Effects

    3.   

  3. CSS 3D-кнопки

    4.   

  4. CSS Submit Buttons

    5.   

  5. Кнопки CSS Gradient
Демо-изображение: Чистая CSS-кнопка Flipping «title =« Чистая кнопка CSS Flipping »/> <img class= О коде

  

Pure CSS Flipping Button

  

Это кнопка flatt которая имеет 3-мерный эффект сбрасывания при наведении.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-изображение: Блестящая кнопка "title =" Блестящая кнопка "/> <img class= О коде

  

Блестящая кнопка

  

Блестящая увлекательная и плоская кнопка для вызова к действию, только с CSS.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-ролик: Анимированная кнопка с плоским дизайном «title =« Анимированная кнопка с плоским дизайном »/> <img class=     

      

Автор

      

  • Эллисон Скиннер

    •         

    •       

  
  
  

  

О коде

  

Анимированная кнопка с плоским дизайном

  

Кнопка, которая следует за плоской тенденцией дизайна, но все же имеет некоторую 3D-анимацию при наведении.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-ролик: Анимированная кнопка Rainbow "title =" Анимированная кнопка Rainbow "/> <img class= О коде

  

Анимированная кнопка Rainbow

  
  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демонстрационное изображение: дизайн материала Плоская кнопка «title =« Плоская кнопка дизайна материала »/> <img class= О коде

  

Материал Дизайн Плоская кнопка

  

Hacky CSS для плоских материалов Дизайн теней для текста.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-изображение: плоские кнопки Psuedo Striped Shadows "title =" Плоские кнопки Psuedo Striped Shadows "/> <img class=     

      

Автор

      

  • Даниэль Пауэлл

    •         

    •       

  
  
  

  

О коде

  

Плоские кнопки Psuedo Striped Shadows

  

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

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-изображение: Плоская слоистая кнопка "title =" Плоская слоистая кнопка "/> <img class=     

      

Автор

      

  • Дронка Рауль

    •         

    •       

  
  
  

  

О коде

  

Плоская слоистая кнопка

  
  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-изображение: чистые CSS-флип-кнопки «title =« Pure CSS 3D Flip Buttons »/> <img class= О коде

  

Pure CSS 3D Flip Buttons

  
  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-ролик: Анимированные кнопки CSS3 «title =« Анимированные кнопки CSS3 »/> <img class= О коде

  

Анимированные кнопки CSS3

  
  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демо-изображение: Плоские кнопки "title =" Плоские кнопки "/> <img class=     

      

Автор

      

  • Бенджамин Вилина

    •         

    •