I have a header that has a background image. On this image I would like to place some divs with circle shapes to add some animations. The problem is that once the view port shrinks, the shapes will move accordingly if absolute position is used. I've tried it out with vh and vw units but the shapes will still move even if the background photo won't change too much. I just want that div to be there as if it was part of the photo. Is this possible?
There are is a pretty neat hack you can do for circles (or perfect squares). In an :after pseudo-class, you can say padding-bottom: 100% - this percent is relative to the .circle itself, and thus the width and height are exactly the same. Coupled with a percentage on the width of the circle, you can make these resize with the container.
You'll notice that resizing the container keeps the size of the circle relative to the parent, and the position relative to the parent as well.
.header {
position: relative;
height: 300px;
background: grey;
}
.circle {
width: 10%;
position: absolute;
}
.circle::after {
content: '';
display: block;
padding-bottom: 100%;
border: 1px solid green;
border-radius: 100%;
overflow: hidden;
}
.circle.top-left {
left: 10%;
top: 10%;
}
.circle.bottom-right {
right: 10%;
bottom: 10%;
}
<div class="header">
<div class="circle top-left"></div>
<div class="circle bottom-right"></div>
</div>
Related
I need help understanding clip-path CSS property in order to make my version of a clipped circle below...
More like the design version:
If you can see on the grey background, my circle appears a lot larger and less round when it's clipped.
What can I do to make a more round circle? My ideas were:
Use clip-path as in the snippet below
Use a pseudo :after element or a right border with radius
Cut a circle image from photoshop and use it as a background image.
Preferably, I'd like to avoid using a background image. However, I need to keep responsiveness in mind as the circle cannot change shapes drastically as we resize the window.
Is clip-path the right way to go? Can someone suggest a simpler and elegant solution with another way using CSS?
Thank you in advance, here's a snippet I wrote that illustrates how I clipped the "green/blue" background:
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: circle(560px at left);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
Per my comment, instead of using clip path to create your D (which is not supported very well), why not use border radius on your div.
* {
box-sizing: border-box;
}
.page-banner {
position: relative;
background: url(https://www.fillmurray.com/300/900) center center no-repeat;
background-size: cover;
width: 100%;
overflow: hidden; /* hide overflowing bits of circle */
min-height: 300px; /* just give enough height to fit text at smallest screen width size */
}
.circle {
background-color: rgba(50, 108, 116, 0.9); /* use rgba for transparent effect */
color: white;
transform: translate(-50%, -50%); /* move the circle left 50% of it's own width and up 50% of it's own height */
border-radius: 50%;
padding-top: 100%; /* this gives us a responsive square */
position: absolute;
top:50%; /* this vertically centers the circle */
left:0;
width:100%;
min-width:600px; /* this is the miniimum dimensions to allow circle to fill smaller screens */
min-height:600px;
}
.page-banner-text {
position: absolute; /* just positions the text on the right of the cirecle */
left: 50%;
top: 50%;
transform: translateY(-50%);
padding:2em;
width:40%;
}
<div class="page-banner">
<div class="circle">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
The only problem with it being responsive though is that as the screen gets wider, the D gets flatter (as the radius extends), but you can combat this by adding a max width and height to the circle div
To anyone looking to solve this with the clip-path property, you have a bit more control with the ellipse clip path. Using the code provided by the OP, I replaced circle with ellipse, and switched to percentages to allow for a slightly better responsive feel.
clip-path:ellipse(67% 100% at 8% 50%);
The first two numbers represent the height and width of the ellipse. The larger the first number, the wider the visible area is. The larger the second number, the wider the height. We're aiming for a D shape, so by adjusting the first number, we can make the D more or less prominent.
This is where the second two numbers, the positioning, comes into play. at 50% 50% centers it. By adjusting the first number, the X positioning, we can move it over where need fit . After playing around with the numbers, you should be able to get the D exactly how you'd like.
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: ellipse(67% 100% at 8% 50%);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
You could simply use
an inner circle element, which you can achieve with a border-radius equal to half the element's height and width
positioned via position: relative with negative top and left values
inside of an outer bounding box, clipped via overflow: hidden
A simple implementation:
#container {
height: 300px;
width: 100%;
background-color: gray;
overflow: hidden;
}
#circle {
height: 600px;
width: 600px;
background-color: rgba(0, 0, 255, 0.5);
position: relative;
top: -150px;
left: -375px;
}
<div id="container">
<div id="circle"></div>
</div>
I need to dynamically display 2 graphic image files that represent opening and closing quotes as shown below in the sample screen shot.
The quotes need to appear just to the left and to the right of the upper content block as shown. Content block widths will vary on the page.
I have tried float and background image. Does anyone have a tip or trick to properly, dynamically and flexibly position 2 image files?
Here is what I have so far after working with #Utkanos answer:
HTML
<div class="postsPage_item_content postsPage_item_quote"><?php the_content();?></div>
CSS
div#maincontentcontainer div#primary div div.postsPage_item_content {
position: relative;
text-align: center;
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::before, div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE1.png');
content: '';
display: block;
left: 20%;
height: 28px; /* background-image natural height is 28px */
position: absolute;
top: calc(50% - 50px);
width: 36px; /* background-image natural width is 36px */
}
div#maincontentcontainer div#primary div div.postsPage_item_quote::after {
background-image: url('../images/QUOTE2.png');
left: auto;
right: 20%;
}
Display
Desired results are that (1) each of the dynamically rendered quotes align with the top of the content block, and (2) the quotes dynamically position with margin padding to the left and right of the content block as shown by the red arrows.
Pseudo elements are perfect for this sort of thing.
HTML:
<div id='my_div'>
<p>Content here.</p>
<p>Etc.</p>
</div>
CSS:
#my_div {
position: relative;
}
#my_div::before, #my_div::after {
content: '';
width: 50px;
height: 50px;
position: absolute;
display: block;
background: url('path/to/open_quote_img.png');
left: 5%;
top: calc(50% - 25px);
}
#my_div::after {
background: url('path/to/close_quote_img.png');
left: auto;
right: 5%;
}
That code assumes your quote graphics are 50px in width and height - modify as required.
Finally, to ensure your content doesn't overlay the quote images, set an appropriate padding-left and padding-right on the container (in my example, the div) so the content is sufficiently pushed in away from them.
Another possibility is using absolute positioning inside a relative container. For example:
.container { width:300px; position:relative;padding:20px}
.left-quote {position:absolute; top:10px; left:10px; font-size:30px;}
.right-quote {position:absolute; bottom:20px; right:10px; font-size:30px;}
<div class="container">
<span class="left-quote">"</span>
<span class="right-quote">"</span>
<p>is one of the smartest and most dedicated people that I know... he helped the company achieve incredible share of voice in key publications such as...</p>
</div>
Ok...here is my problem:
I have a webpage with html & body set from css to:
body,html{
position: fixed;
width: 100%;
height: 100%;
overflow:hidden;
}
and also a webkit tag to disable the scrollbar:
/*Disable scrolling*/
::-webkit-scrollbar {
display: none;
}
inside of the body i use 3 divs to cover the entire available space in the page:
(i will not use the actual css code for the divs because it's unimportant for this matter and i will write only a basic code to get the ideea)
As i said, three relative divs to cover the available 100% height and width:
.div1{
position: relative;
width: 100%;
height: 10%;
}
.div2{
position: relative;
width: 100%;
height: 80%;
}
.div3{
position: relative;
width: 100%;
height: 10%;
}
Now here is my problem:
* inside the middle div (div2) i have 4 concentric circles all of which are absolute divs wrote in css3. It is really important that these divs remain "absolute".
here is the css for them:
.size-large,
.size-normal,
.size-small,
.main-frame{
position:absolute;
left:0;
right:0;
margin:0 auto;
background: transparent;
border: 3px dotted #999;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 50%;
}
.main-frame{
width: 50%;
padding-bottom: 50%;
margin-top:-25%; /* push back half */
}
.size-large{
width: 30%;
padding-bottom: 30%;
margin-top:-15%; /* push back half */
}
.size-normal {
width: 20%;
padding-bottom: 20%;
margin-top:-10%; /* push back half */
}
.size-small {
width: 10%;
padding-bottom: 10%;
margin-top:-5%; /* push back half */
}
Problem is that those circles does not resize acording to the relative div of which they belong.
Their width/height given in percentages, is set acording to the body element.
I want my design to be liquid and to use only the available webpage without scrolling but also to resize all it's elements on any display.
FULL SCREEN RESULT: http://jsfiddle.net/Nn7mU/1/embedded/result/
CODE VIEW: http://jsfiddle.net/Nn7mU/1/
From my understanding, you want to ensure your concentric circles to stay within the blue div whilst maintaining a perfect round circle according to the percentage width you have set (i.e. .main-frame {width: 50%}, .size-large {width: 30%), .size-normal {width: 20%}, .size-small {width: 10%})
Your circles are indeed adjusting according to your blue div (based on width % not height %). So since your blue div has width=100%, the circles will adjust according to that only.
You will need to find a way of using BOTH height and width % so it maintains aspect ratio and central positioning.
I would recommend reading on this thread which provides possible solutions:
HTML and CSS Fluid Circle
Height was not respected on this fiddle
I want the image to have a height and width of 80% relative to its parent, vertically and horizontally aligned. For some reason, it does not work.
HTML:
<div id="menu_header_new_orig">
<img id="menu_logo_orig" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>
CSS:
#menu_header_new_orig {
margin-top: 2.5%;
height:40%;
width:100%;
overflow: hidden;
position: relative;
border: 1px solid green;
text-align: center;
}
#menu_logo_orig {
width: 80%;
height: 80%;
position: relative;
}
I have figured it out here, but just in case somebody have better solution.
If I understand you correct :
The parent #menu_header_new_orig own parent must also have a height (obviously 100%)
html, body {
height: 100%;
}
set display to inline, 10% top to get vertical alignment
#menu_logo_orig {
top: 10%;
display: inline;
position: relative;
width: 80%;
height: 80%;
}
Is that what you were heading for? [not really sure] - try to set #menu_header_new_orig height to other things than 40% to get it in another perspective.
forked fiddle -> http://jsfiddle.net/Dmc7j/
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}