I need make something like this. and I want to do it for a <div></div> which has width in %
I can do this by using an image and adding another div inside and z-index.
But I want to know if it's possible to make in this circle in backgroud using css.
Keep it simple:
.circle
{
border-radius: 50%;
width: 200px;
height: 200px;
}
Width and height can be anything, as long as they're equal
Check with following css. Demo
.circle {
width: 140px;
height: 140px;
background: red;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
For more shapes you can follow following urls:
http://davidwalsh.name/css-triangles
Use circular gradient for background property
div {
width: 400px; height: 400px;
background: radial-gradient(ellipse at center, #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%);
}
<div></div>
It can be done using the border-radius property. basically, you need to set the border-radius to exactly half of the height and width to get a circle.
JSFiddle
HTML
<div id="container">
<div id="inner">
</div>
</div>
CSS
#container
{
height:400px;
width:400px;
border:1px black solid;
}
#inner
{
height:200px;
width:200px;
background:black;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:25%;
margin-top:25%;
}
You can use the :before and :after pseudo-classes to put a multi-layered background on a element.
#divID : before {
background: url(someImage);
}
#div : after {
background : url(someotherImage) -10% no-repeat;
}
Here is a solution for doing it with a single div element with CSS properties, border-radius does the magic.
CSS:
.circle{
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-align:center;
background:#000
}
HTML:
<div class="circle">Hello</div>
Maybe you should use a display inline-block too:
.circle {
display: inline-block;
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
z-index: -1;
}
If you want to do it with only 1 element, you can use the ::before and ::after pseudo elements for the same div instead of a wrapper.
See http://css-tricks.com/pseudo-element-roundup/
Related
When I use :after pseudo class with background image, it doesn't shows in my div.
Why does it happen?
P.S. When I apply position:absolute top:0, right:0, I can see the image.
<div class="vienas">abra kadabra</div>
.vienas {
height:200px;
border: 1px solid black;
position: relative;
}
div::after {
content:" ";
background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg);
width:100px;
height: 100px;
}
By default pseudo-elements are set to display inline. Because of this, your width and height properties will not have any affect on the element and it will instead default to the width and height of the inner content.
You need to set it to display: block instead:
div::after {
...
display: block;
}
JSFiddle demo.
Try like this: Demo
CSS:
div:after {
content:"";
background: url("http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg") no-repeat -100px -100px fixed;
width:100px;
height: 100px;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I am working with a set HTML template that makes things a little tricky to customize exactly the way I want. So I am stuck with a structure that somewhat lacks flexibility.
I have a div that takes up 50% width of the page, but I want to center a containing div in the middle of the page. Due to other restrictions in other parts of the page, I really can't change the parent div being set to position: relative.
This is the effect I am after:
This is the code I have so far (which is not working):
HTML:
<div class="parent">
<div class="centerpage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Berlin_U-Bahn_Train_A3L71.jpg/220px-Berlin_U-Bahn_Train_A3L71.jpg"></div>
</div>
CSS:
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position: relative;
}
.centerpage {
position: absolute;
}
you can use the old method of absolute and negative margin :
http://codepen.io/anon/pen/Htpen
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position:relative;
}
.centerpage {
position: absolute;
left:100%;
top:50%;
vertical-align:middle;
margin :-80px 0 0 -110px;/* negative margin is equal to half height/width of image */
}
or use a background-image or gradient http://codepen.io/anon/pen/GDbtg :
.centerpage {
background:
linear-gradient(to right,
#85D782 0%,
#85D782 50%,
#ffffff 50%,
#ffffff
)
;
height: 400px;
text-align:center;
line-height:400px;
}
img{
display:inline-block;
vertical-align:middle;
}
put image into a div and apply class below
{
width: 100px /* with your width whatever it is */;
text-align: center;
padding: 0px;
height: 110px;
display: table-cell;
vertical-align: middle;
}
and add one more class
.centerpage img {
width:100%;
}
Can I ask a little help about creating that shape with CSS?
The button needs a circle for the icon, and the simple box for the text.
Here is a possible version using the :before pseudo element. The pseudo element is converted into a circle by using border-radius: 50% and is then positioned before the rectangular div#menu as required.
You can add a image (like the one in question) to the pseudo element by using the content property like shown below:
content: url(http://yoursite.com/yourimage.png);
or using the background-image property also:
background-image: url(http://yoursite.com/yourimage.png);
#menu {
position: relative;
width: 100px;
height: 24px;
line-height: 24px;
color: white;
background-color: peru;
border: 1px solid peru;
border-radius: 2px;
padding-left: 24px;
}
#menu:before {
position: absolute;
content: '';
height: 40px;
width: 40px;
top: -9px; /* (height of parent - height of pseudo) / 2 - border-top of parent for vertical mid */
/* top: -17px; (height of parent - height of pseudo) - border-top of parent for bottom align */
left: -24px; /* some value less than width - depends on amount of overlap needed */
border: 1px solid transparent;
background-image: url(http://lorempixel.com/40/40/people/1);
background-color: peru;
border-radius: 50%;
}
/* Just for demo */
* {
font-family: Calibri;
letter-spacing: 2px;
}
#menu {
margin: 25px;
}
<div id='menu'>Menu Text</div>
Note: This is in essence a different version of the answer posted by Jason Gennaro. If you need support for IE lower versions, use his answer because they don't support :before.
Here's a quick and dirty version:
HTML
<div id="circle"></div>
<div id="rectangle">Header Text</div>
CSS
#circle{
border-radius: 50%;
width: 85px;
height: 85px;
background: brown;
float:left;
}
#rectangle{
width:300px;
height:40px;
background:brown;
color:white;
float:left;
margin-top:20px;
margin-left:-40px;
position:relative;
z-index:-1;
padding-left:60px;
padding-top:6px;
font-family:arial;
font-size:2em;
}
DEMO
http://jsfiddle.net/H6Lkk/
Explanation
use border-radius:50% and any width to create a circle.
float the two divs to allow for the overlap
use position and z-index to place the rectangle under the circle
add the logo image as necessary in the #circle
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
I'm trying to do this:
(The search button has fixed size, the left side takes remaining width in screen).
The best I got yet: jsFiddle
HTML:
<input>
<img src="http://ii.alatest.com/css/iphone/search_icon.gif">
CSS:
input {
height: 100px;
font-size: 3em;
width: 100%;
float:left;
}
img {
float:right;
width:100px;
height:100px;
}
Edit: I forgot to mention, the search icon has to be clickable! This leads probably to a solution where it's a separate element, not a part of the background.
I'd recommend using the image as a background to the input like this jsFiddle example.
input {
height: 100px;
font-size: 3em;
width: 100%;
float:left;
padding-right:120px;
background-image: url(http://ii.alatest.com/css/iphone/search_icon.gif);
background-position: 98% 50%;
background-repeat: no-repeat;
}
Or, you can float both elements left and set a width on the input like this jsFiddle example.
input {
height: 100px;
font-size: 3em;
width: 70%;
float:left;
}
img {
float:left;
width:100px;
height:100px;
}