Actually I have 2 questions here. I'll explain them as much as I can.
I'm trying to create a ring shaped div. Below is what it should look like.
This is what I have done so far. How can I get the slight curve from left bottom corner to the top? And how can I create the inverted curve for the right side?
Thank you.
You could add a second circle that whites-out the portion of the image you don't want to see.
For example, if you add a second div (inside the first) with id cutout and style it as follows:
#cutout {
top:250px;
border-radius: 700px;
border:300px solid #eee;
z-index:1;
left:200px;
height:200px;
position:absolute;
}
Then in your image you'll get a little closer to what you want. You'll also want to add position: relative to your container div to ensure that's what it's positioned and clipped to.
Finally, if you want clip the ring segment as shown in your image, you'll need to add an extra outer div just to clip the innermost two; and you should replace the image with a radial background.
That'd look approximately like: http://dabblet.com/gist/4571882
Image:
Honestly though, I'm not sure contortions like this work very well - you'll usually not get exactly the result you wanted, and it's likely not to work on older browsers very well; nor for that matter necessarily on newer browsers that implement a newer version of these CSS properties.
you could try creating a new div and adding
border-top-right-radius: XXX
for the inverted segment. Making sure they float correctly (e.g. float:left).
Related
I'm sorry if this question has already been asked elsewhere.
However, I've got a page I'm building in Leadpages that is due in a couple of hours. It's got these half circles...
This is the code structure for a half circle...
The HTML is just a straight up plain image.
The CSS is as following:
.ring-right {
position: absolute;
right: 0;
width: 240px;
top: 2115px;
}
The issue is it’s really hard to get them to look really good on all screen sizes. They change position quite a bit even with a just a tiny browser resize. Which as a result can quickly overlap text over go in a position that does not look natural.
As the width of elements, like the blue block in this photo for example, change, that leaves circle landing in a weird spot. Sometimes overlapping the text.
For example, this would look better at the top...
Is their a better way to code these in, to better change with the screen sizes? At this moment, I would have to basically make a change as to how far from the top each ring is, with media queries at the moment. Except, that would result in needing to use dozens of media queries. Like one every few pixels practically.
Set that white element with blue squiggles as position: relative; if you haven't already, and then set the circles to be children or pseudo-elements (::before and ::after) and keep their position absolute.
An absolute child (:before & :after are treated like children as well) will have its position based off of its closest relative ancestor.
Without having all of the markup, it's a bit tough to see what all is going on. But using the relative position of the element you want to manipulate will result in FAR fewer media queries, if any.
Take a quick peek at this pen I whipped up and drag the window size around: https://codepen.io/xhynk/full/zYxmENp, and here's the pen link itself if you want to fork it/mess with it: https://codepen.io/xhynk/pen/zYxmENp
I want to create a sort of badge-like box, used for team descriptions, but I can't seem to come up with any way of getting it done. I've got border-radius going for the top, but no idea how to lead up into the rest of it. This is my current code: https://jsfiddle.net/ubgbjbao/
(A little of my CSS):
.wpsm_team_2_member_wrapper{
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
This is somewhat I'm trying to achieve: https://i.maagic.pw/MagnifloriousDeityMash
If you want to go the easy route, create a png file that's just a white background with a drop shadow and/or border.
It will be minimally slower but better than having to try to create the file with SVG which you may have to use if you want it purely html/css.
Look at this post. You'll have to get creative with your drop shadow though.
'Inverted' border-radius possible?
You could also try to implement this using Masking with SVG.
https://www.html5rocks.com/en/tutorials/masking/adobe/
You can get a lot of mileage using absolute positioning of one element butted up to the edge of another. Here you can add a border radius (border-radius: 50% 50% 0px 0px;) and padding to the portrait to get that half-circle look.
The portrait you can pull upwards using a negative top value. The left is left: calc(50% - 95px); which means 50% of the containing width minus half it's own width and horizontal padding (150px/2 + 20px).
You'll have to make sure the containing element (.wpsm_team_2_member_wrapper) has position: relative. Add a top margin to .wpsm_team_2_member_wrapper_inner to move it down out of the way of the portrait.
Finally if you give the portrait a box shadow pointing up box-shadow: 0px -3px 5px 0px rgba(0,0,0,.2); you can kind of make it look like a continuous shadow.
Not sure if this is what you meant, but hopefully can get you going. Example here:
https://jsfiddle.net/ubgbjbao/2/
I want to achieve the effect described in the following question, but using CSS.
I remember seeing somewhere that this now can be done with HTML5, but now can't find the property name.
Stretching an UIImage while preserving the corners
You'll have to use 3 different images.
First, go into photoshop or Gimp or something and break the arrow image you have into 3 parts. The left side with the curve, and the right side with the arrow part. Save them as 3 different images.
Once you've got your images. Create one HTML image element:
<img src="img-middle.jpg" />
In your CSS, apply styling to the before and after pseudo-elements and add the two image bits that you don't want stretched.
img:before {
contents: '';
background: url('img-left.jpg');
height: 50px;
width: 20px;
position: absolute;
left: -20px;
}
img:after {
content: '';
background: url('img-right.jpg');
height: 50px;
width: 40px;
position: absolute;
right: -40px;
}
Make sure you change the width, height, left and right values to match the width and height of your two image files. This CSS allows these bits of the image to be added on to the left and right sides, no matter how wide the element is stretched. It's also cool since it's only one element, so the CSS stays pretty clean except for the requirement of the empty content:''; property.
So then you can stretch your middle image element dynamically. Lets say you want he arrow to stretch, have some jQuery that animates the width of the element, then the middle part will stretch and the corners will stay intact since they're technically not part of the original element, they're just appended.
ETA: As for the method described in the objective-C related post, there's no CSS property that breaks apart images like that unless it's in some obscure webkit nightly build that I've never heard of. Your option here is to break apart the other two sides. You could also combine the left and right portions of your image into a sprite and use the background-position:; CSS property to select bits of the image so that way you'd only have two image file requests, as you want to keep those low to speed up page load time.
you can create an element, assign pseudo elements to it for the left and right side caps, and use a CSS3 transition applied to the width property in order to achieve this effect.
i've set up a working demo on jsFiddle to illustrate how it's done. this demo uses background colors, but one could use images as well (repeating along the X axis for the center element).
check out the HTML5 rocks playground, you'll find some fascinating snippets demonstrating the power of CSS3 and HTML5 (naturally) and can use it as a quick reference as well.
Did you mean CSS3?
I think border-image is pretty much what you're looking for. It lets you take a single image and transform it into the border of an element.
It's kinda hard to work with, so Mozilla made a wonderful WYSIWYG editor:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
I'm trying to build a site that works best at fairly high resolutions, but also slides as far left as possible when the resolution gets lower.
I'm not even sure what code to copy in here, so the link is:
projects.thomasrandolph.info
What I need is for the left side of #page to stop sliding left at the right side of #logo plus a few pixels. It's 13.25em from the left of the page.
I've set the left margin of #page to 13.25em, which looks correct, but at higher resolutions, the page looks strange because it's not centered. I want to retain the centering but also stop it sliding at a certain point.
So I want the left side to go no farther left than this:
I would VASTLY prefer If I could do this with pure CSS on the two elements I've noted here, but I can add HTML as necessary.
I've been struggling for a long time with how to even ASK this question, so please ask me questions, or edit this question to improve the clarity of the question.
Update:
Here are images of how it currently looks at two resolutions:
1920
1280
Here's an image of how it should look at resolutions below approximately 1540:
Any resolution higher than ~1540 would slide smoothly to the right, as it currently does.
What I wound up doing was adding a wrapper around #page. It's not what I would want in a perfect world, but I would want min-margin in a perfect world (or at least margin: min())!
On the wrapper, I applied margin: 0 13.25em; where the 13.25em was where I wanted #page to stop sliding left. The equal margins on both sides leave #page centered without a 13.25em shift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.
It seems to be a good fix. I had originally been looking for something more "clever" without adding HTML, but this was simple enough and seems effective enough that it appears to be well worth the extra markup.
If you don't use a border for the element you can use it to define a "min-margin".
.center
{
margin: 0px auto;
border: transparent solid 30px;
}
P.S. I know this is an old question, but the OP also commented this month.
Give exact width and height to class center. then set position to absolute: lets say we wanna set width:400px; and height:300px; try following piece of code for center
.center
{
postion:absolute;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
}
I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }