I been playing with css around a div for sometime now, and still couldn't find a way to copy the picture below.
Anyone can help would be great. And it should be a div or something that I can put a text inside.
A bit tricky, but doable with pure CSS.
HTML:
<span class="hover-me">Mouse goes here</span>
<div class="tooltip">
<div class="tooltip-origin-border">
<div class="tooltip-origin-inner">
</div>
</div>
<div class="tooltip-content">
This is a tooltip.
</div>
</div>
CSS:
.tooltip {
position: absolute;
margin-top: -30px;
margin-left: 120px;
display: none;
}
.tooltip-content {
padding: 10px;
border-radius: 5px;
border: 1px solid #33c;
background: #ddf;
}
.tooltip-origin-border {
border: 10px solid transparent;
border-right-color: #33c;
margin-top: 10px;
margin-left: -19px;
position: absolute;
}
.tooltip-origin-inner {
border: 8px solid transparent;
border-right-color: #ddf;
margin-top: -8px;
margin-left: -6px;
position: absolute;
}
.hover-me {
cursor: pointer;
}
.hover-me:hover + .tooltip {
display: block;
}
You just need to play with the positions. The "arrow" is actually a box, with transparent left, top and bottom borders, leaving only the right one visible and because of the way they connect to each other, there's a triangle shape. Jsfiddle
I think CssArrowPlease is what you're looking for.
Try this ->http://jsfiddle.net/5amvG/
I Hope this is what you are looking for
CSS:
#popup{
overflow: visible;
position: relative;
border: 0;
padding: 40px;
height: 40px;
width: 110px;
color: #fff;
background: #d83c3c;
border-radius: 0 3px 3px 0;
}
#popup:before{
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
HTML :
<div id="popup">
Sell yourself and say what makes you,you !
</div>
I guess this can help you:
Pure CSS speech bubbles:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
Related
So I want to create a button that looks like this when it's active (you can see that it has a little arrow pointing to the right)
Currently I have something like that, it stays blue after clicked, text turns white and all that. I used .addClass for that, but I have no idea if I should use it again to glue on a triangle onto my button, there has to be a better way right?
While I'm at it, how can I make the shadow/sidebar?
Please, experienced people, give this beginner some enlightenment
add below css for
.active {
height: 50px;
width: 100px;
background: blue;
height: 50px;
width: 100px;
background: blue;
position: relative;
}
.active:after {
content: "";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<div class="active"></div>
try
.active {
height: 50px;
width: 200px;
background: #0092ff;
}
.active:after {
content: "";
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #0092ff;
display: block;
margin-left: 200px;
transform: translateY(75%);
}
.active:hover:after {
content: "";
border-left: 0px solid #0092ff;
transition: border-left 0.2s ease-in;
}
<div class="active"></div>
Please Check following working example.
$(function() {
$('.btn').click(function() {
$(this).closest('ul').find('.active').removeClass('active');
$(this).addClass('active');
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
padding: 10px;
background: teal;
position: relative;
display: block;
width: 60px;
cursor: pointer;
}
.active::after {
content: " ";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid teal;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a class="btn active">Home</a></li>
<li><a class="btn">News</a></li>
<li><a class="btn">Contact</a></li>
<li><a class="btn">About</a></li>
</ul>
you need to add position:relative to the selector ul li.
after that, you can use the following code below to add content through the pseudo element after of the active link.
change the size of the borders, as well as positions for top and right to suit your needs.
ul li.active:after {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #0092ff;
position:absolute;
top: 15px;
right:-15px;
}
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I have been trying hard without success to add a little triangle under my square to act as a pointer like this:
My code by itself works, but whenever I try to add css to make this triangle nothing will appear. I think it has to do with before-after functions, but I'm not really getting it. Anyone can help me with that?
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.com" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
edit: code of the triangle
<div class="triangle-down"></div>
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #555;
}
</style>
Generally in CSS triangles are made using borders, not before and after pseudo elements. To create a downward pointing triangle, you would create a top border of n number of pixels, and left and right borders of half that width and also transparent.
Example:
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.png" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"><div id='triangle-down'></div></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
#triangle-down {
position: absolute;
top: 40px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid blue;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
See my codepen here: https://codepen.io/anon/pen/bvXOab
You could add another div for the triangle like
<div id='triangle'></div>
Css For the triangle...
#triangle{
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid blue;
}
However I feel that your problem is not that it just isnt appearing its that the positioning is messed up so its 'hidden' behind the sliders
I think I understand what you're trying to make. This should add a triangle above the marker. This solution should allow you to also remove anything related to triangle-down as it only requires the slider_marker1 div
#slider_marker1::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -6px;
left: 0;
right: 0;
margin: auto;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid green;
z-index: 100;
}
What is the best way to make the following layout (where the grey area is a simple transparent background, i.e. with 60% color transparency and the corners are cut or rounded):
I tried several tutorials regarding tab menus, but i failed on the parts that i marked red. I can't figure out how to "hack" the stylesheets to make a line, that is interrupted below the active tab AND has a rounded corner on the right.
I made a solution with a simple colored background (not transparent) by adding a bottom-border on the active tab in the same color as the content and moving it -2 px to the bottom (overlay). But this does not work with transparency.
Please note: The tabs have to be flexible regarding their width (because it is a multi-language layout).
Proof of Concept
I am afraid to say that it can be done, but it is a bit of a mess and my
solution involves using absolute position of elements with specific dimensions,
and of course, extra markup.
The solution may not work too well in a flexible design, but I thought it would
be illustrative to post it.
The trick is to use the class .active to turn on the segments that draw the
lines before and after the tab element.
If you switch the .active class to the other tab, you will see the effect.
Note: There is a glitch towards the bottom of the tab, sometimes a white space
shows up on certain screen sizes in Firefox, but it could be an artifact of
the snippet tool of StackOverflow. If you look at the same code in jsFiddle.net, the layout seems to work.
jsfiddle: http://jsfiddle.net/audetwebdesign/hujhmLap/embedded/result/
#tab-list {
width: 400px;
height: 42px;
position: relative;
}
.tab-panel-1 {
width: 400px;
height: 42px;
position: absolute;
top: 0;
left: 0;
display: block;
}
.tab-panel-2 {
width: 400px;
height: 42px;
position: absolute;
top: 0;
left: 0;
display: block;
}
.tab {
background-color: rgba(125, 125, 125, 0.25);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: solid 2px #000;
border-bottom: 0;
display: block;
text-align: center;
padding: 10px 0 0 0;
width: 80px;
height: 30px;
}
.t1 {
position: absolute;
left: 0px;
top: 0px;
}
.fill1 {
position: absolute;
left: 82px;
right: 0px;
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-right: 2px solid black;
border-top-right-radius: 5px;
}
.t2 {
position: absolute;
left: 100px;
top: 0px;
}
.pre2 {
position: absolute;
left: 0px;
right: calc(400px - 100px - 2px);
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-left: 2px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 0px;
}
.fill2 {
position: absolute;
left: calc(100px + 80px + 2px);
right: 0px;
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-right: 2px solid black;
border-top-right-radius: 5px;
}
#content-box {
background-color: rgba(125, 125, 125, 0.25);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 0px;
border: solid 2px #000;
border-top: none;
height: 200px;
padding: 20px;
width: 356px;
}
.t1, .fill1,
.pre2, .t2, .fill2
{
display: none;
}
.active .t1, .active .fill1,
.active .pre2, .active .t2, .active .fill2
{
display: block;
}
<div id="tab-list">
<div class="tab-panel-1 ">
<span class="tab t1">Tab 1</span><span class="fill1"></span>
</div>
<div class="tab-panel-2 active">
<span class="pre2"></span><span class="tab t2">Tab 2</span><span class="fill2"></span>
</div>
</div>
<div id="content-box">
Hello World!
</div>
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}