Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
Like Tree1Likes
  • 1 Post By FlatAssembler

Thread: Help with image styling

  1. #1
    Junior Member
    Join Date
    Mar 2018
    Posts
    2
    Member #
    58616

    Help with image styling

    Hey!

    First post here people I have wondered for a little while how the designer on https://thankfulregistry.com has got the v shape to extend from the first background image onto the white background!

    Not really sure what to search to find out I hope somebody can help!

    Thanks a bunch

  2.  

  3. #2
    Member
    Join Date
    Mar 2018
    Posts
    30
    Member #
    58566
    Liked
    1 times
    Didn't he put the following PNG in the front of the bottom of the picture and set its width to 100-2*43=14%, and then put the white divs with the width of 43% on the left and the right of it (using the CSS float directive)?
    https://d3krjgdh5n3zsi.cloudfront.ne...6424845650.png

    EDIT:
    I think an easier solution is to use an SVG instead of the CSS, like this:
    Code:
    <div style="background-image:url('https://static.pexels.com/photos/236047/pexels-photo-236047.jpeg'); width:300px; height:300px; background-size:cover;">
    <svg style="width:300px; height:20px; position:relative; top:280px;">
    <polygon fill="white" points="0,0 132,0 150,20 0,20"/>
    <polygon fill="white" points="150,20 168,0 300,0 300,20"/>
    </svg>
    </div>
    The guy there seems to have put a lot of effort trying to make his site compatible with legacy browsers (like IE7). Don't waste your time on those things, it's not worth it!

    EDIT:
    Here is a responsive version:
    Code:
    <div style="background-image:url('https://static.pexels.com/photos/236047/pexels-photo-236047.jpeg'); width:100%; height:300px; background-size:cover;">
    <svg style="width:100%; height:20px; position:relative;">
    <polygon id="first" fill="white"/>
    <polygon id="second" fill="white"/>
    </svg>
    </div>
    <script type="text/javascript">
    function onResize()
    {
        var width=first.parentElement.parentElement.clientWidth;
        var height=second.parentElement.parentElement.clientHeight;
        first.parentElement.style.top=height-20;
        first.setAttribute("points","0,0 "+(width/2-18)+",0 "+(width/2)+",20 0,20");
        second.setAttribute("points",(width/2)+",20 "+(width/2+18)+",0 "+width+",0 "+width+",20");
    }
    addEventListener("resize",onResize);
    onResize();
    </script>
    Ah, maybe using SVGs wasn't a good idea after all. You decide for yourself.
    Last edited by FlatAssembler; Mar 17th, 2018 at 01:49 PM. Reason: Code sample
    mlseim likes this.

  4. #3
    Junior Member
    Join Date
    Mar 2018
    Location
    Pakistan
    Posts
    12
    Member #
    58573
    I think you can do it to see weather it would effect or not if it is then you can go for.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com