SitePoint Sponsor

User Tag List

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

    This Week in CSS—November 25, 2013

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

    Articles

    Which CSS colour system to use.

    Another article on Responsive email templates, this one including a framework for creating emails.

    If you are reluctant to check out a CSS preprocessor like Sass, perhaps this Why Use Sass intro by Dan Cederholm will inspire you. It's the first chapter of his new A Book Apart book.

    If you want to brush up on the CSS box model, and how it's affected by the new box-sizing property, you might find this article on the box model useful.

    There have been lots of links to responsive image articles of late, and here's another! Chris Coyier discusses Why Responsive Images Is So Hard.

    Vertical Percentages in CSS

    Karen McGrane reminds us that Responsive Design Won’t Fix Your Content Problem

    Resources

    If you are trying to get into Flexbox, you might find this Ultimate Flexbox Cheat Sheet helpful.

    There are so many CSS frameworks out there, it's both hard to keep track of them all, and hard to remember what each is good for, what (if any) preprocessor it uses, etc. Here's a handy table outlining some of the most popular frameworks and their features.

    Demos

    Creating a cool dashed background (Note: the CSS uses the Sass syntax, so it will look strange if you're not into that. You can still view source in your browser to see the real CSS, though.)

    Frosted Glass effect with CSS and SVG

    Heck, why not: recreate the James Bond intro sequence in CSS! (Apparently best viewed in Chrome or Firefox.)

    Just because they can, I guess ... Here's an old fashioned Mac Plus, created in CSS alone. (Article about it here.)

    CSS stopwatch.

    Interesting News

    Here are the results of a recent Twitter poll by Lea Verou, gauging how many developers still test they layouts in IE8. The results are quite astounding.

    Goof time

    OK, not CSS stuff, but if you want some light entertainment, check out What Rhymes with Hug Me?, or if you need something more intellectual, check out this awesome Bohemian Gravity video explaining string theory—to some familiar chords of Queen:






    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
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Just wanted to drop by and say how much I enjoy these CSS roundups. They're fantastic, Ralph!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Just wanted to drop by and say how much I enjoy these CSS roundups. They're fantastic, Ralph!
    Thanks Maleika! It's nice to see you around. Glad someone finds them useful.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,151
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Glad someone finds them useful.
    I confess I haven't looked at the "useful" stuff yet, but the String Theory video is just wonderful. Thank you for that alone.

  5. #5
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    The ThisWeekInCSS topics are always uploading my curiosity battery too.

    This time after reading the article "Vertical Percentages in CSS": "That I've to see with my own eyes!"


    _______
    I'm afraid I don't have enough time to read all other links before the next ThisWeekInCSS is falling in the forum.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    The ThisWeekInCSS topics are always uploading my curiosity battery too.

    This time after reading the article "Vertical Percentages in CSS": "That I've to see with my own eyes!"


    _______
    I'm afraid I don't have enough time to read all other links before the next ThisWeekInCSS is falling in the forum.
    Nice little article Francky

    We (Tommy and I) documented a lot of the bugs you mention with percentage margins some years ago in the Sitepoint reference.
    Note that even for the top and bottom margins the percentage value will refer to the width of the containing block.

    If the containing block’s width depends on the element to which percentage margins are applied, the resulting layout is undefined in CSS2.1. More verbosely this would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has margin expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent's width to compute its margin (and hence its dimensions).
    The IE specific bugs that you noticed are then listed underneath.

    A neat trick with vertical percentage margins is that you can create perfectly square boxes (if you wanted - perhaps for a series of background images).

    e.g.
    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">
    .fl {
    	float:left;
    	width:20%;
    	background:red;
    	margin:10px;
    }
    .fl:after {
    	content:"";
    	display:block;
    	margin-top:100%;
    }
    </style>
    </head>
    
    <body>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
    </body>
    </html>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Francky. A lot to digest there. I love the square box example too, Paul.

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    We (Tommy and I) documented a lot of the bugs you mention with percentage margins some years ago
    Ah, I see.

    Quote Originally Posted by Paul O'B View Post
    perfectly square boxes
    Yes, beautiful!
    If the normal margin is also a percentage, you can get a zoomable polka dot background.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    If the normal margin is also a percentage, you can get a zoomable polka dot background.
    I'm seeing spots before my eyes

  10. #10
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Freakin' out on dots? auto-zooming-polka-dots.htm *)
    (WARNING: not for people with a predisposition to epilepsy.)

    BTW: For me the difficulties arise, when I try to get beautiful horizontal and vertical centered text in the percentage made squares.

    ____
    *) In the webkit browsers (Chrome, Opera, Safari) the rotation doesn't work. In Firefox and IE11 it's alright.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    Freakin' out on dots? auto-zooming-polka-dots.htm *)
    (WARNING: not for people with a predisposition to epilepsy.)
    My eyes !!

    BTW: For me the difficulties arise, when I try to get beautiful horizontal and vertical centered text in the percentage made squares.
    You'd probably need the display:table routines with extra 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">
    .fl {
    	float:left;
    	width:20%;
    	background:red;
    	margin:10px;
    	position:relative;
    	text-align:center;
    }
    .fl:before {
    	content:"";
    	display:block;
    	width:1px;
    	height:1px;
    	margin:100% 0 0 -1px;
    }
    .fl div {
    	margin:0;
    	position:absolute;
    	left:0;
    	top:0;
    	right:0;
    	bottom:0;
    }
    .fl p {
    	display:table;
    	width:100%;
    	height:100%;
    	margin:0;
    }
    .fl  span {
    	display:table-cell;
    	padding:10px;
    	vertical-align:middle;
    	line-height:1.0;
    }
    </style>
    </head>
    
    <body>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    <div class="fl"><div><p><span>Some text</span></p></div></div>
    <div class="fl"><div><p><span>Some text<br>more text</span></p></div></div>
    </body>
    </html>

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Francky View Post
    *) In the webkit browsers (Chrome, Opera, Safari) the rotation doesn't work. In Firefox and IE11 it's alright.

    You need the webkit prefix in the -webkit rules here:
    Code:
    @-webkit-keyframes pulsor {
    	0%   { width:100%; margin-left: 0; padding-top: 100px;}
    	60%  { -webkit-transform: rotate(0deg);} 
    	75%  { -webkit-transform: rotate(360deg);}
    	100% { width:300%; margin-left: -100%; padding-top: 0; -webkit-transform: rotate(0deg); }
    	}
    That should rotate in webkit now

  13. #13
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You need the webkit prefix in the -webkit rules:
    ...
    That should rotate in webkit now
    Thanks, I forgot them. Updated!

    =======
    BTW: For me the difficulties arise, when I try to get beautiful horizontal and vertical centered text in the percentage made squares.
    I really didn't expect that somebody we all know would interpret this as a question.
    Quote Originally Posted by Paul O'B View Post
    You'd probably need the display:table routines with extra html.
    Code:
    ...
    But fabulous!
    I tried it almost in the same way with extra html elements and display:table / display: table-cell, but the square dimensions and the percentages jumped to all sides, and mostly the opposite way as I intended! The .fl:before instead of .fl:after did the trick.

  14. #14
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,819
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    I was impressed with the way this page changes when zoomed on a tablet:

    http://tech.small-improvements.com/2...larjs-screens/


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
  •