Is there a way to set the color of the clipped space while using:
border-top-left-radius: 1em;
I want it to be a certain color but it is taking the color of the div behind it
If your element is not positioned with a z-index, you can create and absolutely position a pseudo-element behind it that's as large as the corner radius (or as large as the element itself if you prefer):
.your-div::before {
position: absolute;
width: 1em; /* Or 100% if you prefer */
height: 1em; /* Or 100% if you prefer */
background-color: <your-color>;
content: '';
z-index: -1;
}
If your element does have its own z-index, then z-index: -1 on a child element or pseudo-element won't work, and you'll have to make a new element and position that element behind the one with the rounded corner instead. How you do that will depend on your layout.
Related
I have a question about CSS positioning of :before element to a parent element.
Let's say I have a parent element div like a block of text with background and padding properties and I want to add a small image or icon to this div (e.g. in the right-top corner) and I want this small element to stay there even when resizing the window.
How can I achieve that? Here is a code for :before I tried:
.blure:before {
content: URL(/image.svg);
position: absolute;
margin-left: 73%;
margin-top: -14%;
}
After setting the absolute you can give the left, right, top, bottom properties to element
.blure:before{
content: URL(/image.svg);
display: absolute;
top: 15px;
right: 15px;
}
Here's an example of a CSS tooltip. The author positions the toolip relatively.
.tooltip{
display: inline;
position: relative;
}
However, the tutorial says,
Relative. This type of positioning is probably the most confusing and
misused. What it really means is "relative to itself". If you set
position: relative; on an element but no other positioning attributes
(top, left, bottom or right), it will no effect on it's positioning at
all, it will be exactly as it would be if you left it as position:
static; But if you DO give it some other positioning attribute, say,
top: 10px;, it will shift it's position 10 pixels DOWN from where it
would NORMALLY be. I'm sure you can imagine, the ability to shift an
element around based on it's regular position is pretty useful. I find
myself using this to line up form elements many times that have a
tendency to not want to line up how I want them to.
There are two
other things that happen when you set position: relative; on an
element that you should be aware of. One is that it introduces the
ability to use z-index on that element, which doesn't really work with
statically positioned elements. Even if you don't set a z-index value,
this element will now appear on top of any other statically positioned
element. You can't fight it by setting a higher z-index value on a
statically positioned element. The other thing that happens is it
limits the scope of absolutely positioned child elements. Any element
that is a child of the relatively positioned element can be absolutely
positioned within that block. This brings up some powerful
opportunities which I talk about here.
What I understand is that, without modifiers like top, left etc. relative is equivalent to static and goes with the flow of the page. Then how's the tooltip being displayed at the correct position, i.e. above the hyperlink? Shouldn't it appear at the end of the page instead?
The CSS you provided for tooltip is not complete. I think you saw it in w3schools. But note that there are two elements for it: a parent element with .tooltip class and a child element (actual tooltip text) inside it with .tooltiptext class.
the parent element has position: relative without any top, left ... positions which acts as you said as a static element in its original (normal) place. But the child tooltiptext inside it has a position: absolute which is why it is seperated from normal text flow and put over them.
Here is a sample:
.tooltip {
/* this is just to add meaning for position:absolute of .tooltiptext */
position: relative;
color: navy;
}
.tooltip .tooltiptext {
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 10%;
/* style the tooltip */
min-width: 50px;
background-color: #ff9;
color: black;
font-size: 10pt;
border-radius: 3px;
padding: 3px 10px 6px;
white-space: nowrap;
visibility: hidden;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<span>Sample: </span>
<span class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</span>
I've got a page with CSS3 columns, and I am trying to place a pseudo element at the same Y position as the inline element, but at a fixed X position (in the left margin). This works great on the first column, but the rest of these pseudo elements in the other columns do not behave properly.
What ends up happening is that the pseudo elements are placed along the left margin, where the element would be if it were in a single column. If you scroll down you will see the green blocks along the left where the text would be if it were in a single column.
What I'd like is for the green blocks to be in the column gap area at the left edge of the line of text where the exists.
I'm guessing the issue is with this bit of code:
.marker:after {
content: ' ';
display: block;
white-space: nowrap;
position: absolute;
left: 0px;
width: 0;
height: 0;
border: 6px solid green;
}
JSFiddle: http://jsfiddle.net/o0xu0e2x/1/
Note: My application only requires Chromium 41+ support, so that is why I am using -webkit tags. Using pseudo element :before/:after does not matter, they both behave this way.
You need to relatively position the parent .section elements.
In doing so, the absolutely positioned pseudo elements are positioned relative to the .section elements rather than the window.
Updated Example
.section {
position: relative;
}
I am trying to prevent the opacity property from applying to the child elements.
I was under the assumption that the below piece of code would do that, but it isn't working.
.22:hover:after {
background-color: black;
opacity: 0.1;
}
One solution is using rgba:
.22:hover:after {
background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1
}
The reason your current solution doesn't work is because your :after pseudo element does not have any content set (therefore it is not rendered), and it is not positioned properly. Try this instead.
.22:hover:after
{
background-color: #000;
opacity: 0.1;
content: ' ';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
It works because the :after pseudo element renders inside the element which it is meant to come after, by then positioning and setting this pseudo element to always be the same size as its parent element, you get a parent element with a transparent background.
You should also make sure that you child element has its position property set (because setting the z-index doesn't work without a position property set) and az-index higher than the z-index of the :after pseudo element (1 is fine in this case):
.22 > yourchildelement
{
position: relative;
z-index: 1;
}
That should do the trick for you. Here's a jsFiddle, the background is set to be black.
I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px.
I have an element that is either in a div.something or in a div.anything. Depending on which class it's in I want to add a corner cap to the left or right.
So therefore I'm positioning the .element relative, the apply the :before pseudoclass to the img and position it absolute with a height and width of 26px so only one icon of the sprite fits in. I also apply "overflow:hidden" in order to hide the second icon on the sprite.
.element {
position:relative;
}
.element:before{
content: url("../images/sprite.png");
position: absolute;
height:26px;
width:26px;
overflow:hidden;
}
.something .element:before {
top: -2px;
left: -2px;
}
anything .element:before {
top: -28px;
right: -2px;
}
This works fine for the left-corner where I use the first top icon in the sprite.
However now I wonder how I can show only the second icon in the sprite for the "anything .element".
So actually the "mask" should be positioned at -2px, -2px but the sprite img inside should start at -26px so the second icon is shown.
Is this possible with css the way I'm doing it right now?
Don't use content to insert your image, as you cannot modify its position. Instead, set the content to " " and add the sprite as a background image. You can then use the background-position property to move the sprite to the correct position. Otherwise your example should be working just fine.
A working demo:
http://jsfiddle.net/RvRxY/1/
Support for :before and :after pseudo elements on img tags is limited, if at all existent on most browsers.
The best solution would be to place your img inside a div, and then have the class applied to the actual div, rather than the img.
You almost have the usage for the pseudo element correct. You can give this a try:
.somediv { position:relative;}
.somediv:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
top: 0;
}
.somediv.foo1:before {
background: url("../images/sprite.png") no-repeat -2px -2px;
left: 0;
}
.somediv.foo2:before {
background: url("../images/sprite.png") no-repeat -2px -28px;
right: 0;
}
Use the background:; property rather than the content:; property so that you can position the sprite within the :before pseudo element.
left:; right:; and top:; should be used for absolute positioning of the pseudo element relative to its parent (.somediv).
Placing a 1px border around your pseudo element will help you understand the different positioning :)