I want the shadow to be behind the section. I've tried all the methods but still cannot find a way to figure it out .
Here is the jsfiddle
HTML
<section id="features" class="shadow">
<div class="container">Content</div>
</section>
CSS
section {
text-align:center;
position:relative;
z-index:20
}
#features {
padding:4rem 0;
background:#018CB8
}
.container {
color:#FFF;
margin:0 auto;
max-width:55rem;
width:90%
}
.shadow:after {
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
box-shadow:0 0 40px rgba(0,0,0,0.8);
bottom:0;
left:10%;
right:10%;
width:80%;
height:50%;
-moz-border-radius:100%;
border-radius:100%
}
I have simplified your example right down:
Currently only z-index: -1 works, which has me confused.
Have a fiddle!
HTML
<div class="shadow">Content</div>
CSS
.shadow {
padding: 4rem 0;
background: #018CB8;
color:#FFF;
margin: 0 auto;
max-width: 55rem;
width: 90%;
position: relative;
text-align: center;
}
.shadow:after {
content:"";
position:absolute;
box-shadow:0 0 40px rgba(0, 0, 0, 0.8);
bottom:0px;
left:10%;
right:10%;
width:80%;
height:50%;
border-radius:100%;
z-index: -1;
}
Here you are: jsfiddle.
I added a margin-bottom: 40px to center the shadow. Is this what you were looking for?
Related
When I absolute-position an element inside a relative element, the coordinates are calculated from the edges of the container without taking into account the borders (what would be equivalent to positioning from the interior side of the border.)
Is there any way of positioning the element but from the exterior side of the border?
For example: if I have a red square (like the first one) without a border, the text sticks to the top left of the container because it has top:0; left:0. But the text in the second square still has top:0;left:0, but the border pushes the text inside the square:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text">Text</div>
</div>
What I would like for it is for the text to keep sticking to the top left corner of the colored area. Is that possible? How could it be done?
Note: This is more of a theory question out of curiosity; I know there are alternatives that will work (at least visually) like using negative margins, negative positioning values or an inset box-shadow:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
but what I would like to know if it it's possible doing while keeping the borders.
No box shadow but not quite border either. How about this?
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box:before {
content:" ";
border:25px solid rgba(0,0,0,0.1);
height:100%;
z-index:1;
position:absolute;
box-sizing:border-box;
width:100%;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
z-index:2;
}
<div class="box">
<div class="text">Text</div>
</div>
or box-bordered:after if you want to keep the class on the div element
The only two solutions that come to my mind are:
setting a negative margin equal to the border width on .text
using negative values on the top and left property.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
margin: -25px;
}
.text2 {
position:absolute;
top: -25px;
left:-25px;
color:white;
}
<div class="box box-bordered">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text2">Text</div>
</div>
I don't know if you have considered it but box-shadow has a default margin. Set it to 0 and you achieve the desired result.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
margin: 0;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
As you can see in the center 100 x 100 area is the region, where text contents will be placed. Every content will be calculated based on margin, border and padding.
Therefore, I dont see a solution without using the negative margins or inset box as you mentioned, which is some kind of fix to the original question.
It's posibble.
.parent {
position: relative;
border: solid 1em;
}
.child {
--top: 0;
--left: 0;
position: absolute;
box-sizing: content-box;
width: 100%;
height: 100%;
border: solid 0 transparent;
border-width: inherit;
top: calc(50% + var(--top));
left: calc(50% + var(--left));
transform: translate(-50%, -50%);
background-origin: border-box;
}
If your parent have different border widths around it. This wouldn't work right. But most of the time this would do the job.
I have a problem with my website slider images. I set my slider wrap and slider inner frame width to 100% but when I change the screen size the images size does not change. Also I set the images width to max-width:100% and the height of them to auto.
#sliderFrame {
position:relative;
width:100%;
margin: 0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:1280px;height:auto;/* Must be the same size as the slider images */
border-radius: 6px;
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider div.loading {
max-width:100%; height:auto;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute;
border:none;
display:none;
max-width:100%;
height:auto;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute;
top:0;
left:0;
max-width:100%;
height:auto;
}
<div id="sliderFrame">
<div id="slider">
<img src="image/Index_1600x500.jpg" alt="#cap1"/>
<img src="image/Index_TrackerPnale_1600x500.jpg"/>
<img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/>
<img src="image/Index_Support.jpg" title="Support Team"/>
<img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/>
</div>
</div>
Your CSS doesn't really say much about your HTML - Also, we have no clue on what you really mean by slider - But follow this fiddle: https://jsfiddle.net/p3r1x5sj/ and see the very minimal CSS you're looking for.
#sliderFrame {
width:100%;
height:100px;
position:relative;
}
#sliderFrame #slider {
width:100%;
height:100%;
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
box-shadow: 0px 1px 5px #999999;
}
#sliderFrame #slider img {
width:100%;
position:absolute;
top:0;
left:0;
}
The img tags are what you have to control. Also, unless you crop the images using overflow:hidden; on your outermost container, the images may be all different heights. In this case you may want to consider using divs with background-images
Is there anyway to create similar to the attached with HTML/CSS, that works responsive? without using am image?
Unable to get the oragne border & content added in
CSS
.left {
border-bottom: 70px solid #3488b1;
border-right: 1000px solid transparent;
height: 0;
position: absolute;
bottom:0;
width: 1px;
opacity:.5;
}
.right {
border-bottom: 70px solid #3488b1;
border-left: 1000px solid transparent;
height: 0;
width: 1px;
position: absolute;
bottom:0;
}
.footer {height:100px;}
& HTML
<div class="footer">
<span class="left"> </span>
<span class="right"></span>
</div>
One way is to use transforms.
html, body {
height:100%;
width:100%;
}
#responsive {
position:relative;
height:25%;
width:80%;
overflow:hidden;
min-height: 80px;
}
#triOne {
position:absolute;
background-color:aqua;
height:300%;
width:300%;
transform: rotate(10deg);
top:55%;
left:-100%;
}
#triTwo {
position:absolute;
background-color:blue;
height:300%;
width:300%;
border: 5px solid orange;
transform: rotate(-10deg);
top:45%;
right:-100%;
}
#content {
position:absolute;
right:10px;
bottom:10px;
color:white;
}
<div id="responsive">
<div id="triOne"></div>
<div id="triTwo"></div>
<div id="content">content</div>
</div>
It's not really responsive, but I think with a few tweaks you should be able to get it the way you want it.
i was looking about two hours, how to center a div on the screen. So, when you scroll down a huge page and click on a link, the div "pop up" should appear on the center of screen, not of page.
If you take code like this, it will only center the div on the page, so it's not visible without scrolling up:
.centerDiv {
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
Thanks for your help :)
Instead of position: absolute try out position: fixed
Use position: fixed and then center it like so:
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
This will get it centered on the page wherever you are. Just display the popup when you want to. See my demo at the bottom for a look into what it would look like.
Example:
body {
height: 3000px;
}
.popup {
width: 200px;
height: 150px;
border: 1px solid;
background: red;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
<div class="popup">I stay in the middle no matter where you scroll.</div>
Another example showing you the click link at the bottom of the page:
Demo Here
Note: Scroll to the bottom and click the span.
/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/
*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
height:80%;
width:80%;
margin:0 auto; /* center dude */
background:white;
color:black;
padding:10px;
position:absolute;
top:5%;
left:10%;
z-index:1000;
display:none;
/* CSS 3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#mask{ /* create are mask */
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:500;
width:100%;
height:100%;
display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
display:block;
opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
display:block;
position:absolute;
top:-20px;
right:-20px;
background:red;
color:white;
height:40px;
width:40px;
line-height:40px;
font-size:35px;
text-decoration:none;
text-align:center;
font-weight:bold;
-webkit-border-radius:40px;
-moz-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
}
#open-overlay{ /* open the overlay */
padding:10px 5px;
background:blue;
color:white;
text-decoration:none;
display:inline-block;
margin:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Open Overlay
<div id="overlay">
×
<div style="height:20%"></div>
<h2 style="font-size:35px">Pure CSS Overlay</h2>
<br />
<br />
<br />
<p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->
Here's a pure CSS3 overlay right here for ya. As for centering; margin: 0 auto;
FIDDLE DEMO HERE DUDE
center div on screen with CSS
HTML
<div class="hm_container">
<div class="hm_content"></div>
</div>
CSS
.hm_container{position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%;}
.hm_content{width:50%; margin-left: auto; margin-right: auto; height:150px; border:#000 solid 1px;}
DEMO1
Another demo by using CSS3
HTML
<div class="vhm"></div>
CSS
.vhm{min-height:200px; width:500px; left:50%; top:50%; border:#000 solid 1px; position:absolute;
transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
}
DEMO2
The website I´m currently working on is this: www.ernestoblancarte.com
Its a fluid layout and it works fine in Chrome and Explorer, but when trying it in Safari the proportions crush, i cant get it to work in both browser, please help.
Here is the css:
Thanks in advance.
body{
background:#FFF;
font-family:"futuraLT";
color:#FFF;
word-spacing:-3px;
}
body, html {
width:100%;
padding:0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#Background{
position: absolute;
margin:0;
z-index:0;
}
#Barra{
}
#Logo{
z-index:1;
position:absolute;
bottom:18.9259%;
margin-left:17.12083%;
margin-right:71.166%;
border-style:none;
}
#Center{
height:85%;
}
#Banner4{
margin-top:0px;
margin-left:43.672%;
margin-right:20.8854%;
position:absolute;
}
#Banner3{
max-width: 100%;
margin-top:11.65%;
margin-left:20.8854%;
margin-right:41.5625%;
position:absolute;
}
#Banner2{
margin-top:23.2744%;
margin-left:43.672%;
margin-right:20.8854%;
position:absolute;
}
#Banner1{
margin-top:34.75%;
margin-left:20.9634%;
margin-right:46.35416%;
position:absolute;
}
#BarrTXT{
position:absolute;
z-index:3;
margin-top:47.12511%;
width:100%
}
#Menutxt{
position:absolute;
left:30.5208%;
top: 30%;
width:4%;
margin:0 auto;
}
#Menutxt2{
width:5%;
position:absolute;
left:38.125%;
top:16%;
}
#Menutxt3{
width:4%;
position:absolute;
left:46.875%;
top:30%;
}
#Menutxt4{
width:4%;
position:absolute;
left: 57.38166%;
top: 30%;
}
#Menutxt5{
width:4%;
position:absolute;
left: 68.333%;
top: 30%;
}
maybe its:
margin-top: calc( 100vw * .1165 );
But I also don't see
position: relative
on any containing elements of the absolutely positioned elements