Zurui Design Technique - English version

Zurui Design Technique - English version

In less time, less effort, less know-how...
Easy and convenient design tips with Sass and Compass.

Zurui-design gem for Rails by @mah_lab
https://github.com/mahm/zurui-sass-rails
(sample) http://zurui-sample.herokuapp.com/

Japanese version => https://speakerdeck.com/ken_c_lo/zurui-design

4171dc21e29c4ea936d1eb24063bb8b8?s=128

ken_c_lo / TAEKO AKATSUKA

November 02, 2012
Tweet

Transcript

  1. In less time, less effort, less know-how... Zurui Design Technique

    " z u r u i " m e a n s s l y i n J a p a n e s e @ken_c_lo TAEKO AKATSUKA Zur ui De s i g n En g l i s h Ver s i o n
  2. 1 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese freelance, web designer, graphic designer Taeko Akatsuka @ ken_c_lo https://twitter.com/ken_c_lo/ https://twitter.com/ken_c_loE/ http://d.hatena.ne.jp/ken_c_lo/ https://github.com/taea/ http://crow.ly/ ・ Designed "Receibo" http://receibo.heroku.com/ ・ Joined "Forkwell" http://forkwell.com/ ・I ♥ Haml + Sass(.sass syntax) + compass ・I ♥ Dogs , I hope to launch web service about dogs. About me
  3. 2 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Essential "zurui" means sly in Japanese. These design tips for web programmers not good at web design. It's so easy, simple and convenient...
  4. 3 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese USE Sass is more familiar than CSS for web programmers Easy! DRY! Zurui! Essential
  5. 4 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 1 Zurui Line Zurui Design 1 Zurui Line (© @machida)
  6. 5 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese What' s "zurui Line"? Zurui Design 1 Zurui Line It seems like engraved to background image. This is "zurui line" (called by @machida) border-bottom: 1px solid rgba(0, 0, 0, .2); Upper: Brack / alpha 0.2 / 1px Line @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0); Lower: White / alpha 0.3 / 1px Line Yeah! I've seen it.
  7. 6 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Essential - Color : use only brack (rgba(0,0,0,x)) and white(rgba(255,255,255,x)) - Adjust alpha according to background color - line width : 1px - blur : 0 - Not too strong Zurui Design 1 Zurui Line
  8. 7 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese How to use "zurui line" under line of headings, compartment between sections... Zurui Design 1 Zurui Line
  9. 8 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese top bottom left right border-bottom: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3)0 1px 0); border-top: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0 inset); border-left: 1px solid rgba(0, 0, 0, .2); @include box-shadow (rgba(255, 255, 255, .3) -1px 0 0); border-left: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3) -1px 0 0 inset); light source Zurui Design 1 Zurui Line Varied angle of zurui lines
  10. 9 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Adjust alpha according to background color background-color: #333 white: alpha 0.1 @include box-shadow(rgba(255, 255, 255, .1) 0 1px 0); Black: alpha 1.0 border-bottom: 1px solid rgba(0, 0, 0, 1); background-color: #EEE White: alpha 1.0 @include box-shadow(rgba(255, 255, 255, 1) 0 1px 0); Black: alpha 0.1 border-bottom: 1px solid rgba(0, 0, 0, .1); background-color: #B0430B white: alpha 0.2 @include box-shadow(rgba(255, 255, 255, .1) 0 1px .2); Black: alpha 0.2 border-bottom: 1px solid rgba(0, 0, 0, .2); background-color: #FFC300 White: alpha 0.3 @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0); Black: alpha 0.1 border-bottom: 1px solid rgba(0, 0, 0, .1); Zurui Design 1 Zurui Line
  11. 10 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese @mixin line-left($op1: .2, $op2: .3){ border-left: 1px solid rgba(0, 0, 0, $op1); @include box-shadow (rgba(255, 255, 255, $op2) -1px 0 0); } @mixin line-right($op1: .2, $op: .3){ border-left: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2) -1px 0 0 inset); } Use mixin top right left bottom @mixin line-top($op1: .2, $op2: .3){ border-top: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2) 0 1px 0 inset); @mixin line-bottom($op1: .2, $op2: .3){ border-bottom: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2)0 1px 0); } Zurui Design 1 Zurui Line
  12. 11 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 2 Zurui text-shadow Zurui Design 2 Zurui text-shadow
  13. 12 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese text seems like engraved to background background: #333 text-shadow: 1px -1px 0 rgba(0,0,0,1); Upper Right(against light source) black alpha 1.0 / 1px / blur 0 background: #B0430B text-shadow: 1px -1px 0 rgba(0,0,0,.5); Upper Right(against light source) black alpha 0.5 / 1px / blur 0 In case, dark background + white text  Zurui Design 2 Zurui text-shadow
  14. 13 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese In case, light (nearly white) background + dark text  text seems like engraved to background background: #333 background: #FFC300 text-shadow: -1px 1px 0 rgba(255, 255, 255, 1); text-shadow: -1px 1px 0 rgba(255, 255, 255, .4); lower left(forward light source) white alpha 1.0 / 1px / blur 0 lower left(forward light source) white alpha 4.0 / 1px / blur 0 Zurui Design 2 Zurui text-shadow
  15. 14 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Essential - Color : use only brack and white - Adjust alpha according to background color - dark background + white text -> brack shadow against light ↗ - light background + dark text -> white shadow forward light ↙ - line width : 1px - blur : 0 - Not too strong Zurui Design 2 Zurui text-shadow
  16. 15 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Use mixin @mixin ts-000($op : .4){ text-shadow: 1px -1px rgba(0, 0, 0, $op); } @mixin ts-fff($op : .7){ text-shadow: -1px 1px rgba(0, 0, 0, $op); } Zurui Design 2 Zurui text-shadow
  17. 16 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 3 Zurui background Zurui Design 3 Zurui background
  18. 17 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui background patterns Noise Wood Paper Cloth Dot Zurui ! Zurui Design 3 Zurui background
  19. 18 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese ◯ Zurui Design 3 Zurui background Features of useful background patterns - Light colors (nearly white) : light gray, ivory ... - Dark colors (nearly black) : dark gray, dark navy ... - Fine Patterns - Natural materials
  20. 19 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese × Features of useless background patterns - Too large patterns - Too high chroma satulation (too vivid) - Too much difference of brightness between background and pattern They often colide with contents.... Zurui Design 3 Zurui background so difficult to use 'em well
  21. 20 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese The Famous site has many zurui patterns http://subtlepatterns.com/ Zurui Design 3 Zurui background
  22. 21 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese And... you must know... Yes, also this slide design is zurui design. Zurui Design 3 Zurui background text-shadow ! wooden background
  23. 22 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui gray is too light gray nearly white lighter than #EEE #EEE #F8F8F8 Zurui Design 3 Zurui background - Too light gray can be used as white. - Use them with "zurui line" and "zurui text-shadow". - They'll look solid and high-grade, more than real white. #FFF (real white)
  24. 23 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 4 Zurui gradient(gradation) Zurui Design 4 Zurui gradient (gradation)
  25. 24 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese #434343 #2d9fee #48b1f2 #222222 Gradations less difference of brightness. Feels of real materials. Zurui Design 4 Zurui gradient(gradation)
  26. 25 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese × Zurui Design 4 Zurui gradient(gradation) They are useless. gradations too much difference of brightness. so difficult to use 'em well
  27. 26 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese You can make CSS of gradient easy on this site http://www.colorzilla.com/gradient-editor/ Zurui Design 4 Zurui gradient(gradation)
  28. 27 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese switch Sass(SCSS) Zurui Design 4 Zurui gradient(gradation)
  29. 28 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese mixin of gradient : less difference of brightness. @mixin gradient-top-lighten($color : #666, $lighten: 10%){ background-color: $color; @include filter-gradient(lighten($color, $lighten), $color, vertical); @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%)); } - Use like this @include gradient-top-lighten(#222); Gradation lighten top a little Zurui Design 4 Zurui gradient(gradation)
  30. 29 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese mixin of gradient : less difference of brightness. Zurui Design 4 Zurui gradient(gradation) @mixin gradient-top-darken($color : #666, $darken: 10%){ background-color: $color; @include filter-gradient(darken($color, $darken), $color, vertical); @include background-image(linear-gradient(darken($color, $darken) 0%, $color 100%)); } - Use like this @include gradient-top-lighten(#48B1F2); Gradation darken top a little
  31. 30 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 5 Zurui border-radius (rounded corner) Zurui Design 5 Zurui border-radius (rounded corner)
  32. 31 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 5 Zurui border-radius (rounded corner) If only to be rouded corner, they'll be stylish ! But it needs some tricks to use 'em well... Zurui !
  33. 32 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Not to be too large border-radius. less than 6px for example, a boxes of a section. border-radius: 5px - 6px good looking radius size. Zurui Design 5 Zurui border-radius (rounded corner)
  34. 33 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 5 Zurui border-radius (rounded corner) border-radius: 4px border-radius: 2px - 3px Buttons Icons
  35. 34 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese × If you're begginer designer, you'd better do not use too large border-radius. Zurui Design 4 Zurui border-radius (rounded corner) so difficult to use 'em well
  36. 35 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Use Compass. Zurui Design 5 Zurui border-radius (rounded corner) .hoge{ -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .hoge{ @include border-radius(6px); } Zurui !
  37. 36 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui Design 6 Zurui box-shadow
  38. 37 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese × ×Too strong ×Too wide blur ×Colored shadow They are useless box-shadow Zurui Design 6 Zurui box-shadow so difficult to use 'em well Use box-shadow delicately.
  39. 38 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 1 : substitute line - No angle / alpha 0.15 box-shadow - It's useful when both box and background colors are so light color nearly white. @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);
  40. 39 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 2 : blur inset - No angle / inset / wide blur / light shadow - Feels real materials - Use with "zurui background-patterns" - Ribbons, buttons @include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);
  41. 40 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 3 : deboss box border: 1px solid rgba(0, 0, 0, .1); @include box-shadow(rgba(0, 0, 0, .1) -1px 1px 2px inset, rgba(255, 255, 255, 1) -1px 1px 0);
  42. 41 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese @mixin box-deboss($border: .1, $shadow: .1, $highlight: 1){ border: 1px solid rgba(0,0,0,$border); @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 2px inset, rgba(255,255,255,$highlight) -1px 1px 0); } - Use like this @include box-deboss(.15, .2, .7) Zurui box-shadow 3 : deboss box -> mixin Zurui Design 6 Zurui box-shadow
  43. 42 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 4 : emboss box border: 1px solid rgba(0, 0, 0, .15); @include box-shadow(rgba(0, 0, 0, .5) -1px 1px 0, rgba(255, 255, 255, 1) -1px 1px 0 inset);
  44. 43 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese @mixin box-emboss($border: .15, $shadow: .05, $highlight: 1){ border: 1px solid rgba(0,0,0,$border); @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 0, rgba(255,255,255,$highlight) -1px 1px 0 inset); } - Use like this @include box-emboss(.15, .2, .7) Zurui box-shadow 4 : emboss box -> mixin Zurui Design 6 Zurui box-shadow
  45. 44 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button Zurui Design 7 Zurui button
  46. 45 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Make buttons, full use of zurui solutions you knows Zurui Design 7 Zurui button
  47. 46 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button .button-zurui { a $button_color: #48B1F2; display: block; @include ts-000; @include gradient-top-lighten($button_color); @include border-radius(4px); @include box-emboss(.2, .1, .3); color: rgba(255,255,255,.9); text-align: center; padding: 10px; font-size: 20px; line-height: 1em; font-weight: bold; margin: 50px 30px; &:hover @include gradient-top-lighten($button_color, 15%); text-decoration: none; color: rgba(255,255,255,1); } zurui text-shadow zurui border-radius zurui gradient zurui box-shadow hover : gradient -top more lighten 10% -> 15%
  48. 47 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button .button-red{ @extend .button-zurui; $button_color: #b0430a; a @include gradient-top-lighten($button_color); &:hover @include gradient-top-lighten($button_color, 15%); } Change color so easy.
  49. 48 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button Nice Rails gem http://jaredhardy.com/sassy-buttons/
  50. 49 In less time, less effort, less know-how... Zurui Design

    Technique - "zurui" means sly in Japanese Thank you :)