A presentation about Lea Verou's book "CSS Secrets", with some examples on codepen. Content: - CSS coding tips - Complex background with background-image and SVG - Half ellipse - Pie chart - Irregular drop shadow

1. CSS
SECRETS
LEA VEROU
Better solutions to everyday
web design problems
priscilacng

2. Lea Verou
"(Lea being short for Michailia or Μιχαήλια)
and I’m a computer scientist / web standards
geek / front­end developer / web designer /
speaker / author, originally from Greece."
http://lea.verou.me/about/

3. "CSS has grown so much that
it’s practically impossible for
any single person to hold all
of it in their brain."

5. Browser Support
Can I Use
Modernizr
@support
http://caniuse.com/
https://modernizr.com/
https://developer.mozilla.org/en-
US/docs/Web/CSS/@supports

6. CSS3, CSS4, and other
mythical creatures

7. "Despite the popularity of the “CSS3”
buzzword, there's actually
no specification defining such a
thing, like there was for CSS 2.1 or its
predecessors."

8. CSS coding tips
Minimize code duplication
Trust your eyes, not numbers
Responsive web design
Relate dependent values in the code
Maintainability vs brevity
The more media queries you add, the
more fragile your CSS code becomes.

9. Should I use a preprocessor?

10. http://www.myth.io/

11. Complex background patterns

12. background:#00BCD4;
background-image:radial-gradient(white
30%,transparent0),radial-gradient(white
30%,transparent0);
background-size:30px30px;
background-position:00,15px15px;
http://goo.gl/HpHhQW
Polka dot pattern

13. http://lea.verou.me/css3patterns/

14. But sometimes...
"This is so much code that it might
actually be better to go the SVG route"
"But CSS gradients save us
HTTP requests!"
"Modern browsers, we can embed
the SVG file in our stylesheet
as a data URI "

15. Complex background patterns

16. background:#8bc34aurl('data:image/svg+xml,
<svgxmlns="http://www.w3.org/2000/svg"
width="100"height="100"fill-opacity=".15">
<rectx="50"width="50"height="50"/>
<recty="50"width="50"height="50"/>
</svg>');
background-size:50px50px;
http://goo.gl/0SvP0b
Checkerboard SVG pattern

17. Half Ellipse
background-color:#FF9800;
width:300px;
height:150px;
border-radius:
50%50%00/100%;
http://goo.gl/s3Otoj

18. http://philbit.com/svgpatterns/

19. Simple pie chart
http://goo.gl/U2uDnb

20. .pie{
background:#ddd;
background-image:linear-gradient(...);
border-radius:50%;
&::before{
background-color:inherit;
border-radius:0100%100%0/50%;
transform:rotate(.1turn);
}
}
http://goo.gl/iIXJOK
Pie Chart CSS

21. Irregular drop shadows

22. img{
-webkit-filter:drop-shadow(10px31px
11pxrgba(0,0,0,.2));
filter:drop-shadow(10px31px11px
rgba(0,0,0,.2));
}
Filter drop shadow
http://goo.gl/uRG45y

23. Other secrets
http://lea.verou.me/more-css-secrets/
http://lea.verou.me/css3-secrets/

24. THANKSpriscilacng