Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Professional CSS3

By : Piotr Sikora

2 (2)

Professional CSS3

2 (2)

By: Piotr Sikora

Overview of this book

CSS is the preferred technology to design modern web pages. Although CSS is often perceived as a simple language, applying modern styles to web pages with CSS and maintaining the code for larger websites can be quite tricky. We will take you right from understanding CSS to designing high-quality web pages in CSS3. We'll quickly take you through CSS3's features, and show you how to resolve common issues so you can build your basic framework. Finally, you will learn about code architecture and CSS methodologies used in scalable apps and you'll explore the various new features of CSS3, such as FlexBox, to help you create the most modern layout methodologies. By the end of the book, you will be a master at creating pure CSS web pages and will know sophisticated web design techniques, giving you an edge over other web designers.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Foundations and Tools

1. Foundations and Tools

Choosing the right IDE

Cross browser compatibility – which browsers should you install?

Preprocessor – why should you use them?

SASS foundation

Simple automatization (with Gulp)

Pixelperfect layouts tools

Checking compatibility

Good assumptions in code

Creating proper selectors

Preparing your project

Summary

2. Mastering of Fundamentals

2. Mastering of Fundamentals

Traditional box model

Floating elements

Display types

CSS elements positioning

Summary

3. Mastering of Pseudoelements and Pseudoclasses

3. Mastering of Pseudoelements and Pseudoclasses

Pseudoclasses

Usage of pseudoclasses

Supporting forms styling with pseudoclasses

Drawing primitives with CSS

Pseudoelements

Summary

4. Responsive Websites – Prepare Your Code for Specific Devices

4. Responsive Websites – Prepare Your Code for Specific Devices

The foundation of responsive websites

Media queries – where can you use it

Usage sample – main navigation

Summary

5. Using Background Images in CSS

5. Using Background Images in CSS

CSS backgrounds

Retina problems

Summary

6. Styling Forms

6. Styling Forms

Forms – the most known issues

Forms – enable superpowers

Summary

7. Resolving Classic Problems

7. Resolving Classic Problems

Centering elements

Dealing with opacity

Summary

8. Usage of Flexbox Transform

8. Usage of Flexbox Transform

Flexbox

More about transform

Summary

9. Calc, Gradients, and Shadows

9. Calc, Gradients, and Shadows

The calc() method

Gradients in CSS

How to add box-shadow

How to add text-shadow

Additional font and text features

Data attribute

Summary

10. Don't Repeat Yourself – Let's Create a Simple CSS Framework

10. Don't Repeat Yourself – Let's Create a Simple CSS Framework

File structure

Short forms of useful elements

Other mixins

Media queries

Grids

Standard reusable structures

Gathering other reusable mixins

Let's test and use our framework

Remember!

Summary

11. Mailers Fundamentals

11. Mailers Fundamentals

Testing your mailer

Back to tables

Targeting specific devices through media queries

Inlining the e-mail template

Tips for e-mail template development

Testing with Litmus

Summary

12. Scalability and Modularity

12. Scalability and Modularity

Building scalable and modular code

CSS methodologies

Which methodology should you use?

Maybe your own methodology?

Summary

13. Code Optimization

13. Code Optimization

Self-optimization

Summary

14. Final Automatization and Processes Optimization

14. Final Automatization and Processes Optimization

Gulp

Jade as your templating engine

UnCSS

Minifying CSS

Final automatizer

Summary

Index

Index

Flexbox

Flexbox is the one of the loudest and most modern layout methodologies used in current CSS projects. With flexbox, you can create a structure for your web page, which is more elastic than projects based on floating boxes. Why? We will check and make an investigation in this chapter. What you need to remember is that Internet Explorer supports flexbox since its 11th version.

Let's look at the basics of flexbox:

Flexbox

As you can see in the preceding screenshot, there is new dictionary related to flexbox:

Main axis (green arrow)
Main start (red line)
Main end (red line)
Main size (black line)
Cross axis (green arrow)
Cross start (red line)
Cross end (red line)
Cross size (black line)

Initialization of flexbox is very simple. You just need to add the following code to your container:

.flexContainer
  display: -webkit-box
  display: -moz-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex

The compiled code is:

.flexContainer {

    display: -webkit-box;

    display: -moz-box;

   ...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Professional CSS3

Search

Your notes and bookmarks