iNerd Blog

Nice Web Design

Posted in WEB by Ari on 7 June 2010

niceDesign

Nice Clean design.

PSD Tutorials

Posted in WEB by Ari on 7 June 2010

CSS Sprite and Rounded Corners (with multiple CSS class)

Posted in WEB by Ari on 3 June 2010

This is how you create a rounded corners box with css sprites.

the HTML

<div class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1 </strong>

    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>


CSS

#type1 {background-color:#CCDEDE;}
    #type1 .corner {background-image:url(../images/corners-type1.gif);}

.roundedBox {position:relative; padding:17px; margin:10px 0;}

    .corner {position:absolute; width:17px; height:17px;}

        .topLeft {top:0; left:0; background-position:-1px -1px;}
        .topRight {top:0; right:0; background-position:-19px -1px;}
        .bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
        .bottomRight {bottom:0; right:0; background-position:-19px -19px;}

CSS Useful posts

Posted in WEB by Ari on 16 April 2010

Recently I found this useful CSS article by Shaun Inman. The article is title CSS Qualified Selectors – some advanced CSS stuff.

Some sneek peek:

To remove the img border that
…contained checkbox is disabled? The pointer cursor is misleading (since the label’s checkbox can’t be un/checked). Currently we need to manually class the label (or disable an additional arbitrary parent element) to correct this. With Qualified Selectors (combined with attribute selectors) we could just write:

label < input[disabled]
{
cursor: default;
}

.. To differentiate the previously visited links

ul.archive li < h3 a:visited
{
opacity: 0.5;
}

To hide an empty excerpt:

div.excerpt !< * { display: none; }

Another good post would be CSS Child and sibling selector