frontend 2010 beautiful design is all about the details
DESCRIPTION
TRANSCRIPT
![Page 1: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/1.jpg)
BEAUTIFUL DESIGNis all about the details
NICK LA
@nicklandesign-studio.com
![Page 2: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/2.jpg)
ABOUT ME
![Page 3: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/3.jpg)
N.Design Studio IconDock Best Web Gallery Web Designer Wall Themify
![Page 4: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/4.jpg)
![Page 5: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/5.jpg)
B E A U T I F U L
=
FINE DETAILS
+GREAT USER EXPERIENCE
![Page 6: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/6.jpg)
WORK #1
![Page 8: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/8.jpg)
INTRO BOX
![Page 9: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/9.jpg)
VARIOUS HEADERS
![Page 10: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/10.jpg)
POST TYPE ICONS
![Page 11: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/11.jpg)
OUT OF THE BOX
![Page 12: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/12.jpg)
NAVIGATION MINI ICONS
![Page 13: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/13.jpg)
HEADER / BREADCRUMB
![Page 14: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/14.jpg)
WORK #2
![Page 16: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/16.jpg)
SMILE
![Page 17: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/17.jpg)
POST NOTES
![Page 18: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/18.jpg)
CUTOUT EFFECT
![Page 19: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/19.jpg)
AGAIN, OUT OF THE BOX
![Page 20: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/20.jpg)
PIXEL DETAILS
![Page 21: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/21.jpg)
HOMEPAGE FEATURE BOX
![Page 22: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/22.jpg)
TOP BAR
![Page 23: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/23.jpg)
FORM FIELDS
![Page 24: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/24.jpg)
WHITE SPACE ISSUES
![Page 25: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/25.jpg)
QUICK SOLUTION: BORDER
![Page 26: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/26.jpg)
CONTRAST ISSUES
![Page 27: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/27.jpg)
CSS3 TRICK: BOX-SHADOW
![Page 28: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/28.jpg)
HOWEVER, NOT CROSS-BROWSERS
![Page 29: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/29.jpg)
SOLUTION: GRADIENT PNG
![Page 30: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/30.jpg)
![Page 31: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/31.jpg)
FINAL RESULT
![Page 32: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/32.jpg)
CSS3 ENHANCEMENT
![Page 33: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/33.jpg)
COMMONLY USED
CSS3 PROPERTIES
• RGBA
• Border-radius
• Box-shadow
• Text-shadow
![Page 34: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/34.jpg)
RGBA
![Page 35: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/35.jpg)
RGBA BORDER
![Page 36: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/36.jpg)
BORDER-RADIUS
![Page 37: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/37.jpg)
BOX-SHADOW
![Page 38: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/38.jpg)
HOVER BOX-SHADOW
![Page 39: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/39.jpg)
TEXT-SHADOW
![Page 40: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/40.jpg)
JAVASCRIPT ENHANCEMENT
![Page 41: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/41.jpg)
HOVER
![Page 42: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/42.jpg)
TABS
![Page 43: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/43.jpg)
SLIDE OPEN
![Page 44: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/44.jpg)
SLIDER
![Page 45: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/45.jpg)
MODAL BOX
![Page 46: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/46.jpg)
EXAMPLES
![Page 54: Frontend 2010 beautiful design is all about the details](https://reader033.vdocument.in/reader033/viewer/2022051412/54c831a44a7959986d8b4590/html5/thumbnails/54.jpg)
THANK YOU ☺