CSS Value Lengths, Times, Frequencies and Angles. Many of the property values are keywords unique to that property. But for some properties, the values can include length, frequency or time values or units. In this article we go over all the math type units that can be applied as property values in CSS. CSS Length Values In terms of lengths, there are both relative and absolute lengths. Here is a quick summary of all of the length value types The most common value types in CSS include pixels and percents. Pixels can be considered both a relative and absolute. Images, such as jpeg photos and gifs have an absolute width and height, defined in pixels.
Angles, Times and Frequencies: With some of the new CSS3, such as transforms and animations, length units do not suffice. Originally, all of the above units, frequencies and times, other than the new ‘turn’ unit, were introduced as aural values. Times are specified in ms (milliseconds), or s (seconds). CSS Angle Measurement Angle measurement types include degrees, grads, rads and turns.
Degrees. Desideratum | iPad Orientation CSS (Revised) Revisit Hardboiled CSS3 Media Queries. Hardboiled CSS3 Media Queries is a very good boilerplate made by Andy Clarke, and it’s modified and included in Mobile HTML5 Boilerplate beta. Part of it uses 480px as max-device-width: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) and (max-device-width: 480px) { /* Styles */ } A recent mobile development makes me think maybe this has to be tweaked.
HTC Desire HD skips this rule, it has an unusually large screen. The resolution is 480 x 800. To confirm if my guess was right, I did an alert: Bingo! /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 569px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) and (max-device-width: 569px) { /* Styles */ } Hope this helps! Controlling width with CSS3 box-sizing. An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not.
This is useful since it makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths. The box-sizing property takes two values: content-box: the normal CSS model where an element’s width and height only apply to its content area and do not include padding or borders border-box: the “IE box model”, used by Internet Explorer in quirks mode, where width and height determine the width and height including padding and borders A form layout example I’ll use a form layout example to illustrate. Putting those two input + label combos (I’ll refer to these as columns from now on) on a single row is easily accomplished by floating them. The problems. My New Best Friend: CSS Generated Content. I’ve become obsessed with generated content lately.
In an effort to use fewer and fewer images, I’ve started to use generated content more since more browsers support it (IE8+, FF3+, Safari 4+, Chrome 4+). The following are a couple of examples I have built for a project to streamline my pages. Triangles in CSS? This is a really zoomed in view of the design; the tricky part was the little triangle shadow on the right hand side. Instead of adding an additional element and using an image, I just used generated content and a little bit of CSS trickery. All I needed to create was a triangle with CSS, which is pretty easy to implement using borders. View Demo Be Creative with Characters Smiley The design called for a smiley or frown face to denote whether the item was in stock.
View Demo Arrows No background image needed here; there is an arrow character we can use. View Demo Tricky Shadows This one was tough. View Demo Conclusion. Wrapping Long URLs and Text Content with CSS. To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags): See demonstration Explanation By default, the white-space property is set to normal. So you might see something like this when trying to force long URLs and other continuous strings of text to wrap: To force long, continuous strings of text to wrap within the width of our <pre> content (or other block-level element, such as <div> and <p>), we need a different value for the white-space property. Normal – Default value for the white-space property. In a perfect world, we could simply use white-space:pre-line, like so: Although the white-space property is supported by all major browsers, unfortunately many of them fail to apply the property to long strings of continuous text.
The comments included in the CSS solution explain which declarations are targeting which browsers. Introduction to CSS Escape Sequences | Mert TOL. Regardless of where they appear, string values in CSS behave in a similar way. The most important thing to remember about them is that they are not HTML. This means, for instance, that inserting literal angle brackets without escaping them as HTML entity references (< and >) is perfectly legal. In other words, the rule: would result in a pseudo-element whose contents are the five characters (including spaces) < and not a broken HTML start tag. Similarly, this rule: results in a pseudo-element whose contents are the four characters < and not an HTML-escaped lessthan glyph. This tells us that the < and & characters are not treated specially by CSS string parsers, even though they are characters with special meaning in SGML-derived languages like HTML and XML.
Within CSS strings, the only character with any special meaning is the backslash (\). When a CSS parser reads the declaration in this rule, it thinks that the backslash is the start of an escape sequence, and so it ignores it. How to avoid common CSS3 mistakes | Mobile. Yes, you should be using CSS3 today. Let's skip right past that whole discussion and start talking about how we can write better CSS3. A lot of the new features of CSS3 are just plain more complicated. They have complicated syntaxes. We have to use strange "vendor prefixes" to get them to work in as many browsers as we can.
We have to understand cross browser inconsistencies and stay on top of evolutions. Said another way, there is a lot more stuff for us to screw up. Leaving Out Vendor Prefixes A "vendor prefix" is an add on to the beginning of a CSS property to make it specific to a browser rendering engine. For the CSS3 property "transform", there is a Mozilla prefix, `-moz-transform`, for browsers like Firefox, SeaMonkey, and Camino. Not all of those four prefixes are supported for every single CSS3 property. Don't do this: Do them all! It's easy to forget or be lazy about adding every single prefix. Not Listing the Non Prefixed Property Last Not Staying Up To Date Using Bad Formatting.
When and How to Visually Hide Content. Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). For screen reader users, situations where the need arises include: Labeling a form element that has meaning conveyed visually, but not otherwise, such as inputs for search and phone number area code. Providing headings where related content has meaning conveyed visually, but not otherwise, such as a menu.Hiding “skip-to” links—anchor links which jump over large blocks of content on a page. Note that visually hiding content is a separate concept to content which is completely hidden purposely, a technique which can be designed for all users.
Classic Method For years, a widely implemented and accepted method for hiding content has been used. Rotating Feature Boxes. This is what we're going to build: The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation. View Demo Download Files The Interesting Part All the animation is CSS3 transitions.
JavaScript only watches for the clicks and applies and removes classes as needed. Why not use JavaScript for the animations as well and get wider browser support? As more time passes, more and more animations will be relegated to CSS and away from JavaScript libraries. We'll give ourselves a semantic wrapper, which also provides the relative positioning context for all the blocks. Each block has a subtitle which is viewable only when non-active and another div wrapper containing everything to be displayed when the block is active. Set up the wrapper and context: Unique styling to any of the blocks can be done through ID: jQuery All Together Now Share On. Creating a modern modal with CSS. Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment Modal experiment updated for Firefox 10 which has better transform, transition and animation performance.
Also supports 3D transforms. In this experiment, clicking an ‘open’ link pops up a dialogue with a smooth hardware accelerated bounce (where supported). When open all other elements on the page are non-clickable. Closing the modal is also animated, with a minimise effect. Of course, using images and JS will only make the modal better, and something like hitting ESC to close will never be reproduced in CSS.
How to The :target pseudo-selector changes the style of a targeted element. The modal is two parts, one part container, one part content. The content is positioned roughly in the middle and is prettified with a sprinkling of text shadow, border radius, box shadow and gradient. Caveats. Different Transitions for Hover On / Hover Off. In other words, "Different transitions on mouseenter and mouseleave" as those are the DOM events that happen, but we're not using JavaScript here, we're talking about CSS :hover state and CSS3 transitions.
Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates. This is a simple trick. You set transitions on both states, like this: When you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. And now, here an offensively lame examples that you should never use: View Demo Share On. Bokeh with CSS3 Gradients. Ever since Lea Verou mentioned about the possibilities of CSS3 Gradients, I have been using them in various shapes and sizes as a replacement for background images. I recently worked on a project which uses a bunch of circles as a decorative background. gf3 suggested that the circles would look much better like bokeh. Today, I finally got down to creating them. Result Design of the Bokeh I referred to some pictures of bokeh, and these were their defining characteristics: There should be groups of circles with same color (each circle outlined with the more opaque version of the fill).
In each group, circles are close to each other. Implementation Here is how a single “tile” looks like: The black background is the size of the “tile”, set by background-size property (the grey area is where our circles spill over). Then, we use background-position to offset them into places we want. By using background-repeat, we can repeat our bokeh across the screen!
Update. Quick Tip: Nonintrusive CSS Text Gradients. CSS Border Tricks with Collapsed Boxes. These tricks will help you achieve designs without resorting to the use of images, CSS3 gradient or extraneous markup. By collapsing boxes with zero line-height and height values, we can display content outside of the content box, over borders. Bi-color background This example does not include IE 6/7 workarounds (check the source code of this demo page for IE fixes). Dots and pipes between list items This example shows properly across browsers after some simple IE fixes. Left and right-pointing triangles IE 6 and border transparency IE 6 does not support the keyword "transparent" for border color. The font-size declaration is another workaround for IE 6. Stop the presses! The magic [to create border transparency in IE] is to set ‘border-style’ to either dashed or dotted That’s it! Flexible height vertical centering with CSS, beyond IE7.
One of the most common CSS questions is undoubtedly how to center an element vertically. There are several techniques for doing that, but many, including one that I posted more than seven years ago in Centering with CSS, rely on specifying a height for the centered content. That obviously makes the technique somewhat inflexible. I recently needed to center something both horizontally and vertically and started thinking that there might be better ways of doing it if I could disregard IE7 and older. The technique I ended up with uses display:table to center the whole page and seems to work well, though there is one caveat. The HTML The vertical centering demo page I’ve made shows how display:table can be used to center the whole page vertically and horizontally.
<body><div id="body"> Content goes here </div></body> The CSS The CSS isn’t very complicated either. And that’s all there is to it: Flexible height Browser support CSS tables are not HTML tables display:table and screen readers. Coding up a semantic, lean timeline. 14 March, 2011 I absolutely love coding up the more semantic aspects of a build. Usually forms and tables, it’s these massively semantic (read; lots of elements with very specific jobs) that I really love coming up against.
They’re not all that challenging, but they’re very fun (to me at least--is that sad?!) After Séan shared the Financial Times’ timeline I got to wondering how I’d code my own (albeit massively more simple) timeline. This is what I came up with: HTML/CSS timeline. The markup The markup is amazingly simple. I was initially marking the dates up as <b>s but as Mark pointed out I could use the new HTML5 <time> element. The CSS As far as basic styling goes, I won’t insult your intelligence; I merely set some type styles and background colours on the list items. The really interesting bits are the odd/even styling, the ‘spine’, the dot and arrow ‘images’ and the branches off the centre of the timeline. The spine The arrow and dot The branches Odd/even styling CSS feature detection?
Flexible height vertical centering with CSS, beyond IE7. Demo: CSS drop-shadows without images. Natural Object-Rotation with CSS3 3D | eleqtriq. Firefox 4 Demos: Awesome CSS3 Planetarium. Creating a sphere with 3D CSS. CSS3 Progress Bars. Apple Keyboard made via css3. CSS3 3D Hologram. The Cicada Principle and Why It Matters to Web Designers. Powerful New CSS Techniques and Tools.