This Week in CSS—December 9, 2013

HTML & CSS
1

Here are some nice links that we’ve gathered for you this week:

Articles

The Ultimate Flexbox Cheatsheet is a very handy overview—with examples—of how Flexbox works, so it’s worth looking through and bookmarking.
This Codrops article on creating textured text is handy and has an inspiring demo.
MCSS is yet another way to organize your CSS.
Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout.
Bring a touch of progressive enhancement to your use of CSS3 by cutting down on vendor prefixes. Do you agree with this approach? (It certainly echoes how I’ve been feeling of late.)
Here’s a nice, short tip for using unicode to create your CSS glyphs.
Chris Coyier presents some methods for creating Multi-Line Padded Text. (@Paul_O_B has posted at least one nice solution to this in the past, but I couldn’t find it. It would be interesting to compare it, though, or add it to the list!)
If you have (or haven’t) been following the various proposed solutions to responsive images, here’s a handy An introduction to srcset, which is one of the options.
Dudley Storey presents a rather nice article on creating angled navigation in pure CSS.
Here’s an interesting article on Creating shapes in CSS. (It’s written in German, so if your tongue doesn’t wag in that vein, you can either use Google translate in Chrome or just read the CSS, as it’s pretty self explanatory.)
Have a butcher’s hook at the cool things you can do with text shadow in Moonlighting with CSS text-shadow.

Video

Lea Verou presents another 10 things you may not know about CSS

Demo

A CSS-only Clock.
A CSS Rabbit. (Because you can, I guess.)
Hoverlogo (best in firefox :x … well, it is experimental).
Linked to above, but why not again … as it’s so cool: Animated opening type.

Tools

Colorpeek: A Simple Way to See and Share CSS Colors
SpriteCow, another Sprite Generator .

Resources

185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets is a handy resource that’s worth checking out.
Here is a list of 10 CSS gradient generators that you may find handy.

A bit of cheek

And once again, some lighthearted tips for the week, courtesy of @H9RBSjs …

Did you know that you can draw a picture using only CSS3 shadows? This according to the latest issue of What’s Useless in Web Development.

source

Important reminder: If you run a web design business out of a rat-infested apartment, you’re not allowed to refer to it as a “studio”.

source

[rule=100%]orange[/rule]

Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue. :slight_smile:

You can also view a list of previous posts here.

2

We had one version in the thread here but the requirements were slightly different. There was another thread but I couldn’t find it but I do have some of the examples.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.linewrap {
	color:#fff;
	position:relative;
	border-left:20px solid #000;
	line-height:36px;
	width:50%;
}
.linewrap span {
	background:#000;
}
.linewrap b {
	color:#fff;
	position:relative;
	left:-10px;
	padding:0 10px 0 0;
}
</style>
</head>
<body>
<h1 class="linewrap"><span><b>This is some text that will wrap to another line where needed but the background only follows the text</b></span></h1>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.linewrap {
	color:#fff;
	position:relative;
	border-left:20px solid #000;
	width:50%;
	font-size:32px;
	line-height:38px;
}
.linewrap em {
	position:relative;
	font-style:normal;
	background:#000;
}
.linewrap span {
	position:relative;
	left:-20px;
	border-bottom:1px solid #fff;
	border-top:1px solid #fff;
}
.linewrap b {
	color:#fff;
	position:relative;
	padding:0 10px 0 0;
	background:#000;
	left:10px
}
</style>
</head>
<body>
<h1 class="linewrap"><em><span><b>This is some text that will wrap to another line where needed but the background only follows the text</b></span></em></h1>
</body>
</html>
3

That’s a nice article on CALC but that actual example could be done simpler without Calc presently.

No change to the html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.container {
	background: #EEEEEE;
	color: #EEEEEE;
	margin-top: 2.5em;
	text-transform: uppercase;
	display:table;
	width:100%;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	border-spacing:2.5em;
}
.content, .sidebar {
	background: #8AC233;
	padding:0 1.25em;
	color:#fff;
	min-height:300px;
	display:table-cell;
	height:300px;
	vertical-align:middle;
}
.sidebar {
	background:red;
	width:12.5em
}
</style>
</head>

<body>
<div class="container">
		<div class="content">Content IE8+ only</div>
		<div class="sidebar">Sidebar</div>
</div>
</body>
</html>

Some of CSS3 is great but don’t forget about css2.1 as sometimes it can do what you want with less code and in a more robust way. :slight_smile:

Although I think calc is great for having subtracting or adding mixed units (but don’t forget box-sizing will do similar in some cases and works back to ie8).

Calc is great and will be very useful though and as the article has shown you can provide suitable fallbacks.

4

Thanks Paul. I was sure I had bookmarked that thread or kept copies of the code, but couldn’t find them anywhere. :slight_smile:

Hehe, yes, as I read that example I was thinking that it’s not exactly an unsolved problem or anything. Still, a useful example of what calc() can do, as I’ve never used it before.