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

Dealing with opacity

Opacity occurs in projects very often. For example, when you are creating some model windows on a page or lightbox-like gallery. It is used on the layer added under the main window (overlay element), which, in most cases, has added an onclick event listener in JavaScript, which hides the window upon clicking. How can you create this effect? How was it done in the past? Let's start with a simple HTML code:

<header> Header </header>
<main> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore doloremque dolores iure laudantium magni mollitia quam ratione, temporibus ut? Aperiam necessitatibus perspiciatis qui ratione vel! Adipisci eligendi sint unde. </main>
<footer> Footer </footer>

SASS:

header, footer, main
  padding: 50px
  text-align: center

header, footer
  background: red

main
  background: green

Compiled:

header, footer, main {
    padding: 50px;
    text-align: center;
}

header, footer {
    background...

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