I have to put "Play" icon and text "Play" in the center of element that contains and its height and width depend of that image - they are changing depending of the user's screen.
I was trying to use it like this
a.thumbnail:hover:after
{
content: "Play";
width: 50px;
height: 20px;
display: inline-block;
position: absolute;
top:50%;
left: 50%;
background-color: #fff;
border: 1px solid red;
}
But actually the top left corner of the :before element is in the middle and looks displaced... can you suggest me better solution?
add this to the code
margin: -10px -25px; /** height/2 width/2 **/
or use translate the same way
div{
position: relative;
width: 200px;
height: 200px;
background: red;
margin: 20px auto
}
div:after{
content: '';
position: absolute;
width: 50px;
height: 20px;
z-index: 2;
top: 50%;
left: 50%;
background: green;
transform: translate( -50%, -50%)
}
<div><div/>
Related
I have the following css for tickmark.
.Icon{
display: inline block;
height: 58px;
width: 29px;
border-bottom: 10px solid blue;
border-right: 10px solid blue;
transform: rotate(45deg);
border-radius: 8px;
}
I am trying to get tickmark with background circle. And learn in the process.
There are several approaches to achieving this effect (including CSS and SVG) but one of the most straightforward and portable is to combine a dash of CSS with the unicode character U+2713:
✓
In CSS, you can include extended unicode characters inside ::before and ::after pseudo-elements, using the format:
content: '\2713'
Working Example:
.tick-within-circle {
position: relative;
width: 48px;
height: 48px;
line-height: 50px;
text-align: center;
font-size: 44px;
font-weight: 900;
border: 8px solid rgb(0, 0, 255);
border-radius: 50%;
}
.tick-within-circle::before {
content: '\2713';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="tick-within-circle"></div>
You can use Inline SVG in CSS. By doing so you can customize it's color, size and position. But for that to work SVG content be url-escaped.
Here's URL-escaped characters I used in snippet below
< => %3C
> => %3E
/ => %2F
# => %23
.tickmark-circle {
position: relative;
width: 35px;
height: 35px;
background-color: #db4437;
border-radius: 50%;
}
.tickmark-circle::before {
content: '';
position: absolute;
top: 0;
left: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<div class="tickmark-circle"></div>
Here are some ideas using just CSS.
This snippet takes your tick drawn using CSS and puts it into an after pseudo element on the element which has the Icon class. It introduces a before pseudo element which has the circular background color.
The pseudo elements are positioned at the end of a div.
This is all just for illustration, it depends on exactly how you want to use it whether you'd have the tick part in an actual element or attached as a pseudo element as here.
A CSS variable is used to describe the width of the left part of the tick itself and CSS calculations used after that to size the background etc. Again it all depends on what you want the final result to both look like and be used for as to whether you alter these settings or not.
.Icon {
display: inline-block;
position: relative;
overflow: visible;
--w: 29px;
font-size: calc(2 * var(--w));
}
.Icon::after {
content: '';
height: calc(2 * var(--w));
width: var(--w);
border-bottom: 10px solid blue;
border-right: 10px solid blue;
transform: rotate(45deg);
border-radius: 8px;
position: absolute;
padding: 10px;
box-sizing: border-box;
left: calc(100% + var(--w));
}
.Icon::before {
content: '';
height: calc(var(--w) * 3);
aspect-ratio: 1 / 1;
background-color: cyan;
background-repeat: no-repeat;
background-size: 200% auto;
position: absolute;
border-radius: 50%;
top: 50%;
left: 100%;
transform: translate(0, -50%);
z-index: -1;
}
<div class="Icon">Correct </div>
im straggling to create such title style in CSS. Can someone help me please?
Totally possible with following css
.content::after{
content: "";
background: #fff;
transform: skewY(10deg);
width: 50%;
height: 80px;
position: absolute;
left: 0;
top: 75px;
}
.content::before{
content: "";
background: #fff;
transform: skewY(-10deg);
width: 50%;
height: 80px;
position: absolute;
right: 0;
top: 75px;
}
.content{
width:100%;
height:75px;
background:#fff;
overflow:hidden;
padding:20px;
}
you should check it on different screen sizes and tweak with height of after and before elements
In this case content class should be element you want to add triangle
I need to create a top border around a top that leaves a partial gap. Something such as:
____________________________ (gap) __________________________
| |
| |
The gap I'm trying to create is on the TOP (ignore the ones on the side, that's just to emphasize it's a div). The gap may or may not be perfectly centered -- in other words, it may vary where the gap exists.
Is it possible to do this with css?
You can use a pseudo element absolutely positioned in your container with a background color that matches whatever the background of your page is.
div {
height: 100px;
border: 1px solid black;
position: relative;
}
div:after {
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
content: '';
background: #fff;
width: 100px;
height: 1px;
}
<div></div>
The accepted answer has one flaw, if one want the gap to be "transparent" on top of its background, it won't work if the background is not a solid color.
So to do it on any background, like images, gradient etc., use both pseudo elements, like this:
By altering each pseudo element's width one control both where the gap will be, and its size.
body {
background-image: linear-gradient(to right, orange , yellow);
}
div {
position: relative;
width: 80%;
left: 10%;
top: 45vh;
transform: translateY(-50%);
height: 80px;
border: 1px solid black;
border-top: none;
}
div::before, div::after {
content: '';
position: absolute;
top: 0;
height: 1px;
background: black;
}
div::before {
left: 0;
width: 20%;
}
div::after {
right: 0;
width: 60%;
}
<div>
</div>
And for anyone who need at text in the gap, here's how-to.
body {
background-image: linear-gradient(to right, orange , yellow);
}
div {
position: relative;
width: 80%;
left: 10%;
top: 45vh;
transform: translateY(-50%);
height: 80px;
border: 1px solid black;
border-top: none;
}
div::before, div::after {
content: '';
position: absolute;
top: 0;
height: 1px;
background: black;
}
div::before {
left: 0;
width: 20%;
}
div::after {
right: 0;
width: 60%;
}
div span {
position: absolute;
top: 0;
transform: translateY(-50%);
text-align: center;
}
div span {
left: 20%;
}
div span {
right: 60%;
}
<div><span>Hello</span></div>
I'm trying to give the background of a container a rounded arrow feel. I want the arrow to always be stretched to full width and able to adjust height on the fly (if necessary, I can adjust height with javascript).
Here's an example:
Is this possible using CSS?
If not, how should I accomplish it -- SVG background image?
You can use pseudo elements to achieve this shape.
FIDDLE
div {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
display: inline-block;
padding: 35px 100px;
}
div:before {
content: '';
width: 200px;
height: 200px;
background: #ccc;
border-radius: 20px;
position: absolute;
transform: rotate(-56deg) skewY(25deg);
}
div:after {
content: '';
width: 334px;
left: 33px;
top: 134px;
z-index: 1;
height: 40px;
background: #ccc;
position: absolute;
}
<div></div>
I'm struggling to achieve this effect -
Basically the line below needs to be fluid - I cant get my head around how to do this with a bottom border - any ideas?
Here you have a pure css solution: http://jsfiddle.net/u4Lkxfqe/
You can drag the left separation bar to the right to see it's responsive and gets smaller as you decrease the screen width.
As you see it's effect is very easy to achieve with the pseudo elements 'before' and 'after'.
.container {
position: relative;
width: 50%;
height: 300px;
border-bottom: 2px solid #CCC;
background: url("http://placehold.it/150x100") center center no-repeat;
}
.container:before{
z-index: 1;
position: absolute;
content: " ";
bottom: -6px;
left: -5px;
width: 10px;
height: 10px;
background: #CCC;
}
.container:after{
z-index: 1;
position: absolute;
content: " ";
bottom: -6px;
right: -5px;
width: 10px;
height: 10px;
background: #CCC;
}
<div class="container"></div>