Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 Magic

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Bermon Painter Bermon Painter
March 10, 2012
Programming
6
730

CSS3 Magic

A quick rundown of some of the new features in CSS3. Notes here: https://gist.github.com/2011288

Avatar for Bermon Painter

Bermon Painter

March 10, 2012
Tweet

More Decks by Bermon Painter

See All by Bermon Painter
Behavioural Science + Product Innovation = ❤️
Avatar for Bermon Painter bermonpainter
0
520
Haciendo una inmersión profunda con el JAMStack y Vue.js
Avatar for Bermon Painter bermonpainter
0
340
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
Avatar for Bermon Painter bermonpainter
0
300
Design Thinking: Ideas to Implementation
Avatar for Bermon Painter bermonpainter
0
660
Product Development with Vue.js and a Headless CMS
Avatar for Bermon Painter bermonpainter
0
420
Successfully Hire, Mentor, Retain and Lead Teams
Avatar for Bermon Painter bermonpainter
2
380
Crafting Successful UX Strategies
Avatar for Bermon Painter bermonpainter
0
1.3k
The Fallacy of Digital Transformation
Avatar for Bermon Painter bermonpainter
0
480
Design Thinking: Ideas to Implementation
Avatar for Bermon Painter bermonpainter
3
1.5k

Other Decks in Programming

See All in Programming
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.8k
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
1
140
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
280
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
550
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
770
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
250

Featured

See All Featured
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
680
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
490
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
450
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
250

Transcript

  1. CSS3 MAgic Saturday, March 10, 12

  2. GRaceful degradation Saturday, March 10, 12

  3. Progressive enhancement Saturday, March 10, 12

  4. 1. Content Saturday, March 10, 12

  5. 2. Presentation Saturday, March 10, 12

  6. 3. INTERACTIONS Saturday, March 10, 12

  7. New Selectors Saturday, March 10, 12

  8. Sibling Selector h1 ~ p Saturday, March 10, 12

  9. Attribute Selector img[src^=icon] Saturday, March 10, 12

  10. Attribute Selector img[src$=png] Saturday, March 10, 12

  11. Attribute Selector img[src*=document] Saturday, March 10, 12

  12. Psuedo Classes div:empty Saturday, March 10, 12

  13. Psuedo Classes :enabled, :disabled, :checked Saturday, March 10, 12

  14. Psuedo Classes p:first-of-type Saturday, March 10, 12

  15. Psuedo Classes li:last-child Saturday, March 10, 12

  16. Psuedo Classes strong *:not(span) Saturday, March 10, 12

  17. Psuedo Classes :nth-child(3n) Saturday, March 10, 12

  18. Psuedo Classes p:nth-of-type(3n) Saturday, March 10, 12

  19. Psuedo Classes p:nth-last-child() Saturday, March 10, 12

  20. Psuedo Classes p:nth-last-of-type() Saturday, March 10, 12

  21. Psuedo Classes p:only-child Saturday, March 10, 12

  22. Psuedo Classes p:only-of-type Saturday, March 10, 12

  23. Psuedo Classes ::selection Saturday, March 10, 12

  24. Psuedo Classes :target Saturday, March 10, 12

  25. New CSS3 Declarations Saturday, March 10, 12

  26. Declarations background-clip Saturday, March 10, 12

  27. Declarations background-size Saturday, March 10, 12

  28. Declarations background-image (multiples) Saturday, March 10, 12

  29. Declarations border-radius Saturday, March 10, 12

  30. Declarations box-shadow Saturday, March 10, 12

  31. Declarations columns & grids Saturday, March 10, 12

  32. Declarations opacity Saturday, March 10, 12

  33. Declarations resize Saturday, March 10, 12

  34. Declarations text-overflow Saturday, March 10, 12

  35. Declarations text-shadow Saturday, March 10, 12

  36. EXAMPLES https://gist.github.com/2011288 Saturday, March 10, 12