SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)

    This Week in CSS—December 9, 2013

    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 ... 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



    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.

    You can also view a list of previous posts here.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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!)
    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.
    Code:
    <!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>
    Code:
    <!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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    That's a nice article on CALC but that actual example could be done simpler without Calc presently.

    No change to the html:
    Code:
    <!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.

    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul
    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.
    Thanks Paul. I was sure I had bookmarked that thread or kept copies of the code, but couldn't find them anywhere.

    Quote Originally Posted by Paul O'B View Post
    Some of CSS3 is great but don't forget about css2.1
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •