I'd like to create this kind of design in CSS (or bootstrap functionnality maybe) so if you know a tutorial or something I need it.
Style I'd like to create:
Thanks
You can get this label tag easely, using some css tricks (after + positioning):
HTML:
<span class="label-tag">Type</span>
CSS:
.label-tag {
display:inline-block;
position: relative;
height: 20px;
line-height: 20px;
padding: 10px 20px;
color: white;
background-color: #509e2f;
}
.label-tag:after {
content: '';
position: absolute;
left: 100%;
top: 0px;
border-width: 20px 0px 20px 20px;
border-style: solid;
border-color: transparent transparent transparent #509e2f;
}
Working fiddle: https://jsfiddle.net/bd45gynk/
Related
I have a regular <div> element currently styled to look like a plain rectangle with rounded edges like this:
Is there a way to style it with just CSS (without adding any additional html elements to it) to make it look like this with a 'brace' on each end of the bar:
Here's a small cut out from my code of what I have at the moment:
.rectangle {
width: 400px;
background-color: grey;
border-radius: 4px;
}
<div class='rectangle'> </div>
You might use border:
.brace {
width: 400px; height:20px;
background-color: grey;
border:solid 10px;
border-color: #0000 #0000 #fff;
border-radius: 4px;
}
<div class="brace"></div>
You'd have to play around a bit with the settings below to get the precise size/shape you need, but you can do it by using a pseudo element, similar to the snippet below.
The :after rule creates an additional element which overlaps the main element.
.rectangle {
position: relative;
width: 400px;
background-color: grey;
height: 40px;
border-radius: 4px;
}
.rectangle:after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 380px;
height: 10px;
background-color: white;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
<div class='rectangle'> </div>
I'm trying to put a scrollbar inside my div tag yet when I do, the arrow on the side of it disappears. Is there are way to fix this?
Live preview here.
The bubble is supposed to look like this, but with a scrollbar in it of course.
.bubble {
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 8px;
width: 240px;
height: 250px;
padding: 10px;
margin: 100px auto 100px auto;
position: relative;
overflow: scroll;
}
.bubble:before {
content: "";
position: absolute;
left: -25px;
top: 24px;
bottom: auto;
border-style: solid;
border-width: 12px 24px 12px 0px;
border-color: transparent #000000;
}
.bubble:after {
content: "";
position: absolute;
left: -23px;
top: 25px;
bottom: auto;
border-style: solid;
border-width: 11px 23px 11px 0px;
border-color: transparent #ffffff;
display: block;
width : 0px;
}
Put the below content div inside bubble div.
Put content of bubble div inside the below div and add the style..
<div class="content"></div>
Inside style :
.content{
height:70px;
overflow-y:scroll;}
HOPE IT HELPS
Try putting the content of the bubble inside a div, and put overflow: scroll on that child div, rather than on the entire bubble.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a jsfiddle here - http://jsfiddle.net/0nvns9Lj/1/
I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.
I just need to create a play button so I have a circle containing a triangle.
It's working but seems like alot of messing for something simple
.wrap{
background: #ddd;
height: 300px;
position: relative;
}
.circle{
background: red;
border-radius: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin: -25px 0 0 -25px;
}
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
You can (and should) do this simpler.
* { margin:0; padding:0 }
figure {
background: #ddd;
height: 200px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
figure button[name="play"] {
width: 50px;
height: 50px;
background: red;
border: none;
border-radius: 100%;
margin: auto;
cursor: pointer;
}
figure button[name="play"]:focus {
outline: 0;
border: 1px solid hsl(210, 58%, 69%);
box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure button[name="play"]::after {
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 3px;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
<figure>
<button name="play"></button>
</figure>
Editable demo: http://jsbin.com/mipali/5
There is not much to improve.
Maybe you can use a special font like 'Webdings', and otherwise you can make a simple CSS triangle. In both cases you just need a simple element for the button, and a ::before pseudo-element for the shape. In the HTML and CSS below, both methods are shown.
Both buttons use a normal A element, so the buttons could (if you can find any url or useful onclick event to attach to it) still work as a normal link when you don't even have CSS (think about the visually impaired).
Moreover, the HTML doesn't contain any extra markup apart from the class names. No 'inner' element needed, and I think that's the most important improvement. The CSS isn't that much shorter than your's but I got rid of the 'inner' element, so the markup is completely clean.
And remember: if you want more complex shapes, you also have a ::after pseudo-element at your disposal. :)
/* Basic red round button properties */
.button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
color: white;
/* Hide the text 'play', which is present in the HTML document for accessibility */
font-size: 0;
}
/* Properties for the pseudo-element that almost every button will need.
You can just merge it into the style below if you are only going to have
the play button. */
.button::before {
content: "";
display: block;
position: absolute;
}
/* Play button properties using font */
.play1.button::before {
font-family: 'Webdings';
font-size: 28px;
content: '\25B6';
top: -2px;
left: 12px;
}
/* Play button properties using CSS shape */
.play2.button::before {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid white;
top: 10px;
left: 16px;
}
Play<br>
Play
I need help turning the arrow white with a blue border like the box containing the text. I need to use the title inside an a tag as the content but feel free to edit everything else I managed to get it to a certain point but cant seem to get past this:
CSS
.toop {
position: relative;
padding: 0 5px;
line-height: 23px;
}
.toop:hover:after {
content: attr(title);
color: #474747;
font-size: 14px;
line-height: 150%;
text-align: left;
background-color: #ffffff;
border-radius: 5px;
border: 2px solid #2192ce;
padding: 5px 10px;
opacity: 0.9;
display: block;
width: 180px;
position: absolute;
left: 10px;
bottom: 40px;
z-index: 98;
}
.toop:hover:before {
content: "";
border: solid;
border-color: #2191ce transparent;
border-width: 10px 10px 0 10px;
opacity: 0.9;
display: block;
left: 30px;
bottom: 30px;
position: absolute;
z-index: 99;
}
HTML
<br>
<br>
<br>
<br>
<br>
Tooltip is here
you can not do that , you can not have a border around the "arrow" . making that arrow is a trick you can do with css to manipulate the :after and :before to make it appear like an arrow , but you can not have a border outside of that unless you wanted to use an image and put it in that place.
see an example I made of your code to show
outline: 2px solid #000;
outline can be used to make a border outside of the actual border, but it is not going to be anything like what you wanted.
http://jsfiddle.net/pp9t0vqb/4/
The best you can do is fake the arrow with an entire block:
.toop:hover:before {
content: "";
width:10px;
height:10px;
background:white;
border: 2px solid #2192ce;
border-width:0 2px 2px 0;
transform:rotate(45deg);
display: block;
left: 30px;
bottom:35px;
position: absolute;
z-index: 99;
}
But in this case you can't handle the opacity property.
Check this Demo Fiddle
How can I style a div to look like a comic-strip speech bubble in CSS?
Here's an image demonstrating what I mean:
Is there a way of doing this in pure CSS?
A quick example, you can tweak it to fit your needs .. and since I cannot post a fiddle without code:
HTML:
<div class="balloon">
O hai !
<span class="tip"></span>
</div>
CSS:
body { background: #000; }
.balloon {
width: 250px;
height: 75px;
padding: 50px;
background: #fff;
border-radius: 50px;
position: relative;
font-size: 34px;
text-align: center;
}
.balloon .tip {
width: 0;
height: 0;
position: absolute;
right: 70px;
bottom: -20px;
border: solid 10px;
border-color: #fff transparent transparent transparent;
}
http://jsfiddle.net/6rzDK/