Ok so I need to position text overtop of a slider and have a darkend background behind the text so that it's readable. Simply using text-align: center doesn't work in this instance as the darkened background takes up the entire page width
http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100
.wrapper h4{
position: absolute;
top: 50%; /* Would love to get rid of this! */
color: red;
margin: auto;
width: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
.wrapper{
position: relative;
width: 100%;
text-align: center;
}
So the only solution to this that I could think of was to position it using the left and right css properties. So in this case I put left and right to 40% each.
http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100
.wrapper h4{
position: absolute;
top: 50%;
color: red;
margin: auto;
left: 40%;
right: 40%;
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
The problem though is that this has to be a dynamic page and work for all of the different screen sizes. Using this method I would have to code in the values for all the screen sizes I can come up with ... just seems like it's not an eloquent solution to me. Plus I'm also running into the issue now where the absolute text overlaps other elements if the user increases page zoom.
I'm still a noob so I'm hoping there's a better way to do this?
Thanks Guys!
Add the text inside your h4 in a span:
<h4><span class=text>SOME TEXT</span></h4>
And then:
.text{
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
}
And you can remove the padding from h4 so h4 would be:
.wrapper h4{
position: absolute;
top: 50%; /* Would love to get rid of this! */
color: red;
margin: auto;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
Here is a fixed version of your pen
Related
I'm having an issue where when I use border radius in combination of rgba valued colors like let's say rgba(255,255,255,.8) and then use a box-shadow to somewhat make the box appear feathered I get the issue that the corners are not solid as can be seen in this image.
Detail of the top left corner:
As can be seen, the edges when using border radius in combination with the other CSS element it makes a weird transparent edge when border-radius is set in place.
I've tried quite a bit but without much success, here's a code attempt as I wanted to attempt this for another project but just simply replicated it here: https://jsfiddle.net/01u7gbxa/1/
The code itself can be applied on any object so it seems which resolves to the same results:
background:rgba(0,0,0,.8);
box-shadow:0 0 15px 30px rgba(0,0,0,.8);
border-radius:60px;
Does anyone know if this is possible to fix at all?
Thanks in advance for further information.
You can do the same using blur filter. Apply it to a pseudo element to not affect any potential content
body {
background: #f00;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border-radius: 60px;
position: relative;
}
.box:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: rgba(0, 0, 0, .8);
border-radius: inherit;
filter: blur(10px);
}
<div class="box"></div>
Change these :
background:rgba(0,0,0,.8);
box-shadow:0 0 15px 30px rgba(0,0,0,.8);
to these:
background-color: #000;
box-shadow:0 0 15px 30px #000;
opacity : 0.8;
I'm trying to create a button that has many layers - consequently I'm having to make use of pseudo elements.
To clarify, my button is actually an anchor <a>.
I've run into an issue with one of the pseudo elements. I'm trying to give it a background while retaining a touchable target outside of the background. In order to do this, I've applied a background-clip over the content.
Everything works apart from the corners, which are applied but just not the shape I was expecting.
Button 2 is the design I'm trying to crack - by ensuring the pseudo perfectly overlays the element.
I now think I know what is happening but don't know why and how to fix it.
The padding is 6px deep, the border radius 10px. The radius is being calculated as 4px deep and 10px wide.
Any advice appreciated.
div {
margin-bottom: 20px;
}
a, a::before {
box-sizing: border-box;
}
a {
background-color: red;
border-radius: 10px;
color: white;
display: inline-block;
height: 36px;
line-height: 36px;
min-width: 100px;
position: relative;
text-align: center;
z-index: 1;
}
a::before {
background-color: rgba(0, 255, 0, 0.5);
border-radius: 10px;
content: "";
display: block;
height: 48px;
padding: 6px 0;
position: absolute;
top: -6px;
left: 0;
width: 100%;
z-index: -1;
}
.button2::before, .button2a::before {
background-clip: content-box;
}
.button2a {
margin-left: 20px;
}
.button2a::before {
background-color: blue;
}
.button3::before {
background-clip: content-box;
border-radius: 50%;
}
<div>
<p>This is a button with no background-clip - border-radius applied as expected<p>
<p><a class="button1">button 1</a></p>
</div>
<div>
<p>This has same border-radius as above, but background-clip applied on content - overlay doesn't completely disappear - leaves odd shapes at corners as can be seen on blue button. I was expecting 10px corners to mirror center</p>
<p><a class="button2">button 2</a><a class="button2a">button 2</a></p>
</div>
<div>
<p>This has same background-clip applied but uses a percentage for border-radius - seems to work as expected</p>
<p><a class="button3">button 3</a></p>
</div>
I'm trying to create a button that has many layers
What about doing things differently and instead of using pseudo element you can rely on multiple background to have multiple layers:
a.button1 {
background:
linear-gradient(to right,transparent 50%,blue 0),
linear-gradient(to bottom,orange 50%,transparent 0),
red;
border-radius: 10px;
color: white;
display: inline-block;
height: 36px;
line-height: 36px;
min-width: 100px;
text-align: center;
}
<a class="button1">button 1</a>
Can someone help me regarding this http://www.alerto24.com/
Why is there a wide space to the right and the horizontal scrollbar is visible?
Both your footer and content section have a right margin of -100% which causes the scrollbar. Disable that CSS property for both elements and the scrollbar is gone.
please change below css
#content::before {
background: rgba(0, 0, 0, 0) url("../images/site-bg-b.jpg") no-repeat scroll 50% 0;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
#footer::before {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
border-top: 1px solid #032d34;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
I think there is a structure problem in your #footer and #content.
For example. You put background properties to apply a 100% background in :before and a max-width: 920px combined with width: 100% in footer element, which appears like a contradiction.
I suggest you these modifications :
You remove #content:before and #footer:before properties. You can create a container div in your #content element which contains the width of the website like this :
#content .container {
width: 920px;
margin: 0 auto;
}
And you apply background properties on #content which has width: 100%;
#content {
width: 100%;
background: blue; /* you put your background properties on it */
}
Also, you do the same for footer :
#footer {
position: relative;
z-index: 1;
width: 100%;
/* max-width: 920px; remove this line */
background: blue; /* you put your background properties on it */
margin: 0 auto;
padding: 30px 0 15px;
color: #fff;
}
#footer .wrap {
position: relative;
margin: auto; /* you use this property to center this container as it is on the website */
padding: 0 0 50px;
font-size: 0;
width: 920px; /* you apply width on this container instead of the #footer container */
letter-spacing: -5px;
}
EDIT : I've made a JSFiddle to explain my thoughts
See it here
I can't center my modal in twitter-bootstrap with various sizes. You can see live example here and here. (just click on the picture or "Report this image"). You'll see that modal is there working like charm, but it isn't horizontally centered. I tried everything: margins, float, text-align and even <center>
.modal:
.modal {
position: fixed;
top: 10%;
z-index: 1050;
width: auto;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal-body:
.modal-body {
margin: 0 auto 0 auto;
position: relative;
padding: 15px;
overflow-y: auto;
}
I know it's a little late, but I found the solution to all the problem with centering the Bootstrap Modal with different heights than the standard's (one).
$("#yourModal").modal('show').css({
'margin-top': function () { //vertical centering
return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
return -($(this).width() / 2);
}
});
A solution that works regardless of the child element size (in this case the modal). Can also be used to center vertically.
.centered {
left: 50%;
transform: translateX(-50%);
}
Essentially what we are doing here is pushing the element right by half of the parent container's width. In the case of the modal the parent would (should) be the body. The transform property is the pulling the element left by half of its own width.
Edit: To center vertically
.centered {
top: 50%;
transform: translateY(-50%);
}
Note: I think the horizontal centering only works if the height/width of the parent are the same, as the % comes from the parent width. If they are not the same then just use the parent height.
It's not the modal body that needs centering, it's the overall modal. Since that has fixed positioning, you could do it with CSS and jQuery (since jQuery is already being used):
CSS:
.modal { left: 50%; }
jQuery:
$('.modal').each(function(){
var modalWidth = $(this).width(),
modalMargin = '-' + (modalWidth/2) + 'px!important';
$(this).css('margin-left',modalMargin);
});
Alternatively it is possible with just CSS:
.modal {
width: 100%;
left: 0;
background-color: transparent; }
.modal-body {
display: inline-block;
background-color: #FFF; }
.modal img { min-width: none!important; }
Alternative to #Coop's answer. As you have a fixed width text area there, you can set the width of the modal and use negative margins rather than jquery.
.modal {
left:50%;
width:444px;
margin-left:-222px;
}
In your current code, there is nothing that will allow the modal to center.
You can use jquery to reproduce this behaivor:
left: 50%;
width: 560px;
margin-left: -280px;
Calculating the width of the div and asign css
$(document).ready(function () {
var modalWidth = $('#myModal').width();
$('#myModal').css("left", "50%");
$('#myModal').css("width", modalWidth);
$('#myModal').css("margin", (modalWidth/2)*-1);
});
.modal-dialog
{
padding-top: 15%;
}
is there a way I can stop the opacity from affecting my links text when the mouse pointer hovers over my link? I just want the opacity to affect the image only.
Here is the CSS.
.email {
background: url(../images/email.gif) 0px 0px no-repeat;
margin: 0px 0px 0px 0px;
text-indent: 20px;
display: inline-block;
}
.email:hover {
opacity: 0.8;
}
Here is the xHTML.
Email
Short answer: No.
Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would give you a black background with 20% opacity, and black text with full opacity:
p {
background: rgba(0, 0, 0, 0.2);
color: #000000;
}
For background images, use a PNG with alpha channels.
Not with a background image (you can if it's just a background color). Instead of using opacity, replace the background image with less opaque version in .email:hover.
Yes, take the text out of the context of the transparent container with absolute positioning. This will work with background images as well!
<div id="TransContainer">
<div id="TransBox" href="#">Some text that will be opaque!</div>
<div id="NonTransText">Some text that I do not want opaque!</div>
</div>
<style>
#TransContainer
{
position: relative;
z-index: 100;
display: block;
width: 420px;
height: 165px;
background-color: blue;
}
#TransBox
{
background-color: green;
display: block;
width: 100px;
height: 100px;
opacity:0.4;
filter:alpha(opacity=40)
}
#NonTransText
{
color: #000;
position: absolute;
top: 20px;
left: 0;
}
</style>