OpenCamp Dallas

1. User Interface Design
Reflecting what your eyes see in real life
using CSS3

2. “Users said they were more likely to
believe Web sites that looked
professionally designed.”
—Stanford Web Credibility Study

3. UI & UX
• UI (User Interface): The Look & Feel
• UX (User Experience): Ease of Use

4. UI & UX
• UI (User Interface): The Look & Feel
• UX (User Experience): Ease of Use

5. YOU DON’T NEED A CHEF
TO COOK A BUTTON

6. CSS3 Only
Replicate a microwave button
without using any graphic

7. CSS3 Only
Replicate a microwave button
without using any graphic

8. Closer Look

9. Closer Look

10. Closer Look
Lighter
Darker

11. Getting Started
<a href="#" class="button">Cook Me</a>

12. Turning it into a Block
display: inline-block;background:
#ffffff;line-height:
34px;padding: 0 10px;

13. Rounded Corners
border-radius: 17px;

14. Border
border: 1px solid #505559;

15. Gradient
background-image: -webkit-
gradient(linear,left top,left
bottom,color-stop(0,
#c1d5e3),color-stop(1, #9db1c1));

16. Upper inner Light
box-shadow: inset 0 1px 3px #fff;

17. Lower inner Shadow
box-shadow: inset 0 1px 3px #fff,
inset 0 -1px 0 rgba(0,0,0,0.5);

18. Lower outer Light
box-shadow: inset 0 1px 3px #fff,
inset 0 -1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.5);

19. Engraving the Label
font-family: 'lucida grande', arial, sans-
serif;color: #333;font-weight: bold;text-
decoration: none;text-shadow: 0 1px 0 #fff;

20. Pressing the Button

21. Pressing the Button

22. Pressing the Button
Darker

23. Pressing the Button
Normal State Pressed State
box-shadow: inset 0 4px 10px #000,
inset 0 -1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.5);

24. Power of CSS3
• Rounded Corner
• Box Shadows and Inset Shadows
• Gradient
• Text Shadow
Modern Browers:
IE9, Firefox, Chrome, Safari & Opera
(Older browsers + Hacks)

25. CSS Framework?
UI CSS Framework
Cross Browser
Theme-able
Creative Commons
http://www.vitaminui.org/

26. CSS Framework?
UI CSS Framework
Cross Browser
Theme-able
Creative Commons
http://www.vitaminui.org/

27. VitaminUI

28. Thank You
http://www.ekhoury.com
elie@woopra.com
@eliekhoury