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>
Related
I would like to integrate the W3-Tooltip in my project. It works fine on normal screens, but fails on mobile phones. The example is here: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_left
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
When making the screen smaller, the tooltip will stay where it is and a scroll bar will appear.
I would like to have a css-solution, where the tooltip will be positioned differently on small screens. My idea is to have
left and width: relative to screen
top: relative to parent object (the underlined keyword)
Then the tooltip could fill the screen from left to right border but stay under the keyword.
Does anyone have an idea how to solve this positioning issue? I would prefer a solution without javascript, but if it is not possible without, then it would also be OK.
Use a media query to position the tooltip differently on a smaller screen:
#media only screen and (max-width: 600px) { /* adjust max-width for the screen-size you want */
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
margin-top: 10px; /* adjust this if needed */
}
.tooltip .tooltiptext::after {
top: 0%;
left: 50%;
margin-top: -9px;
margin-left: -5px;
border-width: 5px;
border-color: transparent transparent black transparent;
}
}
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/>
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>
How to style a rectangular div with elliptical rounded sides?
You can get an ellipse by setting border-radius 50%.
You can get two elements, one inside the other, with different sizes, and so get the 2 ellipses needed
.test {
position: absolute;
left: 40px;
top: 40px;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: -30%;
top: 10%;
width: 160%;
height: 80%;
background-color: lightblue;
border-radius: 50%;
}
In this case, using an pseudo element , and so, only one div is needed
demo
Have you checked out this website? Try this:
div
{
border:2px solid;
border-radius:25px;
}
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height