SitePoint Sponsor

User Tag List

Results 1 to 25 of 111

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 20

    CSS - Test Your CSS Skills Number 20 : Quiz now Ended - Solution posted in post #74

    As the quizzes have been a bit quiet lately I have made this one very simple and should be solved in a matter of minutes so it should be suitable for all to have a go.

    If you look at the first screenshot (opacity-faded.jpg) you will see that an attempt has been used to use the CSS "opacity" property on the background of the centred box with the unfortunate effect that not only has the background become transparent (as was required) but the inner foreground image and foreground text has also become transparent making the text hard to read and the image look bad.

    Your task is to stop the inner content from becoming transparent and if you look at the second screenshot (opacity-full.jpg) you can see how it is supposed to look.

    Your task is to make this work in IE6+, Firefox3, Opera and Safari (latest versions). You must use the opacity property and not transparent background pngs to achieve the effect.

    The centred box must be a fluid width and height and cannot be a fixed height and width. It must grow and expand with content and screen resize.

    I will give you the code for the first version with the faded text so that you have the general structure and the opacity properties to use but you can change it or use your own. As usual no scripting and no hacks apart from the ones I will supply below.

    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">
    * {
        margin:0;
        padding:0
    }
    html, body {
        height:100%;
    }
    p {
        margin:10px 10px 20px
    }
    .outer {
        border:5px outset blue;
        width:50%;
        overflow:hidden;
        background:blue;
        margin:50px auto;
        opacity:0.4;
        position:relative;
        z-index:2;
        color:#fff;
    }
    .outer img {
        float:left;
        margin:10px;
        display:inline;
    }
    p.view {
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        z-index:1;
        margin:0;
    }
    </style>
    <!--[if IE ]>
    <style type="text/css">
    .outer{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" 
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="outer">
        <p><img src="../../testing2/images/zimg4.jpg" width="300" height="300" alt="Sea View">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mauris. Nunc quis enim non mauris tincidunt convallis. Fusce id nulla vitae nibh consequat hendrerit. Fusce dictum placerat tellus. Curabitur bibendum mattis eros. Nam lectus. Pellentesque sagittis. In rhoncus, tortor sit amet pellentesque tempor, eros mi vestibulum erat, ac eleifend lorem sem eu lacus. Duis lobortis arcu quis risus. Curabitur diam. Cras orci nulla, consequat rhoncus, fringilla vel, venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum.. </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mauris. Nunc quis enim non mauris tincidunt convallis. Fusce id nulla vitae nibh consequat hendrerit. Fusce dictum placerat tellus. Curabitur bibendum mattis eros. Nam lectus. Pellentesque sagittis. In rhoncus, tortor sit amet pellentesque tempor, eros mi vestibulum erat, ac eleifend lorem sem eu lacus. Duis lobortis arcu quis risus. Curabitur diam. Cras orci nulla, consequat rhoncus, fringilla vel, venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum. </p>
    </div>
    <p class="view"><img src="../../testing2/images/zimg6.jpg" width="100%" height="100%" alt="Sea View"></p>
    </body>
    </html>
    As mentioned above you can change the code to suit as much as you like but my original answer doesn't change more than half a dozen lines at most. However see what you can come up as all methods will be of interest. You will have to use your own images for the example and if you can make a prettier example then mine then all the better

    Remember your answer should work with any amount of content and work in a fluid width and height elements. There is no need to duplicate the text content either (as in other previous quizzes).

    Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

    Any questions just ask and remember this is just for fun

    Solutions to the quiz will be posted later in the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18 test 19:
    Attached Images Attached Images


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
  •