SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Can this be done with css?

    is there a way to create this pink stretch with css?

    http://muslimahwebdesign.co.uk

  2. #2
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    pink stretch.png

    sorry I'm changing the home page so attaching a pic of the pink stretch. Can it be done with css instead of body background?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Possibly with some advanced CSS, but I wouldn't go that route, as it will be tricky cross browser. Just go with a background image.

    Off Topic:

    By the way, "If your a muslim woman"? Some editing needed there.

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Possibly with some advanced CSS, but I wouldn't go that route, as it will be tricky cross browser. Just go with a background image.

    Off Topic:

    By the way, "If your a muslim woman"? Some editing needed there.
    ok maybe something to look for in the future then.

    What's the typo? Do you mean muslimah as it is the female version of muslim

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,081
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Off Topic:

    It should be "If you're a Muslim woman"

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I read it over and still didn't realise!

    Thanks

  7. #7
    Non-Member
    Join Date
    Apr 2013
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's possible to get a circular design using CSS3 however I doubt it's possible to generate the same shape. It's better to just stick to an image

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Here you go

    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">
    html, body {
    	margin:0;
    	padding:0
    }
    .strip {
    	background:#e5308f;
    	position:relative;
    	height:125px;
    	overflow:hidden;
    }
    .strip:before, .strip:after {
    	content:" ";
    	position:absolute;
    	top:-25px;
    	left:-10%;
    	right:-10%;
    	height:50px;
    	background:#fff;
    	overflow:hidden;
    	border-radius:100%;
    }
    .strip:after {
    	top:auto;
    	bottom:-25px;
    }
    </style>
    </head>
    
    <body>
    <h1>Stripe test</h1>
    <div class="strip"></div>
    </body>
    </html>


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
  •