Don't like this style? Click here to change it! blue.css
This week has been all about getting used to CSS, learning the basics, getting your hands dirty. For these Friday notes I find myself with so much left that I want to share with you. Here is a list of things which we should talk about:
I also imagined giving you a ton of design recipes that just work today so that you have some sort of designer's palette to play with. If presented in the right way this could be a nice intro to design patterns that are a central theme of this course.
This is clearly too much to do in one lecture in the standard sage-on-a-stage lecture format. So I present to you a CSS smorgasbord. I will link you to online tutorials, demos, documentation, and give some of my own thoughts.
Overview Task 1: Look at each of my offerings and see if you can get a rough sense of what it is all about.
Claim Task 2: Get out a sheet of paper. Pick 5 that seem very useful to you today (could be that they would help you with your project or that they just seem important to you).
Plan Task 3: Check with your neighbors at your table to see what they picked. If it makes sense to, divy up the tasks so that you each have 3 you are responsible for. There are 12 options so a group of 4 might just be able to cover them all. You should spend some time with each at your leisure too.
Master Task 4,5,6: Spend 1 pomodoro each on "mastering" your 3 topics.
Present Task 7: In the last quarter of class present your findings to your teammates. If your team didn't coordinate well then pick a 4th topic to master.
Philosophy of good vs hack. Often CSS tricks are considered hacks. As you see enough of these tricks you'll get an intuitive feel for which is which but here is my take. Try not to mix content and style. Remember the csszengarden which has semantic HTML (the markup describes the textual content of the site) and the visualizing is done entirely with CSS. If you find yourself adding an element to the page just so that a visual trick works then it is a little hacky (but common). If you are adding a class which describes the visual aspects then that is hacky. Another type of hack is when you are using a CSS property which isn't designed to do what you need, but you can't find the "right" way. Many pro designers keep a "shame" folder which has the rules they regret but can't get around for now. That way they are confessing and have a place to start their refactoring.
A large number of the links are from Lea Verou and her amazing CSS Secrets book.
Specs: http://www.w3.org/TR/css-values/
Overview: in our CSS declarations we can use many types of values, often numerical. You should be familiar
with most of these before you put CSS on your resume. In here we have been using pixels 20px and
20% percentage. There are font-relative units which are far more scalable called
ems (also ex, ch, rem). In CSS level 3 they introduced vw, vh, vmin, vmax
which give you a way to do percentages of your viewport (very powerful). Be careful 1vw is 1% of
viewport width.
Example of the power of vw/vh: http://play.csssecrets.io/vertical-centering-vh
Issues to understand: what does the percentage refer to? how does em work? what other constant
units work?
Specs: http://www.w3.org/TR/css3-mediaqueries/
Overview: Media queries allow you to have CSS rules that only apply in certain circumstances (like when printing or when on an unusual screen). The way they are used in designs is to make rules that "kick-in" when your screen is too short, too wide, or in some in-between state. They are a hack used to accomplish "responsive design" and they are what defines the break-points.
Simple example: http://codepen.io/AndyNovo/pen/xGKNLr
Success: win this task by understanding the ways to properly use media queries and then make a design which demonstrates a successful scaling from tiny screen to large screen.
Specs: 6.6 through 7 of http://www.w3.org/TR/css3-selectors
Overview: Pseudo-classes refer to special ways of selecting an element only when it is in certain states. This
allows you to apply CSS rules that only take effect when hovering or a link is visited, etc. Pseudo-elements give
us access to things that HTML can't like first-letter or first-line. But these can also be used to have CSS
generated content that had no markup using ::before and ::after.
Winning: win this task by figuring out the range of pseudo-selectors and finding cool designs that use them to accomplish nice effects. Become convinced of the power here.
Specs: http://www.w3.org/TR/css-transforms-1/
Overview: Transforms allow you to manipulate (with linear algebra or cool keywords) elements on your screen. You can use this to create perspective, 3D feelings, standard 2D shapes, translations around a point, etc. It is a great tool for any toolbox. Combine with transitions/animations for cool effect.
Power demo: http://play.csssecrets.io/parallelograms-pseudo
Mastered: when you understand the full range of transforms that are specified (and browser support for the key ones) and can create a demo which feels 3D.
Specs: http://www.w3.org/TR/css3-images/#gradients
Overview: Gradients let you generate an image in code that can then be used wherever you might need a cool image. The basic gradients are linear and radial and they can both be made "repeating". When used in corner cases gradients can be used to make stripes, circles, even beveled corners for elements.
Demos: http://play.csssecrets.io/subtle-stripes and diagonal-stripes-60deg and gradient show off page
Awesomeness: grasp the difference between repeating and non-repeating, understand how linear works how radial works, make some cool backgrounds like polka-dots.
Take a look at this site: http://simurai.com/archive/buttons/ it uses simple markup and cool CSS to make awesome shapes. Master how this works (for simple examples see: ellipse half-ellipse quarter-ellipse )
You win: when you can make a distinct unusual shape of your own using border-radius
Specs: http://www.w3.org/TR/filter-effects-1/
Overview: Filter effects allow you to process elements, SVGs, and any displayed things before they get drawn. So you can blur or change the color intensity or warp images/elements. This is very powerful (photoshop stuff here) and you should check browser support carefully.
Cool demos are out there, here is one: http://bennettfeely.com/filters/
Victory: when you understand a good wide set of the possible filters, their browser support, and you can create some cool photo effects on both images and elements.
Overview: often you find yourself on a site when you have something pop to the foreground and everything behind it dimmed/blurred/blackened. This isn't a CSS spec but a design trick that you should create at least twice. There are good ways to do this and bad ways to do this.
Good Demos: http://play.csssecrets.io/diming-box-shadow blur-bg
Triumph: when you can find some good and bad examples and understand the weight needed to pull it off in various ways. Of course create your own demo.
Specs: http://www.w3.org/TR/css-flexbox-1/
Overview: flexbox is the cool new way to achieve layouts that were very difficult in the past. You apply the flex display property to the parent div and the setting then dictate how the children will be aligned.
Practical win: Play http://flexboxfroggy.com, hunt down guides, master this thing.
Specs: http://www.w3.org/TR/css3-transitions/ and css3-animations
Overview: transitions allow you to smoothly change CSS property values. This amounts to animation of your page. You can control the speed, easing (linear, steps, ease-in, ease-out, etc), and all of the things that make a movie work. Animations work with keyframes so that you can do things like spritesheets or have fixed points you hit (and/or transition between).
Demos: Spritesheet Animation http://play.csssecrets.io/bounce http://cubic-bezier.com/
Overview: These are little things which we need to see but probably don't take a whole pomodoro. Box-sizing, clearing floats, and CSS-resets.
Box-sizing:
box-sizing: border-box; changes
what width means for a block, now the outside of the border is the width of the element rather than the width of
the content box (which means the screen width is that plus padding and border).
Float clearing. http://www.w3.org/TR/CSS21/visuren.html#floats when
floating elements if we want to stop elements from interacting with the floating div we can use clear:
left (or right or both) to stop messing with the floats.
CSS Resets. This is a trend for web designers to begin their projects with a blank slate by clearing the rules which get set by browsers. This allows you to have the same starting point on all browsers (they will still diverge in which properties they honor from the specs).
Accomplished: Once you understand box-sizing, float clearing, and have found 1-3 decent CSS reset stylesheets you win!
Overview: This is a set of interesting techniques from Lea Verou that I want you to see as they might help you do interesting things with your projects this weekend.
The tricks: http://play.csssecrets.io/bevel-corners-gradients http://play.csssecrets.io/scoop-corners http://play.csssecrets.io/bevel-corners http://play.csssecrets.io/bevel-corners-clipped http://play.csssecrets.io/folded-corner-realistic
How to win: understand the mechanics under the hood of these tricks. Prove to yourself that you understand by tweaking the tricks.