Thông tin tài liệu
www.it-ebooks.info
Designing Next Generation
Web Projects with CSS3
A practical guide to the usage of CSS3 – a journey
through properties, tools, and techniques to better
understand CSS3
Sandro Paganotti
BIRMINGHAM - MUMBAI
www.it-ebooks.info
Designing Next Generation Web Projects with CSS3
Copyright © 2013 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the author, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: January 2013
Production Reference: 1140113
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-326-4
www.packtpub.com
Cover Image by Rakesh Shejwal (shejwal.rakesh@gmail.com)
www.it-ebooks.info
Credits
Author
Sandro Paganotti
Reviewers
Berg Brandt
Angelos Evangelou
Andrew Wasson
Acquisition Editor
Usha Iyer
Lead Technical Editor
Ankita Shashi
Technical Editors
Manmeet Singh Vasir
Dominic Pereira
Copy Editors
Brandt D'Mello
Insiya Morbiwala
Aditya Nair
Laxmi Subramanian
Ruta Waghmare
Project Coordinator
Joel Goveya
Proofreaders
Denise Dresner
Kevin McGowan
Indexer
Monica Ajmera Mehta
Graphics
Aditi Gajjar
Production Coordinator
Nilesh R. Mohite
Cover Work
Nilesh R. Mohite
www.it-ebooks.info
About the Author
Sandro Paganotti is a web developer, a Google Developers Expert in HTML5,
a technical writer, and an HTML5/CSS3 teacher with a passion for Ruby and
cutting-edge frontend technologies. He enjoys nding clever and pragmatic solutions
to ambitious projects at Comparto Web, the company he co-founded in 2012.
He's also a funding member of WEBdeBs, a local community of web enthusiasts, and
a speaker at local and national conferences.
I would like to thank everyone who developed the amazing libraries
presented in this book, Lea Verou (also for this hint, "the rst thing
you can say about CSS3 is that it doesn't actually exist"), the teams
behind Sass and Compass, Faruk Ateş, Paul Irish, and everyone
who contributes to Modernizr, Richard Herrera for Flexie and Jason
Johnston for CSS3 PIE. Also thanks to Sara Baroni and Paolo Dusi
for their amazing infographic that I used in Chapter 4, Zooming
User Interface.
A big thanks to Davide, Fabio, and Mattia, my partners at
Comparto Web.
Another big thanks to my editors at Packt Publishing for their time,
patience, and wise advice and to Alessandro Cinelli "cirpo" for his
useful review.
A special thanks to Andrea, my father, who shot all the photos used
in the projects of this book.
And last, a huge thanks to Francesca for the time she spent reading
my drafts, trying the projects for the book, and giving me support
during my long writing Sundays.
www.it-ebooks.info
About the Reviewers
Berg Brandt is a well-rounded frontend engineer/web developer and a web
designer with more than 12 years of experience in the Internet industry, specializing
in designing, developing, and maintaining websites and web applications for
different scales, markets, languages, and cultures.
Nowadays, Berg is the Engineering Team Leader of one of the Common User
Experiences track of the Yahoo! Publishing Platform (YPP). The YPP empowers more
than 300 high-trafc websites that reach millions of users across the globe every day.
Berg is one of the project founders and the main author of the YPP CSS framework,
one of its key components.
Angelos Evangelou is a web designer focused on creating templates. He obtained
a degree in Web and Multimedia and has good knowledge of open source CMS
platforms. He mainly loves to code and design websites from scratch, and as such,
now focuses much of his time on template production.
I would like to thank my parents and brothers. They have helped me
have the condence to pursue what I enjoy.
www.it-ebooks.info
Andrew Wasson is a partner at Luna Design, a graphic design and web
development studio in North Vancouver, British Columbia, Canada. Keenly
interested in electronics and technology, Andrew built his rst computer in high
school and thus began his journey in computer programming, starting with machine
language assemblers and then graduating to variations of Basic and C. Andrew has
been developing and producing websites since 1998 and is active within the online
community helping others master the ner points of website development. When
he is not sharing the responsibilities of running their business with his wife Fiona,
Andrew can be found riding or restoring his vintage ex-racing motorcycles.
www.it-ebooks.info
www.PacktPub.com
Support les, eBooks, discount offers
and more
You might want to visit www.PacktPub.com for support les and downloads related to
your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub
les available? You can upgrade to the eBook version at www.PacktPub.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
service@packtpub.com for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a
range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
TM
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print and bookmark content
• On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib
today and view nine entirely free books. Simply use your login credentials for immediate access.
www.it-ebooks.info
www.it-ebooks.info
To Francesca, my parents, and Comparto Web.
www.it-ebooks.info
[...]... create bar charts and pie charts with CSS3 without the need for anything other than CSS and HTML With the right polyfills we can then make these charts behave well even on older browsers [2] www.it-ebooks.info Preface What you need for this book To develop the projects provided with this book you need a text editor (for example, Sublime Text 2, Notepad ++, and so on), and a web server to run the code If... freely by Yahoo!, which basically sets all the properties to none or something equivalent Next, we ask for another stylesheet This one is from a Google service called Google Web Fonts (www.google.com/webfonts), which distributes fonts that can be embedded and used within a web page Custom web fonts are defined with a special @font-face property that contains the link to the font file the browser has... a web server, you may want to use a pre-packaged solution such as MAMP for Mac (http://www.mamp.info/en/mamp/index.html) or WampServer for Windows (http://www.wampserver.com/) These packages also install PHP and MySQL, that are not required to run the projects of this book, so you can simply ignore them Once you have downloaded, installed, and started the web server, you can create the projects within... fields that are in a valid state • :invalid: It works in the opposite way, matching only fields with errors This includes empty fields with the required attribute set to true • :required: It matches only fields with the required flag, whether they're filled or not • :optional: It works with all fields the without the required flag [ 18 ] www.it-ebooks.info Chapter 1 In our case, we need to match all... moving on We used the :after pseudo-selector to get access to the location just after the element with a label class Then, with the content property, we injected the asterisk within that location If we reload the page we can verify that, now, all the labels that belong to fields with a required flag end with an asterisk Someone may point out that screen readers do not recognize this technique To find... discover how CSS3 features, such as some new pseudo-selectors, can enhance a form by adding specific styles to required fields or to valid/invalid ones Chapter 2, Shiny Buttons, will show you how to create some CSS3 enhanced buttons by using techniques such as rounded corners, multiple backgrounds, gradients, and shadows Then we animate them using the classic :hover pseudo-selector with CSS3 transitions... Internet, please provide us with the location address or website name immediately so that we can pursue a remedy Please contact us at copyright@packtpub.com with a link to the suspected pirated material We appreciate your help in protecting our authors, and our ability to bring you valuable content Questions You can contact us at questions@packtpub.com if you are having a problem with any aspect of the... and a nice feature detection library Chapter 4, Zooming User Interface, uses CSS3 transitions mixed with SVG graphics and the new :target pseudo-selector to create a fully functional zooming user interface that displays a cool infographic Chapter 5, An Image Gallery, will show you how to develop a pure CSS3 image slideshow with different transition effects such as fading, sliding and 3D rotation, and... format('truetype'), url('yourfonturl.svg') format('svg'); font-weight: normal; font-style: normal; } Google Web Fonts provides us with a stylesheet containing these statements for the fonts we choose, saving us all the trouble related to font conversion Next, let's create an empty file for our stylesheet under a css folder within the project Last but not least, we need to ensure that even older Internet Explorer browsers... varies with the size of the element, for example background-size: 10% 10%; • cover: This value scales the image (without stretching it) to cover the whole area of the element This means that part of the image may not be visible because it could get bigger than the container • contain: This value scales the image (without stretching it) to the maximum size available while keeping the whole image within . www.it-ebooks.info
Designing Next Generation
Web Projects with CSS3
A practical guide to the usage of CSS3 – a journey
through properties,. to better
understand CSS3
Sandro Paganotti
BIRMINGHAM - MUMBAI
www.it-ebooks.info
Designing Next Generation Web Projects with CSS3
Copyright © 2013 Packt
Ngày đăng: 23/03/2014, 17:22
Xem thêm: Designing Next Generation Web Projects with CSS3 pptx, Designing Next Generation Web Projects with CSS3 pptx