I'm trying to create an arch using just CSS. I've looked into various "inset border-radius" questions, but all of them show how to inset corners, not the middle section of an object.
I'm looking for a way to inverse the middle of an object to create an arch like a bridge.
Included is an example image to show the sort of thing I'm trying to achieve.
Edit:
An important part of this arch is that it will be placed over other objects. Simply whiting it out isn't a solution, rather just a temporary hack. See image below for more on that.
You could accomplish with radial gradients. I’ve put an example up on JSFiddle: http://jsfiddle.net/17ohey9h/
The basic idea is to have a big overlay (generated content clipped to the container with overflow: hidden) and then to give it a background of a radial gradient with a hard stop for the transition. We can do this by setting two stops at the same position, but with opposite translucencies:
radial-gradient(ellipse at center, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%)
You can obviously play around with the colours and positionings, the general idea holds. I’ve also only provided the W3C syntax for this. You’ll need to add in the older versions dependent on how far back your required browser support goes.
Given the images you've posted, you might consider another approach to this, such as this: http://codepen.io/pageaffairs/pen/lpLHg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {background: red; padding-top: 100px; width: 400px; text-align: center; overflow: hidden;}
img {border-radius: 200px/30px ; display: block; margin: 0 0 -30px -10px;}
</style>
</head>
<body>
<div>
<img src="http://placeimg.com/420/420/any">
</div>
</body>
</html>
Another way to solve it, using box-shadow
.overlay::after {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 30px;
border-radius: 50%;
box-shadow: 0px -100px 0px 72px red;
}
fiddle
Reusing Robin fiddle :-)
Html :
<div class="wrapper">
<div class="rectangle"></div>
<div class="egg"></div>
</div>
CSS :
.wrapper {
width:200px;
height:100px;
overflow:hidden;
position:relative;
}
.rectangle{
width:200px;
height:100px;
background-color:red;
}
.egg {
width:200px;
height:100px;
border-radius:50%;
background-color:#fff;
position:absolute;
top:56px;
}
and the fiddle :
http://jsfiddle.net/h1gjefk7/
You could do it like this: http://codepen.io/pageaffairs/pen/wpaFm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 230px;
height: 120px;
background: red;
position: relative;
overflow: hidden;
}
div:after {
content:"";
width: 260px;
height: 50px;
background: #fff;
border-radius: 100% 100% 0 0;
position: absolute;
bottom:0;
left: -15px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Related
I need to have an half arch like shown below using only css.
Tried using clip path, but the result is not the same.
clip-path: circle(63.5% at 100% 63%);
Maybe something like this?
You should define border-radius value according to your div width.
.arch-div{
position:absolute;
width:40%;
right:0;
height:100%;
background-color:black;
border-top-left-radius:300px;
}
.container{
height:200px;
background-color:darkgreen;
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body >
<div class="container">
<div class="arch-div">
</div>
</div>
</body>
</html>
The image shown does not have exactly a quarter circle showing - it looks more like quarter of a sort of oval/ellipse.
There is no need to add an extra element to the main HTML, you can add this 'quarter' using an after pseudo element.
This snippet uses aspect ratio to set the sizes, but you could of course use actual dimensions as required and change the measurements to get exactly the shape you require.
.cutout {
height: 50vh;
aspect-ratio: 16/9;
display: inline-block;
background: teal;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.cutout::after {
content: '';
display: inline-block;
background-color: white;
border-radius: 50%;
position: absolute;
left: 63%;
top: 0;
height: 200%;
aspect-ratio: 1/1.5;
z-index: 1;
margin: 0;
padding: 0;
}
<div class="cutout"></div>
.holderDiv{
position: relative;
}
.shadowSimulation{
position: absolute;
background-color: black;
height: 60%;
width: 611px;
bottom: -10px;
left: -10px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="holderDiv">
<img class="confidentalMainImage" src="http://i.imgur.com/SoHn5gF.jpg">
<div class="shadowSimulation"></div>
</div>
</body>
</html>
I have attached an image of what I need to get.
In the code sample, I have tried with z-index but still not a result.
I need to get the black part back to the image. That's it.
I found answer myself, the solution was to give position: relative to an image and higher z-index: as well.
Have you tried to add a shadow directly to the image or the div that contains it?
It maybe a better solution because of problems with different web browsers.
Here is a codepen with a modified example, and code below, hope it helps
css:
.holderDiv {
position: relative;
margin-left: 30px;
margin-bottom: 30px;
width: 611px;
box-shadow: -20px 20px 0 Gray;
}
I am making a website with css and jquery. One of my script is to show a text at a specific location on a mouse click. The text is displayed good in google chrome at its intended position. but in IE9 and FF17 they are displaced from the intended position. My background image is such that it fits to the size of the window of the browser.
I am attaching the screenshot which will give a better idea. Also I am writing the code. maybe only a small tweak is required but I do not get it. Please help me in this.
This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
*Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin-top: 0px;
padding-top: 0px;
top: 0px;
margin-left: 0px;
padding-left: 0px;
left: 0px;
}
body {
overflow: hidden;
}
#background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;}
.content {
visibility:hidden;
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
}
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
<div><img id="background" alt="background" src="tot1.png"></div>
<div class="content" id="thought_text">Here goes the text<br></div>
There is a simple hack that will work in IE9 for vertically centering elements. It uses the transform: translateY property to adjust an element within another element. We can apply a class to our inner element like so:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You'll need to add the appropriate vendor prefixes. Here is a great article on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Firstly, for fixed positioning, use: top, bottom, left, right attributes instead of margin-top, margin-right..
Secondly, you've applied same z-index'es on siblings.
Thirdly, use of img element for background this way is not the best solution.
You should go for CSS background-image for body or text-div wrapper, stretched to 100%.
Full solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg);
background-position: top center;
background-repeat:no-repeat;
}
.content {
top: 40%;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
border-style: none;
}
#thought_text{
left: 25%;
right: 25%;
color:#000;
}
</style>
<body>
<div class="content" id="thought_text">Here goes the text<br></div>
</body>
</head>
Consider removing #thought_text{} block in css file and combining it in the .content {} block to avoid overriding of attribute values
or
adding !important directive to the attributes
and also change
margin-top: 40%; to some fixed value such as margin-top: 250px; which ensures the top positions as same in all the browsers.
As I understand, you stretch image to whole page and want to center your block with text. You have 50% width (100% - 25% margins from both side) and 40% top margin.
With position:fixed you have top and left properties to set position relative to page.
.content {
position:fixed; /* taking it over the page */
z-index:2; /* and over the image */
left:25%; /* move to 25% from left */
width:50%; /* and setting width */
top:40%; /* move to 40% from top */
font-size:1.5em;
opacity: 0.697;
}
And you can remove
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
You get original bug because top/bottom margin and padding in percents calculates from width not height according to spec.
this is just an idea , hope that useful .
<style>
#background {
background:url('tot1.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
z-index:1;
}
</style>
<div id="background">
<div class="content" id="thought_text">Here goes the text<br></div>
</div>
You can use a bit of javascript to detect if IE or Firefox are present, and then change the margin/position of the text accordingly.
function detectBroser(){
if (navigator.userAgent.indexOf("Firefox")!=-1)
return "Firefox";
else if (navigator.userAgent.indexOf("MSIE")!=-1)
return "Internet Explorer";
}
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/
First of here is what I'm trying to achieve :
http://img801.imageshack.us/img801/1516/sitelayout.png
I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
<div id="contentTop"></div>
<div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>
CSS
html,body{ height: 100%; margin: 0; padding: 0; }
body{
background-image:url('images/bg.png');
background-repeat:repeat;
}
#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}
#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}
#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}
#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}
#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}
#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}
#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}
Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_<
Anyway, I would really appreciate any insights you might have.
yay Coming back to html+css after a year or two yay
for ease i'd just look in to Faux Columns
set the #content to have a background image that resembles the effect you want.
you'll also probably want to look in to a sticky footer
See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.