Here is my jsfiddle: http://jsfiddle.net/zrqx5e34/
I have been created simple rounded images, now i want to add paragraph between two images,
Need to shows right side of between the images.
May i know how to do this? Can anyone help me? Thanks in advance.
http://s9.postimg.org/uloaz1mnj/Untitled_1.png
css:
.circular {
width: 100px;
height: 100px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('img/saina1.png') no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
margin-bottom: 130px;
position: relative;
}
.circular:after {
background-color: green;
content: "";
display: block;
height: 128px;
position: absolute;
bottom: 100px;
width: 2px;
left: 50px;
}
.circular:first-child:after {
display: none;
}
Try like this: Demo
As you are limiting the circular class width, its not possible to show beyond that while placing text inside it. So we can achieve something like this only
CSS:
.circular > p{
margin-top:90px;
margin-left:70px;
float:left;
height:128px;
width:100%;
overflow:hidden;
}
Related
I have a problem I couldn't solve.
I have two html elements that I don't want to be in top of each other like the pictrue.
What I want to do is to seperate them away from each other so user can see them
The banner css code:
.banner {
width: 100%;
height: auto;
position: relative;
z-index: auto;
}
The product css code:
.product-grid {
text-align: center;
padding: 0 0 72px;
border: 1px solid rgba(0, 0, 0, .1);
overflow: hidden;
position: relative;
z-index: 1;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
}
I tried everything it won't work.
Try change
Product grid position to absolute
I am trying to get a div(main) to sit centred withing another div(centre), the div(main) needs to be static as I don't want it to scroll but the div(centre) has to be absolute so it can sit on a separate div with an onclick function.
current HTML and css:
<div className='meal_popup'>
<div className='meal_popupElement'>
<p>testing1</p>
</div>
<div onClick={this.mealOne_boxClickHandler} className='meal_popupBackground' />
</div>
.meal_popup {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.meal_popupElement {
position: absolute;
width: 100%;
height: 100%;
background: white;
border-radius: 15px;
height: 35rem;
margin-left: 1rem;
margin-right: 1rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.meal_popupBackground {
position: relative;
background: rgba(00, 00, 00, 0.6);
width: 100%;
height: 100%;
z-index: 1;
}
Result:
Goal:
(this visually looks how I want but the problem is the whole div is clickable and only want that function on the background HTML and css:)
<div onClick={this.mealTwo_boxClickHandler} className='meal_background'>
<div>
<p>testing2</p>
</div>
</div>
.meal_background {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
background: rgba(00, 00, 00, 0.6);
z-index: 30;
}
.meal_background div {
background: white;
border-radius: 15px;
height: 35rem;
width: 100%;
margin-left: 1rem;
margin-right: 1rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
To center any element with position property different than static, you can use the following code. However, be clear that the following code takes slightly more CPU time than other methods;
To center Horizontally
left:50%;
transform: translateX(-50%);
To center vertically
top: 50%;
transform: translateY(-50%);
And particularly for this answer apply right: 0px; on the container with fixed positioning and also apply the code to center horizontally on the element you want to center.
So the problem appears to be with setting left a or right margin values at the edge to create a space either side like I normally would. so instead of width 100% and 1rem left/right margin (which id use as is great for scaling. I had set a preset width and implement the code above provided by #RitanshuSingh.
so my code looks like this:
.meal_popup {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.meal_popupElement {
position: absolute;
width: 90%;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 15px;
height: 35rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.meal_popupBackground {
position: relative;
background: rgba(00, 00, 00, 0.6);
width: 100%;
height: 100%;
z-index: 1;
}
preferably would like to select a margin but this works for now if you know how to get that working please post a fix.
result:
Is there a way to realize the following kind of shadow with CSS only?
So far I only managed to draw the shadow around the complete box without the recess around the inactive tab:
The Code Here
HTML:
<div class="box">
<div class="tabs">
<span class="tab active">Bild</span>
<span class="tab">Text</span>
</div>
<div class="content"></div>
</div>
CSS:
.box {
width: 200px;
height: 250px;
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin: 16px;
}
.tabs {
height: 30px;
}
.tab {
display: inline-block;
width: calc(50% - 2px);
height: 30px;
text-align: center;
line-height: 30px;
}
.tab:not(.active) {
/* Should be removed in the final solution with correct shadows... */
background-color: rgba(0, 0, 0, 0.18);
}
The solution doesn't need to take care of legacy browsers (< IE 10).
Thanks
Use This CSS
.tab.active {
box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 99999;
}
.tab {
background: #fff none repeat scroll 0 0;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(50% - 2px);
}
.content {
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin-top: 0;
min-height: 50px;
position: relative;
z-index: 999;
}
Edit Your CSS
.box {
- Remove this-
/*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */
height: 250px;
margin: 16px;
width: 200px;
}
I have been attempting to make a glowing effect on a sphere in terms of internal 'shiny sphere' patterns, but have become stuck with the likes of positioning some aspects of the 'globe'.
As it currently stands, my css looks like:
.sphere {
height: 200px;
width: 200px;
background-color: red;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.sphere::after {
background-color: rgba(255, 255, 255, 1);
content: '';
height: 15%;
width: 2%;
position: absolute;
top: 0.25%;
left: 3%;
border-radius: 50%;
transform: rotate(45deg);
}
.sphere2 {
height: 200px;
width: 200px;
background-color: yellow;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.shine {
background-color: rgba(255, 255, 255, 0.5);
content: '';
height: 50%;
width: 15%;
left: 18%;
top: 0%;
position: relative;
border-radius: 50%;
transform: rotate(45deg);
}
<div class="sphere">High Importance</div>
<div class="sphere2">
<div class="shine"></div>
Important
</div>
CODEPEN
But the 'shine' effect on either sphere won't 'stay' in place. (Neither attempts full work).
Would anyone be able to point me in the right direction as to position these correctly (in the top left hand side, with a small margin)?
This will hopefully/eventually look similar to this (without the animated effect, that is)
Any advice would be much appreciated at this point (and i hope you can see where i'm going with this design, as i wish for it to be dynamically sized).
Just remember when you use absolute position you need to define the relative parent to position, this will be the closest with a non-static position defined. Try:
.sphere{
position:relative;
}
.sphere::after{
background-color: rgba(255,255,255,.5);
content:'';
height:50%;
width: 15%;
left:18%;
top:0%;
position:absolute;
border-radius:50%;
transform: rotate(45deg);
}
Codepen Updated
Position your .sphere and .sphere2 relatively and the ::after :pseudo-elements absolutely and give them same top and left values.
codepen
.sphere {
position: relative;
height: 200px;
width: 200px;
background-color: red;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.sphere::after,
.sphere2::after {
background-color: rgba(255, 255, 255, 1);
content: '';
height: 40%;
width: 10%;
position: absolute;
top: 8%;
left: 14%;
border-radius: 50%;
transform: rotate(45deg);
}
.sphere2 {
height: 200px;
width: 200px;
position: relative;
background-color: yellow;
border-radius: 50%;
text-align: center;
vertical-align: middle;
line-height: 200px;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
}
.sphere2::after {
background-color: rgba(255, 255, 255, 0.5);
content: '';
position: absolute;
border-radius: 50%;
transform: rotate(45deg);
}
<div class="sphere">High Importance</div>
<div class="sphere2">
<div class="shine"></div>
Important
</div>
I'm trying to position some text in the middle of a CSS box. i tired using top:20px; but this moved the whole but rather than the text. any idea how can i do this?
here is my code: jsfiddle
div {
background: #ff9600;
background: rgba(255, 150, 0, 0.95);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
z-index: 10;
}
<body>
<div>text</div>
</body>
Example 1
something like: this fiddle.
It uses the css of:
div {
height: 100%;
width: 100%;
background: #000;
font-size: 12px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
line-height: 80px;
}
which could be quite beneficial for you. :)
Example 2
A more versatile way would be to use span like this demo
which uses:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #123456;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Possible Alternative to (2)
A slight variation of the second example would be to treat the div like a table cell, so altering the above css to:
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
border: 1px solid red;
}
span {
display: table-cell;
vertical-align: middle;
}
And so this should also work for you.
Try to this
Remove this css in
width:100%;
height:100%;
add this css
left:0;
right:0;
top:0;
bottom:0;
padding-top:20px;
Demo
You could use padding to move the text inside the box.
However, I think that you should create a tag (a box) especially for the text, and give it some css property to center this box in the center of the main div (the main box).
Try this my code:
<div>
<span class="vertical-text">
TEXT
</span>
</div>
$('.vertical-text').each(function()
{
parent_height = $(this).parent().height();
$(this).parent().css(
{
'height': parent_height + 'px',
'line-height': parent_height + 'px',
});
$(this).css(
{
'line-height': 'normal',
'display': 'inline-block',
});
});
Demo: http://jsfiddle.net/Silon/caonccjx/