Foundation for Responsive Web Design Tutorial - 3 - Nesting and Dynamic Layouts

Foundation for Responsive Web Design Tutorial – 3 – Nesting and Dynamic Layouts

our a houses so in the last video we learned the really basic idea behind the grid system and foundation basically our layout is going to be made up of rows and inside those rows we need to fill 12…

Responsive & Creative Navigation Bar with HTML / CSS and JavaScript / Web Design

Responsive & Creative Navigation Bar with HTML / CSS and JavaScript / Web Design

Responsive Layout: Animation - Google Web Designer

Responsive Layout: Animation – Google Web Designer

我叫 Lucas我是 Google Web Designer 的工程師 我叫 Lucas我是 Google Web Designer 的工程師 在先前的影片中 我們說明了如何運用媒體規則建立回應式文件 這次我們要示範如何合併動畫和媒體規則 首先來介紹我們示範用的簡單文件 它會配合狹長的檢視點顯示直式版面配置 配合較寬的檢視點顯示橫式版面配置 我現在要拉長這個文件 這樣一來當文件顯示橫式版面配置 而且高度足夠時 就不會只顯示單張圖片而是先顯示兩張重合的圖片 然後以動畫分隔兩張圖片 由於 Web Designer 使用CSS3 主要畫面格呈現動畫 由於 Web Designer 使用CSS3 主要畫面格呈現動畫 所以可以用媒體規則進行編碼 我先切換至主要內容 然後複製貼上這張圖片 接著在新圖片上指向其他素材資源 我的做法是直接變更素材資源的路徑 接著將這張圖片預設為隱藏狀態 現在我要切回媒體規則…

Мини-курс «Web Design 2. Figma». Урок 4. Мобильная версия

Мини-курс «Web Design 2. Figma». Урок 4. Мобильная версия

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