frontend 2010 beautiful design is all about the details
DESCRIPTION
TRANSCRIPT
BEAUTIFUL DESIGNis all about the details
NICK LA
@nicklandesign-studio.com
ABOUT ME
N.Design Studio IconDock Best Web Gallery Web Designer Wall Themify
B E A U T I F U L
=
FINE DETAILS
+GREAT USER EXPERIENCE
WORK #1
INTRO BOX
VARIOUS HEADERS
POST TYPE ICONS
OUT OF THE BOX
NAVIGATION MINI ICONS
HEADER / BREADCRUMB
WORK #2
SMILE
POST NOTES
CUTOUT EFFECT
AGAIN, OUT OF THE BOX
PIXEL DETAILS
HOMEPAGE FEATURE BOX
TOP BAR
FORM FIELDS
WHITE SPACE ISSUES
QUICK SOLUTION: BORDER
CONTRAST ISSUES
CSS3 TRICK: BOX-SHADOW
HOWEVER, NOT CROSS-BROWSERS
SOLUTION: GRADIENT PNG
FINAL RESULT
CSS3 ENHANCEMENT
COMMONLY USED
CSS3 PROPERTIES
• RGBA
• Border-radius
• Box-shadow
• Text-shadow
RGBA
RGBA BORDER
BORDER-RADIUS
BOX-SHADOW
HOVER BOX-SHADOW
TEXT-SHADOW
JAVASCRIPT ENHANCEMENT
HOVER
TABS
SLIDE OPEN
SLIDER
MODAL BOX
EXAMPLES
THANK YOU ☺