For a project I have to create a pear-shaped container. I tried doing this using CSS3 rounded corners but it just doesnt look exactly like it. I then used an image at the bottom, but I need this to be responsive (scalable image).
I want to code something like:
http://tinypic.com/view.php?pic=98fxid&s=5
But as you minimize the browser screen, the layout breaks and the pear shape is not scalable. I would like to know if there is a way to do this using CSS3 OR a better way to do this using scalable images.
By the way, I'm using bootstrap and this is my first attempt at making a website using bootstrap, so any guidance would be much appreciated.
You could create the pear shape using two intersecting circle segments, one for left-hand side and one for the right-hand side. Circle segments are created by limiting the circle to its parent container via overflow: hidden;. To simplify the markup, you can create the child circle elements using the :before and/or :after pseudo elements.
HTML:
<div class="content-form">
<div class="pear-shape left"></div>
<div class="pear-shape right"></div>
</div>
CSS:
.content-form {
width: 75%;
max-width: 325px;
height: 200px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
position: relative;
}
.pear-shape {
overflow: hidden;
width: 50%;
height: 200px;
position: relative;
top: 100%;
}
.left { float: left; }
.right { float: right; }
.pear-shape.left:before {
position: absolute;
left: 0;
top: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 0 250px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
.pear-shape.right:before {
position: absolute;
top: 0;
right: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 250px 0;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
Check out this example Fiddle.
At some point, you will be able to use the css shapes module, and there might be some browsers that already support it. In the mean time, you might want to look at SVG or canvas as an option.
Related
I want to achieve the following layout with the help of css. I want to be able to selectively underline text and draw circle around text elements.
This has somewhat of a chalk effect. Any pointers would be useful.
Sample Image
You want to have this freehand drawing effect right?
with css you can only make exact shapes that are not as handmade.
this effect you can do in two ways:
-Use images as background in the case of the circle and as image (<img>) in the case of the underline
-Using canvas, is an extensive and complex subject but it is the best way to solve your problem if you think about good practices
An example of the first way:
<div class="wrapper-text">
<p>text circle</p>
</div>
.wrapper-text {
width: 100px //width and height a little bigger than p tag
height: 80px;
background-image: url('/path-image-circle.png');
background-repeat: no-repeat;
background-size: 100%;
}
you can also place an image tag inside the wrapper with position: absolute and format the width and height instead of using as background
Yor can wrap the wanted word in span and then make this effect using pseudo elements:
HTML:
<p>Some Text with <span class="underline">underline</span> and <span class="circle">circle</span></p>
CSS:
.underline, .circle {
position: relative;
}
.circle::after{
content: '';
display: block;
width: 30px;
height: 30px;
border: 1px solid green;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.underline::after{
content: '';
display: block;
width: 100%;
height: 2px;
background: green;
position: absolute;
bottom: 0;
left: 0;
}
DEMO:
https://codepen.io/eliortabeka/pen/RdxVNX
NOTE:
You can change the circle type the any freehand drawing image you wish
Dont know what to call it but I want a border that doesnt follow the divs height:100%; but is centered between top and bottom of the parent div.
What is the best solution? creating another div that contains the border? or is there any options in css that I dont know off?
heres a codepen to my current footer with the divs im using:
http://codepen.io/Volcan3/pen/yVoNZB
You could use pseudo classes to mimic a border that doesn't cover "100%"...
http://codepen.io/anon/pen/yVoORm
.footer-item::after {
content: '';
display: block;
height: 80px;
width: 1px;
background-color: red;
position: absolute;
right: 0;
top: 50%;
margin-top: -40px;
}
and then don't forget to make the parent item relative and a block:
.footer-item {
display:block;
height: 100%;
position: relative;
}
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
I have a link and an image. I would like to use css absolute positioning to position the link on the image but if i use css absolute positioning then the link will not be properly positioned if the user is using a bigger monitor or a smaller monitor. How could I make it so that it would work on all monitors and be positioned correctly.
Option one is really daft, but just move the link so it wraps around the image?
<img src="http://placehold.it/350x150">
The other alternative (if you can't do that), is to make sure they are in the same parent element that is position: relative;:
#container {
position:relative;
width:350px;
height:150px;
}
#container a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="container">
<img src="http://placehold.it/350x150" />
</div>
Make the image a background image, reformat as below, if possible. (this is a better practice)
Is there a reason it MUST be a foreground image? Let me know and I might have a suggestion specific to that!
#divwithimage {
background: url("../images/sweet.jpg");
background-repeat: no-repeat;
width: 500px;
height: 500px;
position: relative; // as this will act as parent
}
button {
position: absolute; // absolute to container above
left: 0;
top: 0;
width: 200px;
height: 40px;
background: pink;
}
Due to browser performance implications I can't use box-shadow CSS property because I have many similarly looking elements on my page that should have same looking style including shadow. That's the reason I would like to implement shadows using traditional PNG imagery.
Facts
My elements have predefined and more importantly fixed pixel width
They have fluid height (auto) depending on their content
They have content directly in the element and some child elements will be positioned outside their border
CSS3 can be used but performance-critical parts (gradients, shadows...) should be avoided
CSS pseudo elements can be used without limitation
Requirements
There should be no additional wrapper element added in order to have fluid shadow
Application should run smoothly on mobile browsers - shadows seem to slow down performance significantly on mobile devices since their processing power is much lower than desktop computers.
Possible direction
I thought of using :before and :after pseudos to display top-to-bottom and bottom shadows on the containing element, but these pseudos display within their parent element and positioning parent z-index higher than these children has no effect.
Visual demo of end result
This JSFiddle Demo in pure CSS3 that I would like to achieve but using PNG shadows. In reality there are numerous of these boxes so you can imagine mobile browsers are struggling with all these shadows.
Item is one such box (see blow) that needs PNG shadow. Left menu is child element positioned outside of the box.
Display in Chrome
HTML
<div class="item">
<menu>
<li>Yes</li>
<li>No</li>
<li>Maybe</li>
</menu>
<div class="content">
Some content
</div>
</div>
CSS3 LESS
.item {
position: relative;
width: 300px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
margin: 20px 20px 20px calc(20px + 3.5em);
min-height: 5em;
&:first-child {
margin-top: 0;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 5em;
background-color: #fff;
}
menu {
position: absolute;
top: 0;
left: -3.5em;
width: 3.5em;
margin: 0;
border: 0;
padding: 0;
list-style: none;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
li a {
display: block;
text-align: center;
padding: 2px 0;
}
}
.content {
padding: .75em 1em;
}
}
Probably I am missing something, but looks like you want something in this way:
demo
The CSS is
.base {
width: 300px;
height: 150px;
font-size: 100px;
font-weight: bolder;
background-color: lightgreen;
position: relative;
z-index: auto;
}
.base:after {
content: '';
position: absolute;
top: 30px;
left: 30px;
background-color: green;
z-index: -1;
width: 100%;
height: 100%;
}
.child {
position: absolute;
left: 150px;
top: 50px;
border: solid 1px black;
color: red;
}
And just change the background of the :after to your image.
I have applied this solution to your fiddle.
The relevant CSS is for the before pseudo element:
.item:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
background-image: url(http://placekitten.com/100/100);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I have used a kitten picture, that is being scaled to cover all the needed size. Just change that to whatever you want.
I needed to do it that way because I had onky a pseudo element available.
The key for that to work (and where you probably had the difficulty) is to add z-index: auto to .item
Updated demo
Well, I had said that it wasn't posible, but I have find a way.
The standard technique would be to use 2 elements, just to avoid stretching the image (as you said). The problem is that we only have 1 pseudo element available.
The solution then would be to use 1 pseudo element, but with 2 backgrounds, to solve the issue.
CSS (only relevant part)
.item:before {
background-image: url(http://placekitten.com/320/10), url(http://placekitten.com/320/500);
background-repeat: no-repeat;
background-size: 100% 9px, 100% calc(100% - 9px);
background-position: left bottom, left top;
}
We will need an image (the first one) only 10 px in height, to cover the bottom shadow. And another one, with enough height to cover the maximumitem posible, and that will be used for the remaining part of the shadow. The dark part is that we need now a calc() height, with limited support. (anyway, better than border image)
demo 3