background preloader

Design / Web design

Facebook Twitter

CSS - the "display" property. Display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline. A block element is often called a block-level element. An inline element is always just called an inline element. div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.

Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more. inline span is the standard inline element. None Another common display value is none. This is different from visibility. You found me! Other display values There are plenty of more exotic display values, such as list-item and table. Extra credit As I mentioned, every element has a default display type. "Old" Flexbox and "New" Flexbox. Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years.

Changes both to the spec and what browsers have implemented. How To Tell If you Google around about Flexbox, you will find lots of outdated information. Here's how you can quickly tell: If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox. If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011. If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification. Examples of Outdated Stuff All this stuff was fantastic at the time it was created, but now is outdated: Support Demo Example of OLD syntax Share On.

4 essential rules of effective logo design. A logo is an essential part of your company brand. It works together with elements such as your website, collateral, brand promise, and marketing efforts to set the tone for your company as a whole in the public arena. And while this sounds simple enough, many logos tend to overshoot or fall short. Let’s see if your logo makes the grade and consider four essential rules for successful logo design. Test Your Logo Before sharing the rules of logo design, let’s start out by grading the latest logo you’ve created. Spend a minute and answer the 14 questions below (you can do it in your head): Get one point for each “yes” below Does your logo work horizontally?

Subtract one point for each “yes” below Do you use more than two colors in your logo? Scoring <0 = Don’t even think about it1-4 = Acceptable for a $50-million-a-year company5+ = Great job! Regardless of how you did, rest assured there are always ways to get better. Brand vs. logo So what part does your logo play in your brand? 1. 2. 3. 4. HTML5 Rocks - A resource for open web HTML5 developers. A Non-Designer's Guide to Typefaces and Layout. Learn CSS Layout. Developer Network.