Cargando…
Web Design Blueprints.
Build websites and applications using the latest techniques in modern web developmentAbout This Book Create amazing modern day applications that run seamlessly across multiple platforms Implement multiple methodologies by creating different apps with dynamic features This unique project-based guide...
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Packt Publishing,
2016.
|
| Temas: | |
| Acceso en línea: | Texto completo |
Tabla de Contenidos:
- Cover; Copyright; Credits; About the Author; About the Reviewer; www.PacktPub.com; Table of Contents; Preface; Chapter 1: Responsive Web Design; Introduction to responsive web design; Getting familiar with the basics; Using the inspector; Understanding the viewport meta tag; Learning about the viewport meta tag by example; Viewing your work on the tag; Fixing the problem by adding the proper meta tag; Further explanation of the viewport meta tag; Understanding and changing the user agent string; Using the user agent string for testing; How to change the user agent string in Chrome; What next?
- Using media queries for responsive designSome background information; A small example; A better example; Adding style; Viewing your example; Adding complexity to your stylesheet; Adding more media queries; More complicated examples; Working with responsive media; Creating responsive images with srcset; How things have changed; A brand-new solution; Enough theory, let's do something; Layout basics; Making the img element responsive; Viewing your responsive image; Creating responsive images with CSS; Getting started coding; Responsive style; Above and beyond.
- Calculating the responsive image sizeAdding responsive video to your site; Working with two use cases; Use case #1
- self-hosted video; Use case #2
- embedded through the iframe element; Responsive video CSS; Modifying the layout; Viewing the example; Communicating with responsive typography; A good solution for responsive typography; Working with an example; Create the typography's CSS; Finished!; Building responsive layouts; Creating responsive padding with the box model property; A real-world example; Applying the box model property; Finished!; Going further; Viewing your example.
- Adding more complexityFinished! Now view your work; Creating responsive navigation with CSS and JavaScript; Jump into an example; Creating the responsive CSS with media queries; Your first version is complete; Going further; Adding interaction; Finally, the interaction function; Viewing your interactive responsive navigation; Summary; Chapter 2: Flat UI; A brief history of flat design; Flat UI color; Sample color swatches for flat UI; The vivid color swatch; The retro color swatch; The monotone color swatch; Creating a color swatch for your project; Creating a flat UI layout; Adding content.
- Creating a working JavaScript clockAdding textual content; Let's talk about the weather, travel, and the stock market; Flat UI typography; Adding webfonts; Adding flat UI elements; Flat UI CSS cleanup; Creating universal classes; Fixing time; Fixing the news and tasks elements CSS; Adding CSS for the weather section; Creating more universal classes; Final cleanup of the landscape orientation; Final cleanup of the portrait orientation; Summary; Chapter 3: Parallax Scrolling; Starting off; The HTML markup; Color classes; Using SVG font icons; Getting the fonts; That's no moon!