I'm working with this JS Fiddle: http://jsfiddle.net/BY3tz/1/
Notice when you remove the position, left, and top properties from the dotParent CSS class, the black dot is centered within the box.
I'm looking for a way to keep the black dot centered (vertically and horizontally) while leaving the 3 properties mentioned above in place so that I can change the left and top properties to position the box anywhere, and the black dot will remain centered.
Is this possible? Can anyone see what I'm doing wrong with my dot class?
Some tweaks to the .dot class:
.dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50px;
margin-left: -5px; // Half of the width * (-1)
margin-top: -5px; // Half of the height * (-1)
top: 50%;
left: 50%;
background: #000;
-webkit-border-radius: 50px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
http://jsfiddle.net/BY3tz/2/
Added dot wrapper so .dot is relative to new wrapper,
<div class="dotParent">
<div class="dot-wrapper">
<div class="dot"></div>
</div><!-- end dot-wrapper -->
</div>
New Styles.
.dot-wrapper {
position:relative;
width:100%;
height:100%;
}
Added to .dot class
.dot {
position:absolute;
top:45%;
left:45%;
}
http://jsfiddle.net/BY3tz/5/
Change the position attribute in the dotParent div to "Relative". Since its the parent Div, it needs to be positioned as Relative in order for its children to take it as a reference point.
.dotParent {
position: relative;
top: 150px;
left: 50px;
height: 68px;
width: 68px;
border: 1px solid Black;
}
http://jsfiddle.net/BY3tz/6/
Related
What is the idiomatic way to position an element (X) to the left of an other element (inline-box 2), independent of its size, using standard CSS & HTML?
It is okay if it appears over other elements.
I have found a solution: to position an element to the left of another one, no matter their sizes, make it its child, and then absolute-position it right: 100%.
100% means the width of its parent, so 100% from the right will put it just left of it!
Using left: -100% wouldn't work, because it means: offset the left of the element left of the parent by the parent's width, however we want to offset by the width of the child element, itself.
CSS-only demo:
/* The important parts */
#box2 {
position: relative;
}
#x {
position: absolute;
right: calc(100% + 5px);
top: -1px;
}
/* Just styling */
#box1, #box2 {
border: 1px solid blue;
width: 200px;
margin-right: 10px;
display: inline-block;
}
#x {
border: 1px solid orangered;
width: 100px;
height: 150px;
}
<div id="container">
<div id="box1">box1</div>
<div id="box2">box2
<div id="x">X</div>
</div>
</div>
I'd like to set a margin all around a <div> with a position:absolute inside a scrollable <div> to let some free space between the inside div and the scrollable area boundaries (right and bottom).
I tried something like this but with no luck:
<div style="overflow:scroll">
<div style="position:absolute; margin-right:100px; margin-bottom:100px">DRAG ME</div>
</div>
Demo here: https://jsfiddle.net/ayft01x0/
Only the margin-bottom works, and only in Chrome.
You can also imagine that there are other elements inside the scollable div and that they should stay clickable even if they are masked by the margin of the "drag me" element (which should be the case when using CSS margins).
I'm looking preferably for a CSS-only solution that works in Webkit browsers.
Any ideas?
Absolute positioning changes the way margins work, but you can get the effect you're after with borders:
We add a border to the left and the right. This interferes with the border you already had on the draggable element, so we add a pseudoelement to take care of the design. The pseudoelement covers up the "drag me" text, so we add a wrapper around that content and fix the z indices
Here's an update to your fiddle, and here's a snippet of the essential css
#container {
position: relative;
width: 200px;
height: 200px;
border: solid 1px black;
background-color: white;
}
#box {
position: absolute;
border-right: 100px solid transparent; /* changed this */
border-bottom: 100px solid transparent; /* changed this */
outline: 1px solid red; /* just for demo purposes */
width: 80px;
height: 80px;
left: 50px;
top: 50px;
/* dropped the border and background styles */
}
#box span { /* added this element */
position: relative;
z-index: 1;
}
#box:before { /* added this element */
content: '';
position: absolute;
z-index: 0;
width: 80px;
height: 80px;
/* placement adjusted to take the border into account */
left: -2px;
top: -2px;
/* border and background styles moved from #box to here */
border: solid 2px #666;
border-radius: 10px;
background: #ccc; /* shaved off a couple bytes by dropping the -color */
}
<div id="container" style="overflow:scroll">
<div id="box">
<span>DRAG ME</span><!-- added this wrapping element so that it can get a z-index -->
</div>
</div>
Note that I've kept your initial positions for the draggable box, but I would probably actually do it like this. The negative margins are just half the element's dimensions. This way if you tweak the size of #container you don't have to recalculate #box's starting position
#box {
...
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
There is a workaround by using an encapsulating div with inner padding and make it transparent to the mouse interactions using the pointer-events property.
<div style="overflow:scroll">
<div style="position:absolute; padding-right:100px; padding-bottom:100px; pointer-events:none">
<div style="pointer-events:all">DRAG ME</div>
</div>
</div>
Demo here: https://jsfiddle.net/1axtonez/
The easiest way to achieve this is to create an invisible CSS ::before pseudo-element that covers the box plus a padding, and to make it transparent to the mouse interactions using the pointer-events property:
div.box::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-right: 100px;
padding-bottom: 100px;
pointer-events: none;
/* background-color: rgba(255,0,0,0.2); // to understand what is going on */
}
Demo here: https://jsfiddle.net/rmxwwyno/
Be warned that it's not working when the box has an overflow property that is not set to visible.
How can I use HTML and CSS to make a div with an image inside it that is clipped and masked so that it looks like the following:
I've been trying to find a way to do this for about 2 hours now and got nowhere so I was just hoping someone could point me in the right direction. To be specific here, I wish to clip the image such that the top two corners are rounded, and embed it in a div element with four rounded corners and a 1/4 bottom padding, with both elements transformed such that it appears the right edge is further away from the viewer than the left.
In order to create such an effect, where the image remains the same, but the outer shape has this perspective look, you could use something similar to the demo below.
div.inner {/*gives top section effect, also crops the image*/
position: absolute;
top: 0;
left: 0;
border-radius: 20px 20px 0 0;
height: 200px;
width: 300px;
overflow: hidden;
border: 10px solid red;
transform: skewY(5deg);
}
.inner img {/*removes transform skew from image*/
transform: skewY(-5deg);
transform-origin: top left;
height:100%;width:100%;
}
.wrap {
display: inline-block;
height: 200px;
width: 300px;
position: relative;
/*for demo only*/
margin: 100px 100px;
}
.wrap:after { /*give bottom section the effect*/
content: "";
position: absolute;
bottom: -50%;
left: 0;
height: 100%;
width: calc(100% + 20px);
transform: skewY(-10deg);
transform-origin: bottom right;
background: red;
z-index: -1;
border-radius: 20px;
}
<div class="wrap">
<div class="inner">
<img src="http://lorempixel.com/500/500" />
</div>
</div>
In order to create the effect, I have had to incorporate this wrapper div. This allows the use of a pseudo element (the :after css) to generate the lower part of the shape:
+----------------------------+
| |
| _______/ <-- curved corner
| ------/
| ------/
\-----/
/\
\_____ also curved corner
The inner div is then hence used to generate the upper part of the shape. Using the skew declaration, the shape allows the opposite of the :after element, bringing the right hand side of the red shape down wards.
The overflow:hidden ensures any part of the image that does not fit within this inner div will be cropped (the border-radius:20px 20px 0 0; ensures only the upper corners are affected).
The last point to note is the .inner img css. Since I have skewed the .inner div, it is important to then 'unskew' the image so it remains the rectangular shape. This is why there is a 'counter-skew' here (transform: skewY(-5deg);).
Here's my attempt using perspective.
Thanks to #vals for the pointing out that perspective can be used as part of the transform.
* {
box-sizing: border-box;
}
figure {
perspective: 1000px;
width: 420px;
margin: 5em auto;
height: 350px;
background: red;
text-align: center;
padding: 10px;
border-radius: 25px;
transform: perspective(1200px) rotateY(50deg);
}
img {
border-radius: 20px 20px 0 0;
}
<figure>
<img src="http://lorempixel.com/400/200/sports/1/" alt="" />
</figure>
I'm trying to put a dot in each corner of a container. I'm thinking the trick to this is a combination of .my-container:before and setting the :before's border or background property. The effect I want is similar to SO#17306087, but I don't want to use images.
Edit
jsfiddle
I'll be using this quite a bit, so would prefer it to happen automatically with a css class (not require additional DOM elements).
Edit
Since svg is text-based and can be inserted directly into css, I'm looking into that method. I see here that this does work: example fiddle
my updated fiddle (currently has a css error that I'm trying to pin-point) fixed fiddle with 4 dots using background prop
The svg is valid and not throwing errors as DOM: fiddle
You can do it only on a div and with standard CSS.
The trick is to use the pseudo elements to display 2 circles using radial gradients.
.test1 {
width: 200px;
height: 200px;
background-color: lightblue;
position: absolute;
left: 220px;
}
.test1:before, .test1:after {
content: "";
position: absolute;
height: 100%;
width: 20px;
top: 0px;
background-image: radial-gradient(circle at center, red 5px, transparent 5px), radial-gradient(circle at center, red 5px, transparent 5px);
background-size: 20px 20px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.test1:before {
left: 0px;
}
.test1:after {
right: 0px;
}
fiddle
You could also draw the circles in the elements itself, but then you can not apply it to elements having background.
The above code renders the circles pixelated. It's better leaving 1 pixel for the red/transparent transition
background-image: radial-gradient(circle at center, red 5px, transparent 6px), radial-gradient(circle at center, red 5px, transparent 6px);
updated fiddle
Assuming you're okay with something a little crazy, there is a CSS only solution that's completely based on a single class (on a single element). The only caveat is that that element MUST have at least one child element (which should probably be the case anyways, right?)
.my-container:before, .my-container:after, .my-container *:first-child:before, .my-container *:first-child:after {
content: '';
height: 5px;
width: 5px;
position: absolute;
background: #777;
border-radius: 50%;
}
.my-container:after {
right: 0;
top: 0;
}
.my-container *:first-child:before {
left: 0;
bottom: 0;
}
.my-container *:first-child:after {
bottom: 0;
right: 0;
}
You can use :before and :after to create your dots, though the challenge comes in the fact that this only creates two dots per element. Because of this, I've set it to look for the first element inside the container, and apply the same styles to that. (the wildcard selector * looks for any element, and :first-child makes sure it only gets applied to one child element)
See fiddle:
http://jsfiddle.net/5N9ep/2/
Now obviously this won't work in every situation, and you can always mess with the selector for that second element if you have something that will work better.
Other than that, if you want to make it a little more practical (but less cool), I would recommend just making two wrapper div elements, and giving each one of them a unique class, each creating two dots with a simple :before and :after.
http://jsfiddle.net/qQP84/
HTML :
<div class="maindiv">
<div class="lefttop dot"></div>
<div class="leftbottom dot"></div>
<div class="righttop dot"></div>
<div class="rightbottom dot"></div>
</div>
CSS
.maindiv {
height: 150px;
width: 150px;
background: blue;
position: relative;
}
.dot {
height: 12px;
width: 12px;
border-radius: 100%;
background: red;
position: absolute;
}
.lefttop {
top: 0;
left: 0;
}
.leftbottom {
bottom: 0;
left: 0;
}
.righttop {
right: 0;
top: 0;
}
.rightbottom {
right: 0;
bottom: 0;
}
EDIT:
jQuery solution to easily append the dots to different divs that have the same class
$('<div class="lefttop dot"></div><div class="righttop dot"></div><div class = "leftbottom dot"></div><div class="rightbottom"></div>.appendTo('.myDivsThatNeedDotsClass');
This will append(give) the 4 dots to each element that has the class .myDivsThatNeedDotsClass
With this approach you can remove the HTML from above, but keep the css like it is.
If you don't have the same class for all of them, than you can do this
.appendTo('.myDivsThatNeedDotsClass, .anotherClassThatNeedsDots, #anIDthatNeedsDots');
the following can be your mark-up
<div class="my-container">
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
<p class="stuff">Some stuff</p>
</div>
the css as follows
body {
margin: 10px; /* for visibility */
}
.my-container {
background-color: #eee; /* for visibility */
position: relative;
width:98%;
border:1px dotted red;
}
.my-container .stuff {
text-align:center;
}
.tr,.tl,.br,.bl{
position:absolute;
border:5px solid red;
border-radius:10px;
}
.tr{
top:0;
right:0;
}
.tl{
top:0;
left:0;
}
.br{
bottom:0;
right:0;
}
.bl{
bottom:0;
left:0;
}
Can I ask a little help about creating that shape with CSS?
The button needs a circle for the icon, and the simple box for the text.
Here is a possible version using the :before pseudo element. The pseudo element is converted into a circle by using border-radius: 50% and is then positioned before the rectangular div#menu as required.
You can add a image (like the one in question) to the pseudo element by using the content property like shown below:
content: url(http://yoursite.com/yourimage.png);
or using the background-image property also:
background-image: url(http://yoursite.com/yourimage.png);
#menu {
position: relative;
width: 100px;
height: 24px;
line-height: 24px;
color: white;
background-color: peru;
border: 1px solid peru;
border-radius: 2px;
padding-left: 24px;
}
#menu:before {
position: absolute;
content: '';
height: 40px;
width: 40px;
top: -9px; /* (height of parent - height of pseudo) / 2 - border-top of parent for vertical mid */
/* top: -17px; (height of parent - height of pseudo) - border-top of parent for bottom align */
left: -24px; /* some value less than width - depends on amount of overlap needed */
border: 1px solid transparent;
background-image: url(http://lorempixel.com/40/40/people/1);
background-color: peru;
border-radius: 50%;
}
/* Just for demo */
* {
font-family: Calibri;
letter-spacing: 2px;
}
#menu {
margin: 25px;
}
<div id='menu'>Menu Text</div>
Note: This is in essence a different version of the answer posted by Jason Gennaro. If you need support for IE lower versions, use his answer because they don't support :before.
Here's a quick and dirty version:
HTML
<div id="circle"></div>
<div id="rectangle">Header Text</div>
CSS
#circle{
border-radius: 50%;
width: 85px;
height: 85px;
background: brown;
float:left;
}
#rectangle{
width:300px;
height:40px;
background:brown;
color:white;
float:left;
margin-top:20px;
margin-left:-40px;
position:relative;
z-index:-1;
padding-left:60px;
padding-top:6px;
font-family:arial;
font-size:2em;
}
DEMO
http://jsfiddle.net/H6Lkk/
Explanation
use border-radius:50% and any width to create a circle.
float the two divs to allow for the overlap
use position and z-index to place the rectangle under the circle
add the logo image as necessary in the #circle