SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)

    This Week in CSS: October 14, 2013

    Here are some nice links that we stumbled across this week:

    Articles

    Kerry Butters posted an interesting article on CSS Regions this week—a pretty cool new tool in the CSS kit. There's another recent article on the topic at Web Designer Depot.

    An interesting alternative to CSS resets is on the way, in the form of ‘all: unset’

    Here's an interesting look at Repeating patterns in CSS with :nth-child and :nth-of-type,

    Demos

    Lea Verou demonstrates how to create trapezoids with 3D transforms.

    Chris Coyier's animated CodePen demo of how to make a triangle in CSS.

    This is rather cool: Build a circular navigation bar with CSS3.

    A simple way to learn some CSS Selectors.

    Tools

    Craig Buckler talks about what's new in Chrome, including the ability to edit and save your CSS files through the browser itself. How much longer will we be using code editors when we can now edit CSS, HTML and JS right in the browser?

    .selfCSS{} is a cool, online WYSIWYG CSS editor. It works on desktop and tablets, so might be a fun way to experiment with CSS and get more of an idea of how it works.

    csste.st is a collection of tools for testing CSS changes across your projects. The site has links to some interesting tools, and is looking for people to help with the project.

    And now for something truly Absurd. How would you like to write your CSS with JavaScript? If that sounds totally absurd, you'd be right. Check out Absurd.js, another CSS preprocessor to rival SASS and LESS.

    Flying Focus is a JS file, but it's pretty interesting from a CSS perspective, too. Watch the focus on elements fly around as you tab around the page.

    Patternizer is a rather cool tool for creating CSS3 patterns.

    This week's feature: PODCASTS

    There are lots of really interesting podcasts out there that focus on the web industry. Here is a selection of them that are worth checking out, particularly if you are interested in front end web design (those with * include transcripts):

    ShopTalk Show, with Chris Coyier and Dave Rupert
    The Web Ahead, with Jenn Simmons (which includes The Web Behind, with Eric Meyer—looking back at the history of the web)
    The Big Web Show, with Jeffrey Zeldman
    Boagword Podcast*, with Paul Boag and Marcus Lillington
    Unfinished Business, with Andy Clarke and Anna Debenham
    Fripfrap, with Divya Manian and Garann Means
    The Gently Mad, with Adam Clark.
    The Non-Breaking Space Show, with Christopher Schmitt, Dave McFardland, Chris Enns.
    The Breaking Development Podcast, with Jim King.
    JavaScript Jabber*, with Charles Max Wood.
    99% Invisible, with Roman Mars and Sam Greenspan.
    BizCraft, with Carl Smith and Gene Crawford.
    The East Wing, with Tim Smith.
    The PageBreak podcast, with Niki Brown and Liz Andrade.
    The Industry, with Adam Stacoviak, Drew Wilson, and Jared Erondu.
    This Developer's Life, by Rob Conery and Scott Hanselman.
    The UX Mastery Podcast*, with Luke Chambers and Matthew Magain.

    There are lots more podcasts out there. If you have one to add to the list, let us know in the comments. If you have a favorite, tell us about it!

    Tips of the Week

    And lastly, some lighthearted tips for the week, courtesy of @H9RBSjs ...

    Always test your web app with CSS disabled to see what zero percent of your audience sees.

    https://twitter.com/H9RBSjs/status/375282392107581440
    CSS3 Border Images: The only CSS feature that will reach "Proposed Recommendation" status before anyone uses it in a real project.

    https://twitter.com/H9RBSjs/status/233570938531241984
    If you tell me that your CSS grid framework is "responsive out of the box", then I'm just going to wonder why your framework is in a box.

    https://twitter.com/H9RBSjs/status/375646123798827008




    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.

    And here is last week's issue, too:
    http://www.sitepoint.com/forums/show...October-7-2013

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Great Links Ralph

    I saw that @H9RBSjs ... site last week and it's very funny - and mostly true (I added some CSS tips to my latest quiz answer also)

    In the CSS selectors link it seems that :first-line isn't working in Firefox. It seems to be confused by "<p>" in this line:
    Code:
    <p class="indent code">&lt;p&gt;Does anybody else feel jealous and aroused and worried?&lt;/p&gt;</p>
    It works on a local test so I guess there's an issue with the script and that construct.

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    About the border for triangle with CSS. There's something bugging me.

    If I'm using box-sizing: border-box should width and height: 0!important work and nullify the effect or not?

    display: table with border-collapse: collapse seem to work and clear the triangle.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>border-box test</title>
     <style type="text/css">
     div {
          -moz-box-sizing: border-box;
           box-sizing: border-box;
           background-color: transparent;
           border: 10px solid transparent;
           border-bottom-color: black;
           width: 0!important;
           height: 0!important;
           display: table;
           border-collapse: collapse;
     }
     </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by myty View Post
    About the border for triangle with CSS. There's something bugging me.

    If I'm using box-sizing: border-box should width and height: 0!important work and nullify the effect or not?
    Interesting question and reading from the specs:
    border-box
    The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
    I would gather from that the element will always be large enough to hold its padding and borders irrespective of width and height that have been set. It would seem as though the element is still being reduced to a content width example in some ways in that with box-sizing:border-box it works backwards to arrive at the content width. That would seem to make sense with the content width never being negative and thus always able to hold its padding and borders.

    Hoewever, I would have assumed, like you, that any padding and borders that were too wide for the element should have just overflowed like normal content.

  5. #5
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Yes, definitely a gotchas.

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,024
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    You know, that's a lot of reading that I have to do now. I'm glad that I already read the article about CSS regions! But now I have to look at all the rest. Too interesting to miss!

  7. #7
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)

    About the triangle with CSS (1)

    I did the border-box test of myty (#3), and the pivot point seems to be the {display: table;}. With {display: table-cell} everything is fine, just as without mentioning a display property.
    According to my logic, I can understand that: a totally empty <table> element of zero width and zero height doesn't have a border. If you add an empty table cell (of also a 0/0 dimension) in it with the border, the border is there.
    • A {display:table} of an empty element is mimicking an empty <table> element: nothing happens.
    • A {display:table-cell} of an empty element is mimicking an empty <td>: borders are present.

    Here is the test: border-box-test.htm

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)

    About the triangle with CSS (2)

    In the list of articles my attention was attracted by the "Chris Coyier's animated CodePen demo of how to make a triangle in CSS." - Curious if there were new insights!
    Well, it is a wonderful demo, which makes it very easy to understand what is done to get the triangle. The only thing: it is not 100% complete. Probably this demo is used as illustration in a lecture, in which there is more said about the (im)possibilities of this (css2) method. - Anyway, for a stand alone demo I'm missing the considerations about the use, and the css3 alternative.

    So I went on with the demo, and made a kind of "demo response" with the css3 method added, plus some explications.

    Here it is: css triangle in two ways

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Francky View Post
    So I went on with the demo, and made a kind of "demo response" with the css3 method added, plus some explications.
    Here it is: css triangle in two ways
    Great demo Francky (again)

    Nicely explained and demonstrated.

    A couple of bugs:
    I noticed that the link to caniuse is not working and the css3 demo is not working in IE9 although you mention it should work (unless you meant that you need to add the prefixes to your demo). I haven't had a chance to look under the hood yet but thought I'd just point it out as soon as I saw it.

  10. #10
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Ha! Bug hunting is welcome: thank you, Paul.

    • @ link to caniuse is not working
      Of course: always the one and only link I didn't double check. --> Repaired.
    • @ demo not working in IE9
      Oops, intended to work; I made a javascript error. *) --> Repaired.

    Thanks again.
    ___________
    *) The error to forget that IE-javascript doesn't follow the guidelines. Normally a hyphen in css has to be in javascript no hyphen but the following letter as Capital:
    css: element {-webkit-transform: rotate(45deg)}
    javascript: element.style.WebkitTransform="rotate(45deg)";

    But IE wants the first letter in undercase:
    css: element {-ms-transform: rotate(45deg)}
    javascript: element.style.msTransform="rotate(45deg)";

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Francky View Post
    Ha! Bug hunting is welcome: thank you, Paul.
    No worries, I know you are good at debugging
    Last edited by Paul O'B; Oct 19, 2013 at 02:53.

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)

    About the triangle with CSS (3)

    Work in progress!
    I found there is an IE-filter method to let older IE's go with the transform property.

    A stand-alone page to illustrate: css3-transform-triangle.htm
    See source code.

    Notes:
    • The transform filter does work in IE7 and IE6!
    • IE7 is like the other browsers (only the text in the triangle is not so beautiful).
    • In IE6 the transform for the background (a square to a triangle) is good.
    • In IE6 the hover function is good, if the text stays rotated:

      normal -------------------- hover
    • In IE6, if the text is rotated back to get the text horizontal:
      - is fine in case it is a static figure,
      - but at a hover it gives a strange phenomenon which I could not manage to solve:

      normal -------------------- hover

    • The reason is that IE6 doesn't recognize a hover over an element that is not a link. Attaching the bg-color to the link doesn't help, nor giving the bg-color to the <span> with the text. Could probably be solved with the Whatever:hover .htc-solution of Peter Nederlof, but that is not pure css! And IE6, should anybody care?
    • In the demo I've chosen for the first option.

    I could not test in IE8 (which needs a different IE-filter). Can somebody confirm or deny that it is working in IE8?
    I could not test IE9 either, but I assume IE9 is o.k.; confirmative?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Franky,

    I've only got IE tester to check old versions of IE but in IE8 the triangle is not correct. It seems you left off the quotes from the filter as the code below corrects it.

    matrix filter converter
    Code:
    <!--[if IE 8]>
    	<style type="text/css">
    	#triangle {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";}
    	</style>
    <![endif]-->
    IE9 will work if you add the -ms-transform to your rules

    Code:
    	-ms-transform: rotate(45deg);
    IE7 seems to be working according to IEtester.

    I don't check (or care about) IE6 any more

  14. #14
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)

    About the triangle with CSS (4)

    Aha, Thank you.
    It seems I've missed some things in copy/pasting from the prior procession of trial&error versions: "it is good to have a second set of eyes".

    IE6
    After I saw it was working in IE7, I tested IE6 in a real IE6 on a virtual machine, just for curiosity. But I don't care, though the main thing (rotating a square) is working in IE6 as well.

    IE7
    I tested in a real IE7: good.

    IE8
    That's is strange: I pasted exactly the same IE matrix filter transforms translator code and did not know that the single quotes magically broke up. Appeared to be an unwanted automatic "correction" of my html-editor as the file was saved.
    And now I see I've forgotten to add the rotating back filter for IE8.
    Well ... always surprises with IE! When I corrected/added these things, I could not get the <span> text in the right position.
    But IE8 seems to work with the lteIE7 filter as well, if you make some adaptations elsewhere.
    Tested in Netrenderer: looks o.k.

    IE9
    You are right. Happy as I was that IE7 was working, last minute I added the -webkit- prefix, but not the -ms- one. - Corrected!

    IE10
    Already good.

    Here is the new version: css3-transform-triangle-nw.htm
    Is everything now all right in (real) IE8?
    ________
    Work in progress! (anyway remaining on the ToDo-list: adapt the article-page / make a stand alone css2 triangle page).

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Francky View Post
    Is everything now all right in (real) IE8?
    Looks fine in IE8 for me

    Weirdly, when first opened in IE8, the triangle's container was 3px too tall. The bottom corners of the rotated box were showing. (I have a screen shot). When opened the second time and thereafter, it looks great. Who know what evil lurkes in the heart of IE8!

  16. #16
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Ha, good news! Thank you for looking.
    =======
    ... 3px too tall ... Who know what evil lurkes in the heart of IE8!
    Reincarnation of The IE6 Three Pixel Text-Jog? Should make me o so happy!

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    A new list for this week has been posted here: http://www.sitepoint.com/forums/show...ctober-21-2013

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Here's another article on CSS regions: http://coding.smashingmagazine.com/2...h-css-regions/


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
  •