HTML5, CSS3 & JS Experiments

By Martin Ivanov

Background Image Cropping



Usage and Code Insight

<ul class="css3-background-image-cropping">
    <li><a href=""></a></li>
    <li><a href="some-file.pdf">some-file.pdf</a></li>
    <li><a href="some-file.txt">some-file.txt</a></li>
            <p> </p>
<!--            <p class="options-block">Looking for enterprise HTML5, CSS3 and JavaScript web controls? 
    Check <a href="" target="_blank">AcidJs.WebUI</a>.</p>-->
 * @info CSS3 Background Image Cropping
 * @author Martin Ivanov
 * @web
 * @blog
 * @twitter

:root .css3-background-image-cropping a::before
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px 0 0;
    width: 16px;
    height: 16px;
    background: url("../pages/css3-background-image-cropping/example/icons.png") no-repeat;

:root .css3-background-image-cropping a
    color: #21759b;

:root .css3-background-image-cropping a[href$=".md"]::before
    background-position: 0 -64px;

:root .css3-background-image-cropping a[href$=".pdf"]::before
    background-position: 0 -80px;

:root .css3-background-image-cropping a[href$=".txt"]::before
    background-position: 0 -96px;

Please, disable your ad blocker

This website is made possible by displaying online advertisements to the visitors. To view the content, please, disable your ad blocker, then refresh the page.