Media Queries Demystified: Min-Width and Max-Width. Having conditional confusion? Ever since 2011, when we started testing media queries for mobile devices, I've had difficulty remembering how the min-width and max-width conditional statements operate. Even to this day, I have to slow down, and repeat in my head what they actually mean because frankly, I find their naming convention to be very unintuitive.
In this article, I'll attempt to break it down in a way that's simpler to understand. Min-Width @media only screen and (min-width: 330px) {...} Here's what that actually means: "If [device width] is greater than or equal to [specified #], then do {...} " So if the actual "device width" is 320px this condition will return false. "If 320px is greater than or equal to 330px, then do {...} " It would become true if you use a min-width value equal to or less than 320 as shown below: In the sample above, the red text is returning 'true', the black text is returning 'false'.
Max-Width @media only screen and (max-width: 330px) {...} Translates to: Comments. Bounce.js. Animate.css. CSS Selectors Reference. How nth-child Works. There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it: What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. As seen in the first example, nth-child also accepts expressions in between those parentheses. Let's get back to the "3n+3" from the original example though. . (3 x 0) + 3 = 3 = 3rd Element (3 x 1) + 3 = 6 = 6th Element (3 x 2) + 3 = 9 = 9th Element etc.
How about the :nth-child(2n+1)? (2 x 0) + 1 = 1 = 1st Element (2 x 1) + 1 = 3 = 3rd Element (2 x 2) + 1 = 5 = 5th Element etc. Hey wait! (3 x 0) = 0 = no match (3 x 1) = 3 = 3rd Element (3 x 2) = 6 = 6th Element (3 x 3) = 9 = 9th Element etc. So as you can see, the matches are exactly the same, no need for the "+3". Browser Compatibility Still not getting it? Share On. 12 Fun CSS Text Shadows You Can Copy and Paste. Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Basic Shadow The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! However, as far as I can tell, IE support, even up through IE9, is zilch.
However, using tools like Modernizr will help you pull off advanced CSS3 effects even in silly old IE. Syntax The syntax for creating a simple text-shadow is shown below. Text-shadow: horizontal-offset vertical-offset blur color; Putting this into action, here’s an example with a shadow that has been moved down two pixels and right four pixels with a three pixel blur and a color of black at 30% opacity. Selectutorial: CSS selectors. Selectutorial - CSS selectors Selectutorial - CSS selectors Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.
Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout. Rules The document tree - it's a family thing Selectors Advanced stuff Selectors in action - a step by step tutorial Max Design Feeds Recent articles Popular articles Other Max Design articles and presentations Associated with webstandardsgroup.org. What is appropriate ordering of css selector? eg p.class or .class p. Responsive Data Tables. In addition to the techniques below, see this roundup of additional explorations of this problem. Garrett Dimon: Data tables don’t do so well with responsive design. Just sayin’. He has a good point. Responsive design is all about adjusting designs to accommodate screens of different sizes. So here’s what we are gonna do… We’re going to use “responsive design” principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table.
We’re being good little developers and using Plain Ol’ Semantic Markup here for our table. <table><thead><tr><th>First Name</th><th>Last Name</th><th>Job Title</th></tr></thead><tbody><tr><td>James</td><td>Matman</td><td>Chief Sandwich Eater</td></tr><tr><td>The</td><td>Tick</td><td>Crimefighter Sorta</td></tr></tbody></table> Our regular CSS is nothing special: The small-screen responsive stuff comes in now. Hey what about IE? <! See it View Demo This isn’t perfect… UPDATE: Other ideas View Demo.
Responsive Tables Demo. A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes. Example Code The approach I've presented here assumes you know the index of the columns to be hidden. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.
Flip Scroll This technique was first published by David Bushell (@dbushell). No More Tables. All About Floats. What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them.
Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well.
Clearing the Float The Great Collapse Video.